Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save NickBarreto/9811005 to your computer and use it in GitHub Desktop.
Save NickBarreto/9811005 to your computer and use it in GitHub Desktop.
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.
@paulozoom
Copy link

I believe I found an improved way of doing this, inspired by what MultiMarkdown does with its footnotes.

Reference link

<a epub:type="noteref" href="#fn-1" id="fnref-1">1</a>

Footnotes
For reference, &#8617; is the back arrow ↩ character.

<ol class="footnotes">
  <li id="fn-1" epub:type="footnote">
    <p>
      Schindler’s List (Steven Spielberg, 1993)
      <a href="#fnref-1" class="reversefootnote" hidden="hidden">&#8617;</a>
    </p>
  </li>
</ol>

Show the back link when embedded on the page

.footnotes .reversefootnote {
  display: inline;
}

The key here is using hidden to hide the back arrow, but reveal it with CSS, since CSS is ignored in the pop-over.

@tofi86
Copy link

tofi86 commented Nov 27, 2014

Great tip, @paulozoom!

@gennaios
Copy link

Wonderful tip! It's working great on iBooks on OS X yet no luck with iOS. Anyone have any ideas?

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

@JayPanoz
Copy link

@atroia

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…

@ChrisBaker97
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