Coding in Paradise

You're Doing Web & eBook Footnotes Wrong

The Problem

Most web pages that have footnotes blindly mimic paper and put them at the bottom of the page, jumping the user to the footnote when clicked on:

Picking on Paul Graham's footnotes

This is silly for many reasons. First, computer screens aren't paper; they can easily accordion open and show extra information based on user intent. Second, they cause a user to lose context while reading an article, forcing them to jump away from what they are doing; this is annoying.

Finally, and this is the most damning, they don't actually work correctly on many mobile devices. If you click on a footnote anchor, read it, then click back, most mobile browsers will incorrectly jump you back to the complete top of the page, not where you were reading before. This makes footnotes essentially impossible to use on mobile web browsers; you don't want to take the cost of clicking them since you will completely lose your position when you try to go back to reading the main article or story.

Web footnotes at the bottom of a page are completely broken on mobile browsers, like Mobile Safari on the iPad. In the video above, we scroll down to a footnote, click it, then hit the back button. Notice that we are popped back up to the top of the page incorrectly.

The Solution

So how should footnotes work on the web and eBooks? They should popup immediately next to where you are reading, so that you won't lose context or run into any of these problems. For example, click the star next to this paragraph to see how footnotes should work*.

Both Inkling and iBooks do the right thing for their footnotes, popping footnotes up in context. The Kindle doesn't, jumping you out of context of what you are reading, which is difficult when dealing with a footnote heavy work. After awhile you just give up and stop clicking them on that platform.

Viewing Herodotus on the Kindle, at the bottom of the page is a footnote. Clicking it jumps you to the back of the book. Now that you're there, how do you get back to the page you were reading?*

How do you get these kinds of footnotes yourself? The easiest solution is to use bigfoot.js, an excellent open source library that will add contextual footnotes to your web page. You can also use Inkling Habitat to author footnotes that will contextually appear in eBooks published on Inkling or exported to ePub 3; iBooks will display contextual footnotes for ePub 3 footnotes as well.

Subscribe to my RSS feed and follow me on Twitter to stay up to date on new posts.

Please note that this is my personal blog — the views expressed on these pages are mine alone and not those of my employer.