Best Practices for Ebook Back Matter: Footnotes and Endnotes

Expert publishing blog opinions are solely those of the blogger and not necessarily endorsed by DBW.

Best Practices for Ebook Back Matter: Footnotes and EndnotesIn previous posts we have been discussing the important parts of the front matter of an ebook. Now we will switch to discussing the back matter, starting with the topic of footnotes and endnotes.

Note: As is my standard practice, the markup examples below are all suitable for EPUB 3 files. If you are still creating an EPUB 2 file for some reason, your mileage may vary. Also, note that I will often use the term “footnote” in this article as a generic term to refer to both footnotes and endnotes.

Footnotes are an important part of non-fiction writing. They allow authors to cite sources, refer to more information on a topic, and provide extended comments without cluttering up the main body of the text.

One of the great benefits of ebooks over print books is the ability to include much more content due to the lack of physical size restrictions and print costs. And footnotes are often a logical place to add this extra content.

Additionally, ebooks provide some foundational linking functions that make footnotes easier to read. If you have ever read a print book with one finger permanently stuck in the endnotes section at the back of the book for quick access to the notes, then you know what I mean.

The core markup for a footnote in an EPUB file just involves linking the note reference to the note text. This is done with an anchor tag, like this:

… and our country by force of arms.&#x201D;<a href=”#note1″>1</a>

<p id=”note1″><cite>Circular of the Committee of Safety at San Felipe</cite>,…</p>

This markup is further enhanced by adding a link in the note back to the reference so that readers can easily get back to where they came from in the book:

… and our country by force of arms.&#x201D;<a href=”#note1″ id=”noteref1″>1</a>

<p id=”note1″><a href=”#noteref1″>1.</a> <cite>Circular of the Committee of Safety at San Felipe</cite>,…</p>

Adding semantic markup is also helpful. In this case, we will wrap the footnote in an <aside> tag, showing that the contents are not part of the regular flow of the chapter. We will also move the id for the note into the <aside> tag so that it is on the new parent element.

<aside id=”note1″>

<p><a href=”#noteref1″>1.</a> <cite>Circular of the Committee of Safety at San Felipe</cite>,…</p>

</aside>

With proper HTML semantics in place, we can also add semantic inflection (with epub:type attributes) for even more complete semantic markup and accessibility. In the anchor surrounding the note reference, we use epub:type="noteref". In the <aside> tag, we can use either epub:type="footnote" or epub:type="rearnote", depending on what type of note it is.

… and our country by force of arms.&#x201D;<a href=”#note1″ id=”noteref1″ epub:type=”noteref”>1</a>

<aside id=”note1 epub:type=”footnote”>

<p><a href=”#noteref1″>1.</a> <cite>Circular of the Committee of Safety at San Felipe</cite>,…</p>

</aside>

A Note About Apple iBooks

As many of you probably know, iBooks has the ability to display footnotes in a pop-up window, as shown in the screenshot below.

Footnotes

However, it is important to note a few rules that you must follow for this feature to work:

  1. The note reference anchor tag must contain the epub:type="noteref" attribute.
  2. Each note must be in its own <aside> tag.
  3. The aside tag must have the epub:type="footnote" attribute. If you use the "rearnote" value, then the pop-up will not work.
  4. With this code in place, iBooks will display the footnote in the pop-up window and remove it from display in the text of the book.
  5. Note that there is no setting you can use as the ebook creator to turn off this function, and there is also no setting available to the reader. The only way to have standard linking footnotes instead of pop-ups is to not apply the epub:type attributes.

Another important point to remember is that pop-up footnotes make it harder for readers to see previous notes easily (they have to search around for the last note reference number and click/tap on it to see the note). As a result, you might find it helpful to expand your footnotes to cite the entire referenced work instead of using “ibid.” and similar references.

CSS Options

As you probably noticed in the example code above, the note reference is not being wrapped in <sup> tags for superscripting. While it has been the common markup among developers for many years, it is important to note that the <sup> tag has semantic meaning and does not apply to footnote references. The best approach is to wrap the reference number in the <a> tag, apply a class name to it, and assign CSS in your stylesheet to make the text look the way you want.

As a starting point, you could do something like this:

… and our country by force of arms.&#x201D;<a href=”#note1″ id=”noteref1″ epub:type=”noteref” class=”noteref”>1</a>

———————-

.noteref {

vertical-align: superscript;

font-size: 0.8em;

}

I have updated The Book of Texas sample file to include a footnote (see Part 1, Chapter 2), as well as to add a few other accessibility functions and fix a few bugs. You can download the latest EPUB in the Github repository.

In my next installment, we will talk about indexes. If you have a suggestion for a topic you’d like me to cover—anything related to ebooks or metadata—please post a comment below.


