iBooks: EPUB 3 footnote references containing HTML tags disable link to footnote

[pettarin]

In iBooks (3.2, iOS 7.1) the following link does not work:

<a class="x" href="#y" epub:type="noteref"><span class="z"><img src="q.png"/></span></a> 

If epub:type="noteref" is removed, or the <img> is replaced by just text, the link works as expected, and it shows the linked footnote in a popup.

[dvschultz]

try this:

span.z, span.z > img {
    pointer-events: none;
}

Its possible its due to the span, or the image, or both. So you might want to play with it a bit to really narrow it down.

[dvschultz]

fwiw I definitely have to use that for spans inside a tags.

[pettarin]

I confirm the above solves the issue.

My guess is that it has to do with the handling of double tapping over the <img>, which works without pointer-events: none;, interfering with the popup function.

Another interesting piece of information: even with pointer-events: none;, if the target of the <a epub:type="noteref"> does NOT have epub:type="footnote", the link is still not working.

[dvschultz]

I think that’s expected behavior, although poorly documented.

[dvschultz]

I know that with a span inside an a tag it also doesn’t work. My guess is that iBooks is very careful about the exact target you’re tapping on. pointer-events:none allows it to pass through to the parent a tag, triggering the pop-up.

[pettarin]

RE: I think that’s expected behavior, although poorly documented.

I expect that, even if the popup does not show up, the link still works, which it does not. (Or, in another words, the window.location is not changed to the target.location, and tapping on the link icon does nothing.)

[dvschultz]

ah, interesting. that definitely sounds like a bug. But is the target even visible?

[pettarin]

Yes, it is.

[dvschultz]

ok, very interesting. mind forking that into its own issue?

[pettarin]

OK, doing this now.

[elmimmo]

As reported above, the issue happens whenever the footnote reference contains seemingly any HTML tag whatsoever, so the issue is not specifically related to images. The code below presents the same behavior:

<a class="x" href="#y" epub:type="noteref"><span class="z">Footnote#1</span></a>

So shouldn’t the issue be renamed to something like below?

iBooks: EPUB 3 footnote references containing HTML tags disable link to footnote

[dvschultz]

yep. updated

[jeankaplansky]

Just received a note from the Adobe Indesign EPUB forum indicating that formatting any text in footnotes (which I assume includes inserting other markup or attempting to insert images as well) is a known limitation and not supported in iBooks popup footnotes.

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.

[elmimmo]

Note that, in ADE, the pointer-events: none; trick breaks the hyperlink to the footnote.