Implementing Sidenotes

Gwern wrote extensively about this in his article Sidenotes for Web Design. I’m rehashing much of what he’s already said here, and explaining my own site’s sidenotes.

Honestly, while writing this, it feels like there are far too many flaws with this method and I should really seek out a new one. I’m recording it here anyway, and will update this post if I change it up.

Requirements

My personal requirements and use cases for sidenotes are:

• HTML flow must make sense – the <aside> element must come after the element it references, not before.
• Preferably: no JS.
• Must work with text (<p>) and images (<figure>)
• Display on right side when space permits; position below the reference paragraph on smaller screens.
• Preferably: as little markup as possible for the writing process.

Not needed at this time:

• Numbering system – I’m not numbering the
• Footnotes – I don’t need to collect all notes at the bottom

Implementation with CSS Grid

I use CSS grid to create columns, and position my asides on the right column.

article {
  display: grid;
  grid-template-columns: 50ch 15ch;
  grid-column-gap: 2em;
}
article > * {
  grid-column: 1 / 2;
}
aside {
  grid-column: 2 / 3;
}

The flaws:

All elements are grid items, and there’s no margin collapse. As a result, my vertical spacing is always really stupid. This is partly because of the lack of margin collapse, but also because my CSS is generally stupid. (Sorry, I’ll get to it.)

Getting the height to work is messy. It spans multiple rows, but you don’t always know how long the reference text next to it will be, or how tall the aside is. Gets tricky if you use images/figures that’ll elongate it. Could add custom class like short-medium-long to designate.

Alternate Implementations

Absolute Positioning

Parametric Press does this. The problem is that it comes before the paragraph that it references, which is semantically confusing. This problem isn’t noticeable when the aside is displayed as an aside, as intended, but when the content stacks on smaller screens, you see the sidenote before the content.

https://parametric.press/issue-01/on-particle-physics/

Float

Same issue as absolute positioning; you have to float the <aside> before the referenced paragraph.