Super Simple Sidenotes

I never bothered to document how I do sidenotes because they’re basically a simplified version of other implementations. But several people have asked about them, so in the spirit of sharing, here are my Super Simple Sidenotes. No javascript, just html and css.

To figure these out, I referred to Gwern’s roundup of ways others had implemented sidenotes. I don’t recall exactly which implementation I adapted, but I believe mine are most similar to Matthew Buttrick’s, displayed on the right instead of the left.

My use case

I use asides for added commentary, not for references. They are often “color text” that in a formal piece of writing would absolutely get cut, but that allow me to express more personality without (overly) disrupting the writing. They’re often the kind of thing I’d lean over and whisper (I’m terrible to watch movies with 😅). Sometimes I use them for caveats or acknowledgments that I’m leaving something out. Basically, my sidenotes don’t demand rigor like an academic’s.

How my sidenotes work

• They always display — no clicking required
• They display in the right margin on desktop and inline on mobile / smaller screens
• They are their own block element — an aside — rather than marked up text inside a paragraph
• No links are involved, just the power of the reader’s cognition and cultural knowledge that the asterisk symbol indicates there is a note with more info somewhere

It’s just text, visually rendered in a way that denotes its superfluity to the main argument. I use semantic markup <aside> rather than purely decorative <span>. (ADDED 2/4: see Evan’s comment with some suggestions for markup that might be a better choice than <aside>!)

CSS

I added this code to the whole site in WordPress under “Customize” > “Additional CSS”.

The following lines style the sidenotes themselves. I’ve set them up with a semi-transparent background with rounded corners. The only thing you really need here is the display.

.sidenote {background: rgba(255, 255, 255, 0.25);
padding:0.5em 0.75em;
border-radius:9px;
font-size: 85%;
color: #6d6d6d;
list-style-type: none;
display: block;
}

Default lists are indented on my site, so this removes indentation of bullets inside of a sidenote (since they’re pretty skinny):

.sidenote ul {margin-left:0;margin-bottom:2rem;}

These lines apply a size to the sidenotes — I used existing media breakpoints from my theme — you do need to define a width:

@media all and (min-width:1250px) {
.sidenote {width:15em !important;}
}

@media all and (min-width:1000px) and (max-width:1249px) {
.sidenote {width:10em !important;}
}

These next lines position the sidenotes — the precise placement would depend on your layout*. The second line (li > aside.sidenote) controls the positioning of sidenotes within bullet points:

@media all and (min-width:1000px) {
.sidenote {position:absolute;
margin:-5em 0 0 calc(50% + 31rem) !important;
}
li > aside.sidenote {
margin:-5em 0 0 32em !important;
}
}

I set a negative top margin so the aside block would be pulled slightly higher alongside the paragraph above it. I needed the !important tag to override defaults in my theme.

@media all and (max-width:999px) {
.sidenote {
float: inherit;
position: inherit;
top:0;
width: calc(100%-4rem) !important;}
}

HTML

I insert sidenotes into a post by manually wrapping text in <aside class="sidenote"> </aside>. I use WordPress’s classic code editor, so I’m not sure exactly how this works in the block editor. I believe this could be turned into a shortcode like [sidenote], I haven’t bothered though.

If you don’t use asides anywhere else on your site, I think you could just style all asides that way so you don’t have to specify a class each time. I have multiple aside styles, so I can’t get away with that.

Considerations

Asides break paragraphs on mobile so must be inserted after a line break (not mid-paragraph). Since I prefer short paragraphs for readability, I’m fine with that tradeoff. I’ll use an asterisk to mark the reference point within a paragraph if needed. I think this wouldn’t be an issue if I had used spans instead of asides?

These are super simple, so they are not “smart” — if you put two sidenotes too close together, they will overlap on desktop*. My solution? Edit the text till they don’t, or combine multiple sidenotes into one <aside>, indicating the split with one * and two ** asterisk markers. This is a little sloppy but readers are smart, they’ll figure it out 🤷‍♀️ I am more writer than coder, so I’d rather keep it simple and flex my writing muscles to fix any issues from “dumb” layout elements.