Sidenotes, Footnotes, Inlinenotes
I have published articles online for over 25 years, across four iterations of what then grew into Entropic Thoughts. In 2017, this site switched from a custom static generator to publishing from Emacs using Org, This change afforded a larger design revision, along with something I had wanted for a while: notes in the margin.
I’ve had some questions on how that works, but they are always low-effort questions where it’s clear nobody has even bothered to right click and inspect element to see what goes on. At that point, I don’t think anything I can say short of intensive personal tutoring is going to help.
But recently someone asked a good question, and that prompted me to write up how it works.
Basic version
The way it worked in the first version was quite simple. Whenever Org tries to insert a footnote reference1 I.e. one of those tiny numbers in the main text, I instructed it to also insert the full footnote content in a span tag with a special class. On wide viewports, this span is styled as a relatively positioned, right-floating block. On narrow viewports, it is not displayed at all. The idea was that readers on narrow viewports likely had less patience for half-relevant remarks, and would prefer quickly going through the main content.
However, there could be a subset of narrow-viewport readers that want the sidenotes as well, so I opted not to disable Org’s default end-of-article footnote generation. These footnotes are hidden on wide viewports and shown on narrow viewports.
In this first version, the footnote reference (on narrow viewports) used the standard Org behaviour of becoming a link to the corresponding anchor in the footnotes, and the reference in the footer was a link back to the main content.
Second version
Then I noticed that Gwern had linked my site as an example of sidenote implementations with no mobile support. This became a badge of shame, so I decided to make the experience better on narrow viewports. It gets a tiny bit more complicated, because I don’t want to require JavaScript to read margin notes on narrow viewports.
Instead of asking Org to dump the footnote contents directly after a footnote reference, Org needs to create three things in succession in the html:
- A footnote reference, that is now a label for
- A checkbox that is never displayed, and
- The footnote content.
Modern browsers do a great thing when you click a label for an input element: they activate that input element. This means you can toggle a checkbox by clicking its label. Since the footnote reference is a label, the corresponding hidden checkbox gets toggled when the footnote reference is clicked.
And guess what? There’s a css selector for a checked checkbox! With a sibling combinator, we can then display the footnote content as a regular (non-floating) block only when that checkbox is checked. This means mobile users can toggle display of the footnote content by clicking the reference, all without JavaScript.
That’s it! That’s the current version of the implementation.