Footnotes are a nuisance. If you notice one of those little superscript numbers in a text, you have to decide whether whatever the author has to say that didn't make it into the main text is worth interrupting your flow. You could ignore it, but maybe you miss out on something interesting. So you abandon the sentence you're reading and look for the damn footnote. After you found and read it, you're searching for the place where you left off and struggle to remember what the last sentence was about. Of course you have to reread the sentence.
An elegant solution to the problem are sidenotes. Unfortunately, they are almost impossible to get right for all screen sizes and devices without a CSS or Javascript framework, or without writing a lot of custom code. Since I'm writing plain HTML and I want to keep it simple, this is not an option for me. Some people have experimented with HTML's details and ruby elements, but I don't like that the text jumps around when you open them and the details element auto-closes the paragraph. Still, I like writing little asides, so I keep using those annoying footnotes, but make them a bit more tolerable.1
My footnotes are bidirectional links. The markup for the reference in the text above looks like this:
<sup><a id="fn-1" href="#1">1</a></sup>
<p class="footnote">
<sup><a id="1" href="#fn-1">1</a></sup>
This is an example footnote...
If the distance between a footnote and its reference in the text is short, there might not be any jump if you click on the superscript number. Then it seems like the link doesn't do anything and the reader has to scan the page to find the position. For these cases, I added a little bit of CSS that highlights the target superscript number.
:target {
color: red;
}
If you know of a better solution that is as simple, please let me know.
1 This is an example footnote. Click on the number to jump back to where it's referenced in the text.