I still find it perplexing that no good option exists in order to have sidenotes/footnotes in a text. This is one of the best surveys of implementations out there, my only gripe is that the solution they employ uses JS in order to lay out the page.
I suppose one of the pet peeves of mine are that the text selection is always a bit messed up due to how the inline element is floated to the right and as such it is not possible to copy text without the side note easily. But those are actually quite minor and probably does not bother a lot of people.
If you haven’t read the updated version by Koos, I quite like how it renders in reader mode, which suggests that the accessibility is also a bit nicer.
I used to do the same thing (from what I gather - surrounding the sidenote with (note:)), but I decided to move away from it. Particularly, I found that as the sidenote’s length grows, the interruption for people in reader mode (or using screen readers!) gets more and more severe. I was considering adding normally-hidden footnotes instead, and linking to them, but never got around to it.
That is a good point, I suppose that it’s has to be balanced in some way or another, maybe it can even be split such that only lengthy notes are put at the end and referenced and smaller notes can be added in parenthesis in the body text. But that also means more cognitive load for the author who has to consider which one should be displayed in which way.
The approach you detail should be possible to achieve with media queries, but I suppose it’s not as straight-forward as I imagine it.
A trick that I figured out about side elements is that you can use shape-outside: border-box; to make a box’s margin not displace text. So to work around the thing about not being able to put blocks inside of <p>, you make a <div> before or after the paragraph where you want it, then you float the box left or right and the push it around with the margins so that it’s half in and half out of the paragraph. In IE11, the margin will cut off the top or bottom of the paragraph, but every other browser will reflow the text, so it looks good, like a magazine inset.
| <p> |
| | box |
That looks like a very neat technique. I have to admit that I don’t know much about HTML besides the basics, so I have to try to untangle this a bit more. Thank you for pointing it out though!
I really love the redesign of David Foster Wallace’s essay Host (https://www.theatlantic.com/magazine/archive/2005/04/host/303812/). In print, there’s lines going everywhere and it’s kind of a mess, but the way the annotations expand and nest within each other is very pleasing.
I worked at The Atlantic when it was reworked for the then new CMS. IIRC, it was a labor of love by Chris Barna to make it work in a responsive design.
Thank you for sharing that link. It’s quite cool indeed and the recursive notes are done very well.
My only gripe would be that you have to click on the footnotes to expand them and that they are also part of the text flow, which breaks down in reader mode, as they are inlined into the main text.
I really like side/footnotes and use them on my blog using a modified fork of Tufte.css (example). It works well enough but I am sometimes disappointed - sidenotes interact poorly with each other if too many crowd the same space on the page.
I really wish HTML had a built in support. They are a pain to implement with different screen sizes and there is no good way of rendering footnotes when printing.
If I was going to do it again I might attempt modifying my document generator to be cleverer when placing multiple sidenotes together.
Yes, I am just a bit puzzled as to how you can control the placement of this type of span since they are more or less just abusing the padding of a span element.
I’m no design nerd. I like fixed width fonts and simple lines and boxes. But someday I hope to make something as typographically beautiful as that website.
I recently implemented sidenotes on my own blog (example), and thoroughly appreciate them as a means of providing an aside, but without distracting the reader.