Skip to content

Instantly share code, notes, and snippets.

  • Star 18 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
How to create popup footnotes in iBooks which degrade well for other EPUB3 readers
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.
Copy link

atroia commented 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.

Copy link


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…

Copy link

ChrisBaker97 commented Feb 2, 2019

@paulozoom, Great technique!

However, I noticed that, while in iBooks on a Mac, the back arrow generated by &#8617; (or hex &#x21a9;) renders in Unicode as expected (↩︎), but on iOS, it displays as an emoji back arrow (↩️). I'm not a fan of that, since it looks awkward and can't be styled very well with CSS.

The solution, I discovered here, was to append the appropriate (invisible) presentation selector character (&#xFE0E; or &#65038;) to force the Unicode display. (For reference, &#xFE0F; or &#65039; does the opposite, forcing emoji display, which I used above.)

So use &#8617;&#65038; (or hex &#x21a9;&#xFE0E;) instead, to ensure you get the Unicode version, even on iOS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment