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:
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>
Have you followed the recent extensive web footnotes saga on Quirksmode?
A promising idea.
A (terrible?) way to do footnotes in HTML
L: shkspr.mobi/blog/2020/12/a…
C: news.ycombinator.com/item?id=253578…
Your use of Terry Pratchett as an example immediately has me on your side.
What a great idea!
I hacked the CSS a bit to make it a bit more visually appealing.
https://codepen.io/craigshoemaker/pen/YzGpWNz
@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.
Doesn't seem like a control that plays well with fingers.
It is exactly the same touch-target size as a regular hyperlink.
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.
This Article was mentioned on ruanyifeng.com
This Article was mentioned on css-tricks.com
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?