A (terrible?) way to do footnotes in HTML


I've been thinking about better ways to display footnotes in eBooks.

So this is my horrible and hacky way to display inline footnotes in pure HTML and CSS. No Javascript.

Here's how it works:

The most cited work in history, for example, is a 1951 paper
   <details>
      <summary>1</summary> 
      Lowry, O. H., Rosebrough, N. J., Farr, A. L. & Randall, R. J. J. Biol. Chem. 193, 265–275 (1951).
   </details>
describing an assay to determine the amount of protein in a solution.

I've use <details> and <summary> to make a collapsible element.

Tap this to learn more about <details>

This is a magic element! The HTML Details Element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary> element.
Learn more about it on MDN.

The problem here is that <details> is a block level element. By default, starting a <details> element will display on a new line.

It also doesn't look much like a footnote yet.

Luckily, I bodged some CSS together to make it inline:

details, summary {
  display: inline;
  vertical-align: super;
  font-size: 0.75em;
}
summary {
  cursor: pointer;
}
details[open] {
  display: contents;
}
details[open]::before {
  content: " [";
}
details[open]::after {
  content: "]";
}
  • Using display:inline; turns these into inline elements - so a newline isn't started.
  • The alignment and font size make it look like a normal footnote.
  • The cursor: pointer; just makes it slightly easier for mouse users to see that the element is interactive.
  • When the <details> is in the open state, the content will be displayed as a direct descendant of the parent element.
  • Add some square brackets to make it more obvious where the footnote begins and ends.

I could have used the <sup> element to make the whole note superscript. But that produces invalid HTML.

The <details> element can contain any HTML. So I can add a fully semantic citation.

Problems

The "normal" way of doing footnotes in an ePub is to place them at the end of a section. Footnote links like fn1 are just hyperlinks. They take the reader to that section of the document. So eReaders will display the footnote's contents on the same page as the footnote's link:
A very long footnote.

That makes it easy for a reader to search through them all, or just read them in order.

Because my style are inline, that makes it hard to see or search for them.

And because my style are interactive elements, they place a physical burden on the user to interact with them.

The main problem is with the rendering engines used by eReaders. I tried a few, but none of them displayed <details> as an interactive element.

I'd love to know how it renders on Kindle, Kobo, and other eReaders. Here's the HTML of the test if you'd like to experiment with it and send me a screenshot.

<!doctype html>
<html lang="en-gb">
<head><title>Interactive Footnote Test</title>
<style>
details, summary {
  display: inline;
  vertical-align: super;
  font-size: 0.75em;
}
summary {
  cursor: pointer;
}
details[open] {
  display: contents;
}
details[open]::before {
  content: " [";
}
details[open]::after {
  content: "]";
}</style>
</head>
<body>
The most cited work in history, for example, is a 1951 paper<details><summary>1</summary> Lowry, O. H., Rosebrough, N. J., Farr, A. L. & Randall, R. J. J. Biol. Chem. 193, 265–275 (1951).</details> describing an assay to determine the amount of protein in a solution.
<br><br>
Sunlight poured like molten gold<details><summary>2</summary> Not precisely, of course. Trees didn’t burst into flame, people didn’t suddenly become very rich and extremely dead, and the seas didn’t flash into steam. A better simile, in fact, would be ‘not like molten gold.’</details> across the sleeping landscape.
<br><br>
My blog was recently featured in an academic paper<details><summary>3</summary><span itemscope itemtype="http://schema.org/ScholarlyArticle"><span itemprop="citation"><span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><span itemprop="familyName">Eishita</span><span>, </span><span itemprop="givenName">Farjana Z.</span></span></span><span> & </span><span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><span itemprop="familyName">Stanley</span><span>, </span><span itemprop="givenName">Kevin G.</span></span></span><span> & </span><span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><span itemprop="familyName">Esquivel</span><span>, </span><span itemprop="givenName">Alain</span></span></span> <q><cite itemprop="headline">Quantifying the differential impact of sensor noise in augmented reality gaming input</cite></q> <span>(</span><time itemprop="datePublished" datetime="2015">2015</time><span>)</span> <span itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><span itemprop="name">Institute of Electrical and Electronics Engineers (IEEE)</span></span><span>.</span> DOI: <a itemprop="url" href="https://doi.org/10.1109/gem.2015.7377202">https://doi.org/10.1109/gem.2015.7377202</a></span></span></details> which pleased me greatly.
</body>
</html>

Share this post on…

13 thoughts on “A (terrible?) way to do footnotes in HTML”

  1. Nathanael M. says:

    Your use of Terry Pratchett as an example immediately has me on your side.

    Reply
  2. Eric says:

    @Craig I like the gentle box you gave the text, but it introduces word-wrap jank, especially if you are on a small/mobile screen.

    Reply
      1. Same height as any other link, but typically a very narrow width when it’s just a single digit. These will be tricky for some users to operate easily. Zoom gestures can mitigate this, assuming the web page hasn’t suppressed these.

        Also note: the Web Content Accessibility Guidelines has success criteria for link target size. Links which are “inside a sentence or block of text” qualify for an exception to Target Size (WCAG 2.1) and Pointer Target Spacing (WCAG 2.2, forthcoming). The commentary in Understanding WCAG elaborates that footnote links are considered part of a sentence, so they qualify for that exception.

        Reply
  3. Luc Lamote says:

    I like this way to code footnotes (since its the only one that works on my ipad. The normal way to use footnotes i.e. at the end of a text does not work properly on the ipad; the going is fine but the return to the point in the text does not work).
    However I am working on a book with footnotes and endnotes and I want the backgrounds of the endnotes to be different from the footnotes. I have tried several ways to achieve this but in vain.
    Is it at all possible to have the backgrounds of footnotes and endnotes in a different color?

    Reply

Trackbacks and Pingbacks

  1. […] nerd and technology enthusiast" Terrence Eden proposed to use details in a blog post titled A (terrible?) way to do footnotes in HTML. Next, Peter-Paul Koch, web developer, consultant, and trainer, runs a side project named The […]

What links here from around this blog?

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">