Just my personal feedback: the footnotes are at the bottom where my thumb also is. Trying to scroll the page leads to scrolling the footnotes instead and I have to move my thumb higher up which is unintuitive. It would perhaps be nicer if the footnotes were in an expandable drawer that doesn’t constantly interfere with the scrolling.
I don’t think I have seen this pattern elsewhere on narrow screens. They really are “footnotes!” Myself, I have recently switched to CSS anchor positioning to have margin notes falling back below the current paragraph if the viewport is not wide enough.
Could you give me a short example how you do it? Do you hand-roll your blog or is the SSG you use that extensible? I’ve read many fun tricks over the years, but most blogging engines feel like they have a fairly narrow idea what a blog post should be and don’t really allow for arbitrary extensions…
I am using a fork of Hyde (it’s an unmaintained SSG written in Python). The markdown is generated by Python-Markdown and I am post-processing the generated HTML to change the markup used for footnotes to be able to turn them into sidenotes. Likely, I could also have written/overloaded a specific extension for Python-Markdown.
One day, I’ll rewrite all this from scratch to not depend on a specific blog engine, but for now, I live with this hacky setup. Depending on what I need, I either patch Hyde, extend it with a plugin, add a plugin for Pygments, shell-out to Node.JS (notably for CSS stuff, with PostCSS to downgrade CSS files), or add a post-build step (image minification, cache busting). It’s still quite flexible and fast enough (about 30s), even if it’s not pretty.
Agreed! I wrote a blog post about this.
https://basis.kobes.ca/20260726-doing-footnotes-wrong/
score 2 · canonical
Just my personal feedback: the footnotes are at the bottom where my thumb also is. Trying to scroll the page leads to scrolling the footnotes instead and I have to move my thumb higher up which is unintuitive. It would perhaps be nicer if the footnotes were in an expandable drawer that doesn’t constantly interfere with the scrolling.
score 1 · canonical
I don’t think I have seen this pattern elsewhere on narrow screens. They really are “footnotes!” Myself, I have recently switched to CSS anchor positioning to have margin notes falling back below the current paragraph if the viewport is not wide enough.
score 2 · canonical
Could you give me a short example how you do it? Do you hand-roll your blog or is the SSG you use that extensible? I’ve read many fun tricks over the years, but most blogging engines feel like they have a fairly narrow idea what a blog post should be and don’t really allow for arbitrary extensions…
score 1 · canonical
I am using a fork of Hyde (it’s an unmaintained SSG written in Python). The markdown is generated by Python-Markdown and I am post-processing the generated HTML to change the markup used for footnotes to be able to turn them into sidenotes. Likely, I could also have written/overloaded a specific extension for Python-Markdown.
One day, I’ll rewrite all this from scratch to not depend on a specific blog engine, but for now, I live with this hacky setup. Depending on what I need, I either patch Hyde, extend it with a plugin, add a plugin for Pygments, shell-out to Node.JS (notably for CSS stuff, with PostCSS to downgrade CSS files), or add a post-build step (image minification, cache busting). It’s still quite flexible and fast enough (about 30s), even if it’s not pretty.
score 1 · canonical