Footnotes as inline sidenotes

A plugin which formats footnotes at the side eg


from The Finest Narrative Non-Fiction Essays (maggieappleton.com) , inspired by Tufte CSS (edwardtufte.github.io) . This would improve the legibility of footnotes by a lot, and would make them a lot easier to use.

Implementation could be in reading and / or editing mode, but although it has been implemented in css snippets, they tend to focus on callouts, which don’t provide the same aesthetic.

Thanks!

2 Likes

Sidenotes In Web Design · Gwern.net is also interesting, but the key thing is numbered footnotes, instead of just having comments on the side - callouts and html have much more complicated syntax, and are much harder to easily put in the middle of a paragraph.
A further development to this feature could be having them collapsible when clicked, ie the content comes into the paragraph, from the side, and embeds itself - like the example from before:

Have a look at this thread Footnotes as Sidenotes - #12 by ArloZ - does what you want with a bit of CSS. Has overlap issues if the footnote has a link in it AND text, both otherwise works perfectly. Looks like this for me (I’ve made some style tweaks to match my theme setup - I’m using Minimal):

My snippet file (lightly tweaked from the above thread):
tweak-content-sidenotes.css (1.3 KB)

1 Like

Would there be a way to display the number for the footnote eg [^1] shows a footnote in the right margin labelled 1) …

I don’t think so, not with just pure CSS. The actual footnote content in that case is at the bottom of the note, not inline with the footnote marker. Saying that, I’m not a CSS expert by any stretch, so someone else may have a solution for you.

I’m curious and going to ask though, why do you want/need the number present? The sidenote is present beside the content it refers to, so there’s no requirement for a number?

If there are multiple footnotes densely packed, including the number would make it easier to see at a glance which was which.

It might be handy if someone made a plugin to show the footnotes alongside the text in the right sidebar. That could allow for a way to more elegantly handle long notes densely packed—say, by collapsing them each to a couple lines that could be expanded, which would push them from their aligned locations but let you read them all at once. Maybe lines could link them to the spot on the margin aligned with the note’s callout (kinda like the old Microsoft Word comments).

At times like this I wish I knew how to make plugins!