Tuesday, May 22, 2012

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:

pop-up footnote, horizontal

And here it is vertically:

pop-up footnotes, vertical

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):

pop-up footnote in 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?

51 comments:

  1. So can that aside element be used for myriad other purposes, visible on the click of a link, or do we need to fake the semantics of a footnote even if it's not really a footnote?

    ReplyDelete
    Replies
    1. Aside is standard HTML5. Spec here: http://www.w3.org/TR/html-markup/aside.html What else would you want to use it for? (I wonder if it's hidden even without the epub:type attribute.)

      Delete
    2. Thinking of something like pop-up instructions conected to an associated graphic. Related to a current early-stage project.

      Delete
  2. Please do not fake semantics!

    ReplyDelete
  3. What are the two desktop EPUB 3 readers?

    ReplyDelete
    Replies
    1. Unfortunately, neither of those are true “desktop level” EPUB readers. Readium is an extension that only works with Chrome, and Azardi has something to do with Firefox but the information that’s easily available on the Azardi web site is so incomplete that it’s hard to figure out exactly what. It downloads and I can get it to begin to start up but then it freezes. In any case, I can not get either of them work with my Snow Leopard Mac.

      Delete
    2. Both Readium and Azardi work fine for me on my Snow Leopard Mac.

      Delete
    3. O.K. How? If you have explained this in the past, just direct me and I'll read about them. But Readium says that it works with Chrome, which I don't use now and don't want to switch to. If Azardi is supposed to work by itself, it doesn't for me, and I have a very standard OS X. Their web site mentions somehow being connected with Firefox, which is another one that I don't use. But when I ran Firefox, Azardi was still freezing on me. What am I missing? Any suggestions?

      Delete
    4. Sorry you're having trouble! I would recommend downloading Chrome and installing the Readium extension even if you don't use it for anything else. You don't have to browse anything else with it. That's the easiest.

      I found Azardi to have a peculiar interface, and I also find their website confusing. That said, I didn't do anything special to download it, and I don't believe it needs Firefox to run. Here's the download page. You could contact their tech support for more help.

      Delete
    5. I finally got Azardi to work, and your description of its interface as “peculiar” is too kind. It’s an engineer’s interface if I ever saw one, not a user’s interface. Also, it did not show the pop-up comment in the “Moby Dick” EPUB3 book. Clicking on the note indicator did nothing.

      Your suggestion about Chrome/Readium may be a good one. I will give it a shot.

      Delete
  4. Hi Liz,

    first off can I just say a massive thank you for your blogs and your books they have helped me immensely with creating epubs.

    Can I ask what software do you use to create your epubs? I am using Sigil and for the above code for creating footnote in ePub 3, it is not working. It is not displaying the number 1 for the footnote.

    Any ideas?

    Massive thanks,

    Ray

    ReplyDelete
    Replies
    1. Hi Ray. Thanks for the kind words. So glad you've found them useful!

      I use BBEdit to write code. One of the problems with Sigil is that it is based on EPUB2 and thus won't accept anything not in EPUB 2 (and indeed will overwrite what it doesn't accept), including audio/video, and this footnote syntax.

      Delete
    2. Hi Liz.
      Thanks you so much. BBEdit is free or not?

      Delete
  5. Hi Liz
    This is all very fine, we really need a standardized method for pop-up notes. I have tested and tried several methods to create pop-ups using css, js, etc. and they can be made to work.

    But what I am really missing is a good fallback solution for ereaders that doesn't support it on the level iBooks does. Do you have a suggestion for this in relation to this method?

    Toke Riis Ebbesen

    ReplyDelete
    Replies
    1. Hi Toke:
      I think Apple did just the right thing here: followed the standards to the letter, by supporting the epub:type attributes and "associating specialized behavior" in a nice way. Right now, no other ereader that I know of does that. And indeed EPUB3 does not require it, but rather just lays down the groundwork so that it can happen.

      I'm hoping that particularly Barnes & Noble announces and provides support for EPUB3 soon, and implements it properly!

      Hopefully, all ereaders will come along. But some ereaders will never support pop-up footnotes, just because they can't, because ereaders have different functionality. Like big coffee table books are better at displaying color images than cheaply printed paperbacks.

      Not sure what the fallback is in those cases, besides regular links to the back of the book (and hopefully back again), that can be viewed on the simplest device.

      But I'd love to see your Javascript solutions :)

      Delete
    2. Instead of aside, you could use a div with a display:none CSS attribute, and since other ereaders (aside from the Kindle which won't support any of this anyway) don't support this, so the text will still be linked normally and degrade to endnotes at the bottom of the chapter in other ereaders.

      Now I'm wondering if the href link in the epub:type="notref" element will work across to other documents, so you could do this with footnotes in a separate html document, to improve the graceful degradation.

      Delete
    3. Liz: The best tested was the js based from the Treepress blog, but this is much preferable for its simplicity.

      Nicks last solution would be nice as fallback.

      I remember it not working with earlier versions of iBooks, because you have to have all your content in the same html-file, but things might have changed?

      Delete
  6. What have I been waiting for? Someone to write ePub3: Straight to the Point! But forging ahead anyway. Thanks for this.

    ReplyDelete
  7. I've been checking to see how well the EPUB 3.0 and EPUB 3.0 with Layout export works on my iPad. Some formatting is lost, but overall I'm quite happy with the result. For HTML/CSS-challenged folk like me, that's great news.

    But alas, the latest ID puts those footnotes far away, necessitating a go-there, come-back dance that could confuse some readers. If you know someone who does ID scripting, I suspect there are a number of us out here that'd love an ID script that'd let ID export EPUB that has pop-up footnotes for iPads.

    ReplyDelete
  8. I've just realized that most of my comments aren't making it here because they contain angle brackets in <div> tags (which I formerly didn't escape using entities). May try to re-send.

    ReplyDelete
  9. I got this to work for me other than getting the "1" to sit a bit higher up. How did you do that part?

    I love your blog BTW and have purchased your books. Great stuff!

    ReplyDelete
  10. Hi Liz,

    Thanks to share your finding in this blog. I have used the epub:type="footnote" function in the div tag with display: none; property to enable the text on other readers.

    Ex: iPad output for footnote using epub:type="footnote":

    1

    1. Ebook Techniques


    It is putting sequence number automatically for footnote on iPad but i don't need the numbers that is present at beginning of the paragraph on iPad only and also i need to retain for other readers. Can you please help me how to hide it on iPad only?

    ReplyDelete
  11. Hello. Does this pop up text only works on iBooks? No kindle or Nook?

    ReplyDelete
    Replies
    1. Bump. I'd like to know this as well. Been playing with it with a Fixed Layout epub, no dice so far.

      Delete
  12. Great article! I learned a lot. I'm hoping there is a way to use the pop-up with a photo or video? (We publish books in American Sign Language & English, it is very important for early Deaf readers to be able to see the sign for a particular word or phrase while seeing the illustration. Without the illustration they are missing out on the picture support early readers need.) Is there a way to do this? A separate page in a Glossary type feature will disrupt the reading process and the child looses the picture support.

    I'd love to find a way for the child to click on a specific word / phrase and have them see a video of that specific word. It is especially important since the grammar/structure of ASL & English are not identical. So, even though our books provide a read aloud in spoken English (audio) and a read aloud in ASL (video), its of the entire page's text. The differences in the 2 languages makes it very difficult for an early reader to figure out which word is which sign.

    Any ideas on how to do this with this pop-up feature? Or another way completely?

    Thanks very much Liz for your books and website resources. You made it possible for us to publish our first iBook.

    Thanks everyone who might have an idea on how we could do this for sharing.

    ReplyDelete
  13. Images and hyperlinks are not visible if it is embedded in the footnote aside.

    Is this is a ibooks bug or is their any other way to display this.

    ReplyDelete
  14. Hi liz, great thanks for this very informative blog.
    Question: can we apply this syntax "pop-up" in a fixed-layout epub?

    ReplyDelete
  15. hello liz, I bought your book and I must say it's really good.
    I tried to show the example of moby dick on my pc using adobe digital editions and caliber but the pop ups do not work.
    When I click on the numerino nothing happens.
    I also used to readium chrome but nothing to do.
    What's wrong? is there any other player for PC through which to do the test?

    I would also like to know if more advice for the development or BBEdit for EPUB3 is well sealed.
    EPUB3 now is read by all devices you?

    A big hug from Italy!
    Thanks again for your valuable support!
    (francesco)

    ReplyDelete
  16. Stumbled across this article while trying to make iBook do footnotes for me and boy am I pleased I did. I am an experimental writer and I favour digital over paper simply because digital is capable of extending the very nature of the creative writing forms. Sadly none of the tool available make any of my ideas work properly. Having spent a long time working in HTML I have some idea of how I want things to work (and massage them into some crude working examples) but the epub/iBook learning curve is getting in the way of my actual writing. What I really need is an ebook designer/implementor - please have a look at this article - http://www.id-ds.com/ebooks/ to get my gist and help if you can. I am also currently working on a manifesto for 21st century writers that fleshes out some of my thoughts - the latest version (it's attempting to be a digital palimpsest) is available here - http://www.id-ds.com/manifesto/manifesto6.html.

    Thanx for taking the time

    Derek

    ReplyDelete
  17. Hello Liz,
    When I check my ePub file with epubCheck-3.0, I always get this message :
    element "aside" not allowed anywhere; expected the element end-tag, text or element "a", "abbr", "acronym", "address", ...

    However, it's still working on the Ipad...
    Do you know if this version of epubCheck is compliant with these new tags
    Thanks a lot!
    Sébastien

    ReplyDelete
  18. Dear Liz
    Help please: I keep getting the error messages below, whenever I try creating pop-ups in a fixed layout epub. As a test I tried pasting the code you give above into the sample fixed layout you kindly supplied on your site, and I get the same problems!

    The error messages I get on testing with epubcheck are:

    "The prefix "epub" for attribute "epub type" associated with an element type "a" is not bound."


    When opening the relevant page on the the iPad I get the error message:

    "Namespace prefix epub for type on a is not defined"

    Please could you let me know what you think might be going wrong.


    ReplyDelete
    Replies
    1. Hi Peter:

      That means that you haven't declared the EPUB namespace at the top of your HTML documents that include the epub-prefixed attributes:

      <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:epub=”http://www.idpf.org/2007/ops”>

      Does that solve it?

      best,
      Liz

      Delete
    2. Yes that solved it, thank you very much. The only thing now is that the text inside the aside tag is not hidden by default. I had to put display:none in the CSS for some reason.

      Delete
    3. I should mention that i am trying to get the pop up function to work in a fixed layout epub, which brings the question, is there a way to modify the font in the popup? In a fixed layout you can't alter the font on the device. The text in the book is in sans serif, yet the pop up text is in serif, and I can't see a way to change this.

      Delete
    4. Was this ever found to work in a Fixed Layout ePub? I'm trying to get footnote popups to work in for a fixed layout graphic novel and its proving unsuccessful.

      Delete
  19. Yes in iBooks version 3.1 on my iPad!

    ReplyDelete
    Replies
    1. Not sure why the aside text is not hidden. It should be. Check out the example that I used for this article: http://code.google.com/p/epub-samples/wiki/SamplesListing#moby-dick It could be because it's fxl, but I'm not sure why that would make a difference.

      I haven't played around too much with choosing the font. Let me know what you find out!

      Delete
    2. Thanks very much for your help. I will have another look at your example. It does work OK though, with aside set to display none in the CSS. But it seems to ignore any font settings I put in the CSS.
      Due to the clash in fonts in the FXL, I have tried using pictures in the pop up, and that works rather well for my purposes.

      Delete
    3. Hi Liz and Peter, I have managed to changed the font style on the footnote box by using the attribute style.
      [aside][span style="font-size: 30px;"]Data here[/span][/aside]

      Delete
  20. Any idea why links in pop-up footnotes work on an iPhone but don't on an iPad? So, the following footnote pops up and will display the target in the pop-up note on the iPhone:

    epub:type="footnote" id="fn5">For more on this issue, see Brannigan, _TITLE_. ↩

    But on the iPad the note pops up as expected but when I touch the link, it flashes the target and then the note collapses.

    Any ideas?

    ReplyDelete
    Replies
    1. Sorry, the HTML rendered. Here is the footnote with < and > replaced by _ so it doesn't interpret it as HTML

      _li epub:type="footnote" id="fn5"_
      For more on this issue, see
      _a href="chbiblio.xhtml#absocial"_Brannigan, _cite_Social Basis for Discovery_/cite_
      _/a_.
      _a href="#fnref5"_ ↩_/a_
      _/li_

      A bit of pain to read, but at least you can see it all.
      Thanks for any suggestions.
      Darin

      Delete
  21. "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."

    This was also an issue with something I just did. I tried to have my link inner-wrapped in a span for styling purposes. This disables the pop-up. The solution around this was to add pointer-events: none; to the span, which will allow the click to happen on the a instead of the span.

    ReplyDelete
  22. So has anyone tested this on iBooks for Mac? My tests show that it doesn't work.

    ReplyDelete
  23. @Ian popup notes were not working with the first release but they immediately released a bugfix version (I've installed today) and now it works...

    ReplyDelete
  24. Oh sweet. I'll have to download the update. Thanks!

    ReplyDelete
  25. Is there any way to get rid of the sequential number in the pop up window (or at least make it smaller)? It only shows up in ibooks to my knowledge

    ex:
    ---------------------------------------------
    3

    Footnote text
    --------------------------------------------

    where I'd rather just have

    --------------------------------------------
    Footnote Text
    --------------------------------------------

    ReplyDelete
  26. Liz,
    I want to know about how to reduce space between number and footnote text

    ReplyDelete

More of my books