Sidenotes: An Elegant Replacement for Footnotes

By Chris GarrettAdvertising

Sometimes it is the simplest ideas that impress me most. I am just trying out a new javascript widget from Arc90 called “sidenotes”.

‘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?

16 thoughts on “Sidenotes: An Elegant Replacement for Footnotes”

  1. This little tool indeed makes you page moore atractive and I like to think blog pages from now on will be more colorfull

  3. I just wanted to let you know that we’ve made a simplier version of Sidenotes that requires only the script tag. We host the JS file, and the auto-include the required CSS, this way you won’t have to worry about including the CSS like you have in your feed.

    Also, we use Performancing at Arc90, and we all like it a lot.

  4. The difference is the use of javascript and the colored marks in the standard text. The javascript adds a button which hides/shows the sidenotes. If sidenotes can be disabled by default (?) then the reader could have the pictures in the sidenotes and enable them by will. I am not sure though which moment the pics load.

    Basically I am looking for a nice solution to show/hide small/big pictures. Since weeks I want to try out some well thought solutions from http://onlinetools.org/index.php

    I did not test sidenotes yet …

    I would like to have a CSS design feature which enables my site to not-load pictures by default. Of course there should be some switch to get the page with pictures.

    Has somebody an idea how realize a CSS media switcher? In my case I would love to switch from text mode to text+graphics mode.

    Comments and ideas welcome!

  6. Hey Chris,

    I don’t know if you use WordPress or not, there is a great plugin from Kates Gasis called as sideblog. You may wanna check it out…. It rocks….

  7. I guess convenience. You are right, it’s not much different to having a CSS class

  8. “border-style: solid strong;float:right” can create you a note box.
    how is this different?

  9. You don’t expect me to actually read about the tool do ya? LOL

    Thanks Markus!

  10. I am not Chris but able to read …

    Formatting Within Sidenotes

    One of the cool features of Sidenotes is the ability to format and mark up the text within by simply using a slightly tweaked version of basic HTML markup. You can use standard HTML tags within your sidenotes tex (even though it’s inside the tag). There is only one caveat: use single quotes instead of double quotes. Here are some code examples of how you can style up your sidenote text:</p> <p> * You can visit Yahoo! by following this a <code><href=’http://www.yahoo.com’>link.</code><br /> * Below is a very attractive image of a duck: <code><img src=’http://path/to/duck.jpg’/></code><br />

  11. Chris does it allow you to link within the side note to perhaps certain authorities you are referring to or to the blogger you might be quoting?

  12. Typical example of ‘write first, think later’ and receive the appropriate bashing in a graceful manner 🙂

  13. Yeah but ordinarily you would have it in the template not the post, right?

  15. Cute but not sure how useful. I might try it on my blogspot blogs to see if it will work.

  16. This is a nice little thingy 🙂

    I will for sure try it out (next week) … and you get this little article del.icio.us-ed.

    Next one please.

Comments are closed.