I hope this is not too much to ask [others to code for me], as it might be useful for everyone.
On desktop, the markdown cells leave a comfortable space of margin on the right. I think it would be a good place for traditional footnotes (for example, reference to a paper or link). I’d like it to be ${tex``} compatible.
With mobile access, maybe display it at the bottom of the cell? More fancy UX would be display “in place” upon a tap.
Apologies if this has been suggested, or already implemented!
Here’s a start:
You use it like this:
wrapper`
Markdown goes here
Some words ${extract`Note goes here`} more words
`
Open to ideas for better names for wrapper and abstract. Also, no mobile support yet.
Thank you! Looks really good.
It should be noted that many Markdown flavours support footnotes. Unfortunately the library used by Observable, marked.js, is not among them.
This is a good start for how things could look when there is a wide window, but let me recommend skipping the vertical line and adding a bit more whitespace between columns, and optionally slightly decreasing the font size or using dark gray instead of black for the sidenotes. When the notes are visible the circled numbers are unnecessary. (Not needing a little asterisk or number is one of the points of side notes.)
However this one can’t really be used in practice yet, because it doesn’t adapt when the width decreases. A publishable-notebook-ready solution should present side notes for wide windows (say anything wider than 700 pts) with the main column narrowing modestly to keep the notes column legible, but then should switch to numbered footnotes (and/or hover or click popup notes) when the window narrows beyond that.
I haven’t done any searching but there might be some existing implementations around the web of width-adapting sidenotes which might be modified to work in a notebook context.
I’m glad people are experimenting here.
I’d love to see more exploration of 2-column notebook layouts, and more layout trickery in general, e.g. right-aligned floating images which slightly push into the main text column, small images/diagrams which can be clicked to expand to fill the column on a wide view or go fullscreen on mobile, …
Coming up with ways to effectively use available space on a large display while reactively supporting small displays is tricky. Maintaining the main narrative flow while allowing readers to fully engage with side content needs a combination of good tooling and careful work by authors.
Thanks for the suggestions! I’ve removed the border and circled numbers, and switched to numbered popups below 700px.
I see that you have made headway with Tippy.js. Looking forward to it!
May I suggest to make the sidenote’s font size customizable? (I’m not sure if just two or three options would be sufficient, like “same”, “small”, “tiny”)
You can style the .tippy-content with any font-size you wish!
Thanks. Do you plan to publish it so I can import to credit you?
You should be able to import my notebook and add a CSS rule in your own notebook to override the font size.