Creating pop-up footnotes in EPUB 3 (and thus in iBooks)

Apple sent around an email today announcing that EPUB 3 is now supported by iBooks and the iBookstore. It also tantalizingly suggested that EPUB 3 supports pop-up footnotes and said you could find information in the EPUB 3 spec on the IDPF website. The first part is true, and the second part is sort of true, but if you like, read on and I'll explain just how to do it.

The IDPF website explains the proper syntax for marking up footnotes semantically, that is, by labeling them as footnotes:

<p>In chapters 24, 89, and 90, we substituted a capital L for the symbol for the British pound, a unit of currency.<a epub:type="noteref" href="#n1">1</a></p>

This snippet is from an EPUB 3 version of Moby Dick, coded by Dave Cramer.

And then the EPUB 3 spec goes on to say that a Reading System may associate specialized behaviors with that syntax, and it looks like Apple has associated the pop-up functionality to the combination of epub:type="noteref" and epub:type="footnote" attribute/value pairs.

So, to make a pop-up footnote in EPUB 3 (which works in iBooks), you just have to create your footnote marker link as shown above, paying special care to include the epub:type="noteref" attribute/value pair. I'll repeat it here for good measure:

<a epub:type="noteref" href="#n1">1</a></p>

Next, create an aside element that contains the text that should appear in a pop-up display when the link is pressed.

The aside element must also have the epub:type="footnote" attribute/value pair to mark it as the footnote content as well as an id attribute that matches the value of the href attribute in your link.

<aside epub:type="footnote" id="n1">
<p>These have been corrected in this EPUB3 edition.</p>
</aside>

Note that the aside element, which is new to HTML5, is automatically hidden by iBooks. If you put your footnotes in, say, a div element, it would still pop-up when the link was pressed, but it would always be visible as a regular part of the text as well.

Another thing that I noticed is that you can enclose your a element in sup elements so that your footnote markers are raised with respect to the surrounding text, but make sure it's outside the a element or else it will break your pop-up footnote.

And that's it. Look! It works!

Here it is in a horizontally-oriented iBooks:



And here it is vertically:



Note that I completely disabled the CSS on this document, to be sure that the pop-up had nothing to do with any CSS effect.

And notice that the font in the pop-up changes to match the font chosen in the Font menu (here I've chosen Seravek):



Again, you can download this and other EPUB 3 examples from the EPUB 3 Samples site and view it in iBooks 2.1.1 (from April!). You can view this particular pop-up footnote on the third page of the Moby Dick book, called "Original Transcriber's Notes" in the table of contents (preface_001.xhtml). Thanks to Dave Cramer who coded the example (in January). And thanks to Apple for adding this functionality... and hinting that it existed so I could figure it out! I love, love, love that Apple totally followed the standard on this one: supporting symantically marked footnotes, and then "associating specialized behaviors" as the spec directs. No extra CSS or Javascript required. Well played, Apple.

OK, there are now two desktop EPUB 3 readers, and iBooks and the iBookstore have officially announced support as well. And there are pop-up footnotes. What are you waiting for to start creating EPUB 3 ebooks?