Of Note: Better Text Annotations for the Web

Image from www.viget.com on 2020-12-27 at 5.07.08 PM.gif

Generally speaking (and ignoring questions of styling, API availability, etc.), an ideal Web annotation pattern follows these principles:

  1. Annotations appear in close visual proximity to the primary content.
  2. Their design neither distracts from nor hides the primary content.
  3. The preceding principles are followed regardless of screen width.

The only pattern I’ve found that meets these criteria is FiveThirtyEight’s.

...As it turns out, FiveThirtyEight didn't invent this pattern. It likely originated in medieval illuminated manuscripts which contain “interleave notes” — comments written literally between the lines.