|The only requirements for popup footnotes in iBooks are:|
|* Ebook has to be an EPUB3|
|* epub:type "noteref" and "footnote"|
|So you can link to a totally separate document, as you normally would for endnotes,|
|but include the attributes so the <a> link behaves differently in iBooks, instead triggering the popup.|
|Original reference link would look something like this (in a file called ch001.html):|
|<a epub:type="noteref" href="footnote.html#note1">1</a></div>|
|The footnote.html document would have a footnote marked as below:|
|<p class="footnotes"><a href="ch001.html">1</a>|
|<span epub:type="footnote" id="note1">Schindler’s List (Steven Spielberg, 1993)</span></p>|
|The result you get with this markup is a normal link that works as you would expect it to in other|
|ereaders, but a popup footnote in iBooks. The <span> with the epub:type attribute is there because|
|I didn't want the number to appear in the popup in iBooks. Everything within the element with the|
|epub:type="footnote" will appear in the footnote. So you may not need it and could apply the|
|epub:type="footnote" to the <p> or a <li> element instead, thought with <li> you wouldn't have a|
|number to be able to link back to the original place where the footnote occurs, which is an|
|issue in readers that don't feature a 'back' button.|
Nov 27, 2014
Great tip, @paulozoom!
Mar 27, 2015
Wonderful tip! It's working great on iBooks on OS X yet no luck with iOS. Anyone have any ideas?
Mar 16, 2016
This works wonderfully in iBooks (very clean, although iBooks doesnt hide the footnote at the end of the chapter like it usually does with pop up footnotes), but also when you run it through KindleGen you dont get the pop up on the Paperwhite 2, unless you do it with the id and epub:type in the outer aside tag.
Jan 15, 2017
although iBooks doesnt hide the footnote at the end of the chapter like it usually does with pop up footnotes
BTW, iBooks’ devs didn’t even take accessibility into account so when hidden, the footnotes are not accessible to readers using keyboard/VoiceOver. In other words, displayed footnotes isn’t necessarily a bad thing…
Feb 2, 2019
@paulozoom, Great technique!
However, I noticed that, while in iBooks on a Mac, the back arrow generated by
↩ (or hex
↩) renders in Unicode as expected (↩︎), but on iOS, it displays as an emoji back arrow (
The solution, I discovered here, was to append the appropriate (invisible) presentation selector character (
︎) to force the Unicode display. (For reference,
️ does the opposite, forcing emoji display, which I used above.)
↩︎ (or hex
↩︎) instead, to ensure you get the Unicode version, even on iOS.
I believe I found an improved way of doing this, inspired by what MultiMarkdown does with its footnotes.
↩is the back arrow
Show the back link when embedded on the page
The key here is using hidden to hide the back arrow, but reveal it with CSS, since CSS is ignored in the pop-over.