Long-time readers will notice something different about the footnotes1 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.
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 right2, and in any case I don’t feel like that style of preview would gel with the general appearance of this site.
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!
I had a request to share the source code for this feature, so I’ve made it available in the gist below:
Browser-native tooltips are technically useable for this without much effort, but those can’t have clickable links or formatting inside, and also suck on mobile. ↩︎
An excellent, informative website that’s had a lot of thought put into it and is in many ways beautifully designed, but that nonetheless sometimes makes me feel as though spiders are crawling into my eyes. ↩︎
There was a proposal to use Markdown render hooks to make this behaviour more flexible, but it was rejected out of speed concerns. ↩︎