You’re all doing footnotes wrong
Jul 26, 2026
The blog has a new look powered by new technology. This was a chance for me to build a feature I’ve been dreaming about: independently scrollable footnotes.[1]
On paper, a footnote appears on the same page as the indicator that refers you to it, so it’s pretty efficient for your eyes to make a brief detour into the footnote at the time it is relevant, then bounce back up to the main text without breaking your concentration.
For unfathomable reasons, some books use endnotes instead of footnotes, which send you on a tedious page-flipping venture to the back of the book. As a reader, I find endnotes rage-inducing. I either use post-it notes to keep track of my progress in two parallel locations, or adopt what is probably the more common strategy of ignoring them entirely.[2]
On the internet, most publishers render footnotes like endnotes — at the bottom of everything, making you scroll back and forth a lot. If you’re lucky, there are links that teleport you to and from the footnote when you click on them, but those jumps that scroll the whole page are still jarring and distracting, especially if they use animation. What I really want is to see both the footnote and the context associated with it at the same time![3]
We can do better. This blog now achieves all of my footnote presentation goals:
- You can read the main text and the footnotes together, without any clicking. Just scroll each of them as you go.
- If you click a footnote indicator, it highlights the footnote, but it doesn’t scroll the main text, so you don’t lose your place there.
- It adapts to varied screen sizes, like phones, tablets, and desktop or laptop browsers. If the window is wide enough, the footnotes appear on the side instead of the bottom.
And most of this can be achieved without any JavaScript code,[4] so the blog loads quickly and requires very little computing power.
Most bloggers haven’t paid much attention to footnote craftsmanship, and might be surprised at how much better the user experience could be.
And now, back to your regularly scheduled tax commentary…
Appendix: Blog Technical Notes
You might enjoy this section if you’re interested in software engineering and blog technology. If not, you can skip it.
- This blog was originally made in WordPress, but I migrated it to a static site generator (SSG) architecture. I’ve now cancelled my WordPress hosting account, which was costing me a few dollars a month.
- I can now compose blog posts in Obsidian, which is convenient, because that’s also where I take notes on my research.
- A tool called Eleventy takes my Obsidian files and processes them into HTML with the help of plugins like
markdown-it-footnote.[5] - The page layout, including the footnotes, is achieved with fairly basic CSS features:
overflowto create a scrollable region,:targetandscroll-marginfor highlight rings, and media queries for responsive layout.[6] - The font you are reading is Equity by Matthew Butterick.[7]
- The results are then compressed by the Vite bundler and deployed as static assets to Cloudflare’s content delivery network (CDN).
This pipeline gives me a convenient workflow, a ton of customizability, and world-class performance[8] using entirely free tools and services.
One thing I lost by leaving WordPress was the option for readers to leave public comments on blog posts. But this feature was almost never used, except by spammers, so I’ve decided to live without it.[9]