What is a sidenote11Simplest answer, it's one of these.? The most thorough discussion of sidenotes and their use on the web can be found at gwern.net, and here's a pithy abstract:
Sidenotes & margin notes are a typographic convention which improves on footnotes & endnotes by instead putting the notes in the page margin to let the reader instantly read them without needing to refer back and forth to the end of the document (endnotes) or successive pages (footnotes spilling over).
They are particularly useful for web pages, where ‘footnotes’ are de facto endnotes, and clicking back and forth to endnotes is a pain for readers. (Footnote variants, like “floating footnotes” which pop up on mouse hover, reduce the reader’s effort but don’t eliminate it.)
However, they are not commonly used, perhaps because web browsers until relatively recently made it hard to implement sidenotes easily & reliably. has popularized the idea and since then, there has been a proliferation of slightly variant approaches. I review some of the available implementations.
That about sums it up, but you can read on at the link for further discussion of the utility and reliability of various approaches, both in print and online. In fact I recommend that you do, it's very well written and informative.
But why am I talking about them? Well, the Ministry of Minor Perfidy's Bureau of Retributive Software Development has caused to be created a Drupal implementation of sidenotes. You can find the project here, and install it on your own site22provided your site is powered by Drupal, of course, thanks to the wonders of the open source and internet generally. This module is, as you'd expect of a Drupal module, completely free to use.
This is something that I've wanted to have for years and years. This sort of functionality really fits both the style of writing33when that writing actually happens, admittedly a serious issue here. and website design that we have at perfidy. But constraints - time, skill, and laziness being primary - kept my own personal sidenotes project uncomfortably in the future. The advent of AI44so called, or at least large language models with some facility at coding, broke through those constraints and I was able to 'develop' a working sidenotes module in an afternoon.
Perfidy's sidenotes has a number of cool features55at least, I think they're cool, your mileage may vary.:
-
Sidenotes can be typed right were you want the note to be placed, wrapped in double parentheses. A text filter converts them into the notes you see here.
-
Notes can display to either the right or left of the body text66This applies to all notes on the site, it can't be changed on a per-note basis. Though now that I think on it, maybe that's a feature I could add.
-
Notes stack - if you have a lot of notes in a paragraph, they won't overlap77Nor will they overlap with notes in subsequent paragraphs..
-
Responsive notes: on small displays like phones, notes collapse from the side to immediately after the paragraph they're in.
-
Styling hooks are available for easy theming.
-
Minimal js to handle endnotes on mobile, and reflow when the window is resized.
-
Label styles include numbers881, 2, 3, etc., symbols††*, †, ††, §, ¶, ‖, Δ, ◊, ☞, no label✶like this one, and custom✶[wik] like perfidy's trademark endnotes from the old days.
-
Note labels can be overridden on a per note basis, and don't increment numbering of the other notes99like we did in the notes in the previous paragraph..
-
And I just now discovered1010Though it makes sense that it would, as long as the text filter is applied. that you can also use sidenotes in comments.
You can even drop images and tables in an endnote, and any normal text formatting. You'd likely want to be careful on the sizes of these things, but a nifty bonus feature. Sidenotes is compatible with the CKEditor wysiwyg that you most commonly find on Drupal sites.
So there it is, The Ministry of Minor Perfidy's custom Drupal sidenotes implementation. Enjoy!