‘Sidenotes’ is a clever little piece of code that you can drop into your blog to allow you to easily create tidy little sidenotes or asides in your posts. This neat little piece of code, with a little bit of CSS tweakage, would likely fit into any blog and it is quite simple to use once setup. You simply put SPAN tags around the text you want to sidenote from, with a CSS class of “sidenote” and the text for the sidenote in the TITLE attribute.
To get it working in this post I had to paste both the JS reference and the CSS right into the content. I also had to set a width CSS attribute on the sidenote CSS class so that it wouldn’t stretch to the full width of the post which kind of defeated the idea of a “side” note.
It is worth testing before putting to use, I found it refused to work in my own blog, probably due to some CSS voodoo that is just beyond me. I wonder how it works from an accessibility point of view, perhaps one of our kind readers will be able to shed some light on that?
One irritation is, due to it using the TITLE attribute, the standard tooltip is still present. This can cause it to overlap the text quite jarringly, and isn’t the point that the sidenote is unobtrusive? Something they need to work on I think …
Ideally this would be a plugin for the major blog platforms, but that is a minor gripe really. When it works it looks pretty neat don’t you think?