Long-time readers will notice something different about the footnotes¹ in this post. If you’re reading this in fullscreen on a PC, you should see footnotes pop up on the left-hand side of the main text when you click on their references. If you’re reading this in a smaller window, or on mobile, they should appear directly in the text body. Clicking on the reference again will hide the footnote preview. Only one preview will show on the page at a time.

Footnotes still appear at the bottom of each post. To return to the old behaviour, where clicking a reference jumped you to the bottom of the post, you can disable JavaScript.

Jumping up and down a webpage to read footnotes is not the greatest experience, even when the requisite anchor links are provided. So this is something I’ve wanted to do for a while and toyed with in a few different incarnations, but I’ve only just come up with a solution I find acceptable. For a long time, I was hesitant to implement anything like this as it would require JavaScript, and I was rather happy that this website used essentially no JavaScript. But in light of the Vue-powered webmention support I added last year, that ship has sailed. Far out to sea. Never to return.

Still, I wanted a solution that didn’t render my footnotes unviewable for people with JS disabled, or those using a feed reader or some other thing. So I needed something that would gracefully degrade under those conditions.

I also wanted something that would be responsive. Sidenotes are cool on pages you’ve given your whole screen to, but they don’t work at all on narrow mobile screens. The same is true of tooltips and pop-ups, which can work on mobile, but you have to go through a lot of effort to get it right², and in any case I don’t feel like that style of preview would gel with the general appearance of this site.

I considered converting my footnotes wholesale to sidenotes that fold into the page at narrower widths, ala Game Programming Patterns. But even though this would have achieved my goals above with the added benefit of not requiring any JavaScript, there’s something about a page full of sidenotes that makes me instantly mentally exhausted (cf. Gwern³). I’d rather they were hidden at first.

Finally, I didn’t want a solution that required me to rework every footnote in every post into a Hugo shortcode, which was another point against moving to sidenotes. Hugo’s markdown processing is pretty rigid with how it processes footnotes⁴, so I had to do some hacky things with JavaScript to get this to work. It’s not great code, and has some janky behaviour that I need to clean up, but it seems to work for the most part. One issue I ran into was that sidenotes in the left margin don’t play well with images in the left margin (e.g. here), so I gave myself the option to configure which margin to use on a per-post basis, with left being the default.

This is obviously a very new feature, and I haven’t tested every footnote on every page, so there are probably some bugs here and there. If you notice anything like that, or have any suggestions for improvement, please let me know via webmention, email, Twitter, or whatever else.

Happy new year!

Postscript (2022-02-24)

I had a request to share the source code for this feature, so I’ve made it available in the gist below: