How to create popup footnotes in iBooks which degrade well for other EPUB3 readers

iBooks popups which degrade nicely in other devices

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.

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, ↩ 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.

Great tip, @paulozoom!

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

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.

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

@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 (↩️). 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 (︎ or ︎) to force the Unicode display. (For reference, ️ or ️ does the opposite, forcing emoji display, which I used above.)

So use ↩︎ (or hex ↩︎) instead, to ensure you get the Unicode version, even on iOS.