Endnotes/Footnotes/Sidenotes

  • Published:
  • Updated:
  • Popularity: 44 Hearts
  • Editor: Classic
  • View on CodePen

I like being able to add extra information, tangents, or conjecture to my writing, but I don't always wish to clutter or disrupt the main flow of text. Footnotes are great for this, but the typical implementation is less than ideal as it has users jumping all over the page every time they wish to read one. Thus, I have this implementation. Footnotes are marked up as usual, but some JavaScript-based progressive enhancement improves the experience. On horizontally challenged viewports, clicking a footnote will open it in a popover. Otherwise it'll also appear as a sidenote. This overall experience is very much influenced by [Gwern's implementation and research](https://gwern.net/sidenote).