3 ms·
Anyone interested in footnotes might like the way we do it on the Vale site, for example: https://verdagon.dev/blog/making-regions-part-1-human-factor https://v
by verdagon 4y ago
Anyone interested in footnotes might like the way we do it on the Vale site, for example: https://verdagon.dev/blog/making-regions-part-1-human-factor https://verdagon.dev/blog/making-regions-part-1-human-factor
Some nice things:
* The footnotes are off to the side, so it's closer to the text that mentions it and it doesn't interrupt the flow of the main text.
* It uses colors, so it's pretty fast to visually jump to the right one.
* We keep the numbers too, for colorblind folks (and those using blue-light filters like f.lux)
* It works without javascript!
Our markdown->html renderer makes this happen by slicing up the page horizontally, one slice per header. Each slice then has a wide left column for the main text, and a narrow right column for the footnotes. Then if the user happens have javascript enabled, it position:absolute's the footnotes and lines them up a little more precisely with where they're mentioned.
- AB1908 4y agoYou may want to explore Tufte CSS. My own article about footnotes/sidenotes: https://ab1908.github.io/2021/08/24/footnotes-in-web-content.html https://ab1908.github.io/2021/08/24/footnotes-in-web-content...
- verdagon 4y agoStellar article! Was definitely worth a read. The sidenote styles are particularly ingenious, I remember trying to get float+clear to work for this and never could, but looks like it's doable!
- AB1908 4y agoGlad you liked it! I'm amazed that you liked it cause it was my first semi-serious blog post haha.
- breck 4y agoOh this is beautiful. Thanks for the link.
- AB1908 4y agoMany thanks, my friend
- breck 4y agoI like this. The nice thing about the Scroll implementation is that it's designed with extensibility in mind. I expect one day someone builds a `sidenotes` keyword. I think the colors idea is good too. Some stuff for us to play with in the future. Thanks for sharing!