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

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