Tech Note: Sidenotes
6 points by fcbsd
6 points by fcbsd
I did this in the most cursed way possible on my blog, e.g. https://isaac.sh/daily/2026-02-02/
Essentially, each sidenote aside is an inline <span class=aside> node. Using media queries, on mobile, these notes are rendered as inline parentheticals; on desktop, I use some cursed-but-reliable CSS to float the span as an aisde:
.aside {
position: relative;
float: right;
clear: right;
width: calc(250px - 20pt);
margin-right: -250px;
margin-left: 20pt;
/* ... some typography stuff */
}
I wanted my asides to look like those on Bob Nystrom's website, but without JS, and this was the closest I got. My ideal solution would be for the asides to be aligned properly in the gutter on desktop as they are now, but to appear after the paragraph on mobile. Unfortunately, I'm not aware of any way to do this, hence the parentheticals. (I suppose I could duplicate each aside, and selectively display them, but that feels easy to mess up from an authoring perspective. I use Zola fwiw, so maybe there's something clever I could do at build-time. I haven't had a ton ton of time to spend on this.) If you know a way, please let me know! I'll def write a blog post about it :P
My implementaiton is similarly inspired by Bob Bystrom's book (without JS), and achives the effect you want. You can see its effect at, e.g. https://lesleylai.info/en/fifty_shades_of_oop/ .
I use a standalone <aside> element at the end of the paragraph, and manually adjust each sidenote's position on desktop via inline style (see my reply above). I may experiment with CSS anchor positioning in the future.
Oh this is very cool! I see your blog has public source available so I'll take a look at the code. I'm trying to avoid manual positioning but alas I don't think I can have my cake and eat it too...
Also, I'm glad you like the front page! I put a lot of work into it. :)
Sidenote/margin note is pretty lovely. I use it for digression rather than as a replacement for a footnote. Though a downside is that I tend to ramble too much in it.
I am currently setting their position via ad hoc inline styling (something like style="margin-top: -5rem" where margin-top is different for each margin note). Maybe I will change it to use anchor positioning.