iBooks <img> in popup footnote

pettarin commented 10 years ago

In iBooks 3.2 (iOS 7.1), if a noteref / footnote has the following structure:

<a class="box" href="#x" epub:type="noteref"><span class="iconContainer"><img class="icon active" src="y.png"/></span></a>

<div id="x" epub:type="footnote">
<p>TextLine1 </p>
<p>TextLine2</p>
...
</div>

Once the popup opens, there is a blank space before "TextLine1", as if the noteref image was injected as the popup title, but the actual image is not displayed, nor resized as described by the icon CSS class.

pettarin commented 10 years ago

Here is an example:

jeankaplansky commented 10 years ago

Just received this from Adobe indesign epub support forum. They say that formatting of text (and I assume that means other stuff) is not supported in footnotes and is a limitation of iBooks itself:

Losing formatting and punctuation in some footnotes : epub 3.0/ pop-up options created by pooja2087 in InDesign EPUB - View the full discussion Hi Camilo,

Formatting in footnote text is not supported in pop up footnotes. This is a limitation of iBooks itself.

Regards,

Pooja

Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at https://forums.adobe.com/message/6384413#6384413 Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: [https://forums.adobe.com/message/6384413#6384413] To unsubscribe from this thread, please visit the message page at [https://forums.adobe.com/message/6384413#6384413]. In the Actions box on the right, click the Stop Email Notifications link. Start a new discussion in InDesign EPUB by email or at Adobe Community For more information about maintaining your forum email notifications please go to http://forums.adobe.com/thread/416458?tstart=0.

tooolbox commented 8 years ago

Images appear correctly in popovers in iBooks for OSX v1.5. I'd post a picture, but I have an NDA on the book I'm working on right now. Anyway, frustrating that it works on OSX and not iOS...

The reason why you lose formatting is because the popover is created in its own HTML document, as described here:

<?xml version="1.0" encoding="UTF-8"?>
<!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:ibooks="http://apple.com/ibooks/html-extensions">
    <head>
        <title>Footnote</title>
        <style type="text/css">
@namespace ibooks "http://apple.com/ibooks/html-extensions";

body > div:first-child {
    font-size: 200%%;
}
body > div:first-child[ibooks|footnoteTitleEnhance="on"] {
    font-size: 300%%;
    line-height: 0;
}

body > div:first-child[ibooks|footnoteTitleEnhance="on"] > span {
    vertical-align: text-bottom;
}
        </style>
    </head>
    <body>
        <div><span><BKASIDETITLEGOESHERE/></span></div>
        <div>
            <BKASIDEHTMLGOESHERE/>
        </div>
    </body>
</html>

The app replaces <BKASIDETITLEGOESHERE/> and <BKASIDEHTMLGOESHERE/> with the appropriate text. Obviously none of your regular CSS is loaded in. Now, this is in OSX, but iOS is likely similar.

My question then becomes, why would the image display in OSX but not iOS? Maybe it has to do with the relative location of the HTML document?

tooolbox commented 8 years ago

I'm happy to report that <img src="data:image/jpeg;base64..."> does in fact work properly on iOS.

@dvschultz Can add the "Has Workaround" label I suppose.

dvschultz / 99problems

iBooks <img> in popup footnote #15