iBook Footnote with Images for Epub Aside tag

StackOverflow https://stackoverflow.com/questions/17354896

  •  01-06-2022
  •  | 
  •  

Question

I am trying to get the footnote to include an image.

The pop-up works, there is a space of the right size for the image, but the image itself is not displayed.

Here is a screen shot followed by the code.

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
  <title>test</title>
</head>

<body>
  <div>
    <p>The <a epub:type="noteref" href="#test">star</a> looks blue.</p>
  </div>

  <aside epub:type="footnote" id="test">
    <p><img alt="" src="../Images/Mario.png" />The image should be above this line</p>
  </aside>
</body>
</html>
Was it helpful?

Solution

i was having the exact same problem a while ago. images would not load into some of the asides in iBooks, but would in others.

on iPad1 running the last version of iBooks that it supported, i was able to display the images by inserting them via CSS as a background url of a div with set dimensions inside of the aside, but only with inline styles. i'm not attaching the code because it should never actually be used.

iPad3 with a more recent version of iBooks continued to be buggy, and not display the background images periodically, but the workaround was so ugly that i abandoned it anyway. i believe this is a bug in iBooks.

OTHER TIPS

You can get this working in iBooks for OSX by using a data URI:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

This also works with inline SVG.

Also, an inline background-image: url(...) property works just fine for me. Tested on iBooks 4.8 and 3.0.2 on iOS, as well as 1.5 on OSX.

Follow the below steps:

  1. Convert the image format *.jpg to *.SVG (or) re-crop the image from the PDF and save as SVG (using illustrator)
  2. Open the image file in editor
  3. Copy the SVG coding
  4. Paste it in the corresponding image location.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top