I’m presently using Ghost Pro for my site, and I find I like to write with notes – the easiest way to do this in markdown is with footnotes. However, I would like switch to side notes that would appear and disappear as the reader scrolls through. Does anyone have any thoughts on a relatively easy way to adopt this functionality?
1 Like
Easy is very subjective, but here are some ways I found:
sidenotes.js
/* sidenotes.js: standalone JS library for parsing HTML documents with Pandoc-style footnotes and dynamically repositioning them into the left/right margins, when browser windows are wide enough.
Sidenotes are superior to footnotes where possible because they enable the reader to immediately look at them without requiring user action to 'go to' or 'pop up' the footnotes; even floating footnotes require effort by the reader.
sidenotes.js is inspired by the Tufte-CSS sidenotes (https://edwardtufte.github.io/tufte-css/#sidenotes), but where Tufte-CSS uses static footnotes inlined into the body of the page (requiring modifications to Pandoc's compilation), which doesn't always work well for particularly long or frequent sidenotes, sidenotes.js will rearrange sidenotes to fit as best as possible, and will respond to window changes.
Particularly long sidenotes are also partially 'collapsed'.
Author: Said Achmiz
2019-03-11
license: MIT (derivative of footnotes.js, which is PD)
*/
This file has been truncated. show original
And here is a scholarly comprehensive resource of prior art on the subject:
And in case you need more:
https://www.google.com/search?q=sidenotes.js
Many thanks for these. Going through them now.