To get all the ebook and digital publishing news you need every day in your inbox at 8:00 AM, sign up for the DBW Daily today!

20 thoughts on “Best Practices for Ebook Back Matter: Footnotes and Endnotes

  1. Ellen

    Joshua,

    Our experience in the past has been that Apple’s pop-ups are not accessible to it’s VoiceOver screen reader. Are you aware of whether that has changed?

    Reply
    1. Joshua Tallent

      That’s a good question. I had not heard that before, but it does not surprise me much. It is also frustrating, since the whole point of semantic inflection is to add MORE accessibility to a file. I’d recommend you bring it up with Apple.

      Reply
    2. Greg Stuckley

      After many tests and reading numerous articles, I am moving back to much simplier markup. The reason why is that I know that VoiceOver and other screenreading software will work. In addition, I recommend not utilizing advanced markup as many readers are moving to open source or free reading apps for Android that do not support this kind of coding.

      Reply
  2. jcrawford

    Thank you in advance for tackling epub indexes. I know that epub glossaries have limited value in most cases, but I’d be interested if you have any suggestions for implementing a linkable glossary or internal dictionary.

    Reply
  3. Jim Edwards

    And .mobi files?
    I was under the impression that ,mobi files don’t support endnotes/footnotes, which I find desperately frustrating.

    Can one embed things in the html code that will create them? That really would be so helpful.
    Jim

    Reply
    1. Joshua Tallent

      Jim, there has always been some level of support for footnotes in the Kindle format, even the older Mobi7 format. If you follow the instructions here and create a valid EPUB source file with the correct linking between the reference number and the note, then that linking will translate perfectly well into KF8. That should also be all you need to do to have them function as pop-up footnotes on the Kindle devices that support that feature.

      Reply
  4. Michael W. Perry

    Any way to change that gosh-awful footnote display in iBooks? It may look “pretty,” but for readers wanting to actually read the footnote rather than look at a pointlessly oversized footnote number, there is a lot of wasted whitespace that force users to scroll down to read more than a few lines of the text.

    It’s an irritatingly bad design.

    Reply
    1. John

      There is no way since it is part of the template they are using in iBooks.app—and they call that “footnote title”. If you link a word or a sentence, the word/sentence will be displayed instead for instance.

      Reply
  5. Hannah

    Joshua – for another topic, can you discuss the most up to date best practices for creating an index in an EPUB file parallel to creating a print index? Thank you!!!

    Reply
  6. pablo nolla

    Hi!

    may be you could help me with this… it’s turning me crazy.
    Is there any way to make the new versions of iBooks to honour the color:black; rule in <a href 's???

    there must be a way… doing an ePub3 with iBooks Author you could change the default blue to something else, applaying letter style to the text of the reference/link
    but i can't find the way to do it on a regular ePub3 i create.

    thank you!!!

    p

    Reply
  7. Joshua Tallent

    Pablo,

    In order for iBooks to recognize the color on your anchor tags you must include the [meta property=\ibooks:specified-fonts\]true[/meta] tag (using angle brackets, of course) in your OPF metadata section.

    Joshua

    Reply
  8. Aaron Troia

    Testing this out on the Paperwhite with the most recent Kindle update, and we now have some pop up KFX style footnotes at the bottom of the screen. I need to test out formatting, as mine start almost in the middle of the screen for some reason and look rather horrible. Seems these might also be limited to e-ink(?) as there are still no pop up footnotes on the HDX.

    Reply
  9. Aaron Troia

    So I did some testing and I tried everything from this best practice example for ePub3 to completely removing the aside tag and putting the id and epub:type into the p tag. What I found was that having the id inside the aside tag causes formatting issues for the Kindle paperwhite popup footnotes window. All the footnotes I tested looked really bad with the id inside the aside tag, but once I moved it to the inner p tag, the issue was fixed and the footnotes looked normal. Anyway I know this might not be a best practice but its been driving me crazy and wanted to figure out what was causing it. If anyone has come up with a different conclusion to the cause of this, I would love to hear it.

    Reply
    1. Joshua Tallent

      Aaron,

      This is probably due to how Amazon is pulling in the content to the pop-up. I wonder what would happen if you had the footnote inside a div instead of an aside, or a div nested inside the aside.

      Reply
      1. Aaron Troia

        I was guessing that was probably the reason. Ill have to test that div idea, I didnt think to try using div’s.

        Reply
  10. Tim

    Hi Joshua,

    Thanks for another great article.
    Just a little typo – very near the end, in the css example – vertical-align needs super, not superscript.

    Reply

COMMENT

Your email address will not be published. Required fields are marked *

*