December 17, 2020

Filtered for... margin notes

Margin notes, in-line comments and more.

I’ve been thinking a lot about margin notes recently1.

For a few years now I’ve had hypothesis installed on my site (try it, just highlight any text and tap “annotate”!). It’s kind of like Google Docs in-line comments but for the web. The UX is a little clunky - especially on mobile and I get very few comments that way but I always enjoy them when I do.


How do we bring this level of interactivity to the web? Comments at the end of the page feel stale and web 1.0. How do we bring in-line, interactive comments to the web?

I also use side-notes2 for call-outs and, mostly, snark. They’re inspired by Tufte CSS and I write them in pure markdown by using footnotes and then rendering them in JS on the page as side-notes.

Read more about that tech here a new simpler approach to margin notes.

Then I found this 8,000 word monster3 from Gwern all about sidenotes on the web, with various technological solutions outlined which is just a stunning tour de force:

Sidenotes In Web Design

In typography/design, ‘sidenotes’ place footnotes/endnotes in the margins for easier reading. I discuss design choices, HTML implementations and their pros/cons.

And then I saw this - wonderful, weird, basically un-usable whismy floating glowing side notes:

Where am I going with this? I’m not sure. Marginalia and commenting has been tried a million different ways on the web but I’m still not convinced that we’ve cracked it. Who’s doing interesting things in this space?

  1. Yes, like this! 

  2. Like this! Hi again. 

  3. 😱 

More blog posts:

A Lil' Website Refresh

March 20, 2024

Work is a Place

March 6, 2024

This post was written by Tom Critchlow - blogger and independent consultant. Subscribe to join my occassional newsletter: