Tools

Unobtrusive Sidenotes

Our first tool out of the arc90 lab, Unobtrusive Sidenotes is a simple mix of Javascript and CSS that makes it ridiculously easy to incorporate sidenotes into your web pages or blogs. It even includes a handy set of colors (all set in CSS and tweak-able) to create that oh-so-subtle correlation between the sidenote and the relevant text.

What is this?

It’s all about tangents. No, not those kinds of tangents. We’re talking about the kind where you’ll be sharing a thought and you sort of, umm, go off elsewhere.  Some people call them asides, digressions, departures…you get the idea.

We are of the belief that footnotes – at least the ones worth reading – suck. They suck because they are elsewhere, usually far away from the line-of-sight we’re focused on when we read. It would be nice to be able to optionally just glance over and take that brief little detour if we so choose. It’s footnotes on steroids: sidenotes. The Atlantic Monthly dipped its toe into sidenotes about a year ago in their April 2005 issue. You can see the web version (with pop-up-style sidenotes) here.

How Do I Use It?

To use sidenotes on your site or blog, just follow these simple steps:

Download The Code

Click on the icon below to download the source code for side notes:

Download

Once downloaded, upload the files to relevant location on your hosted site.

Link To The Javascript

Add a link to the javascript file in the page(s) you'd like sidenotes implemented. Remember to adjust the path to properly point to the location of the javascript file:

Add Sidenotes To Your Page

Add sidenotes to your page by simply wrapping the text you’d like to highlight with a pair of <span> tags. Within the starting <span> tag, just include a class attribute to “sidenote” and title attribute that includes the text you’d like to include in the side note. For example:

Style Up Your Sidenotes With CSS

Sidenotes are completely styled up through CSS. You can set the border and background color of sidenotes as well as positioning with CSS. The colors for side notes and highlighting will alternate between four set color schemes. You can easily change the default colors by editing the CSS that is referenced by the script. The specific CSS styles are included in the HTML file as well as the example link below. Note that the css style names must stay in tact for the script to work.

You can also control where the sidenotes end up relative to the paragraph through the CSS. In our example code, the sidenotes alternate between left and right floating within the passage. You can easily set the sidenotes to only float left or right by tweaking the CSS (left requires no float attribute at all, right simply requires "float: right").

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 <title> 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:

  • You can visit Yahoo! by following this a <href=’http://www.yahoo.com’>link.</a>
  • Below is a very attractive image of a duck: <img src=’http://path/to/duck.jpg’>

Examples

You can see sidenotes in action by clicking here.

Supported Browsers

Currently, the unobtrusive sidenotes script has been tested and confirmed on the following browsers:

  • Internet Explorer 6.0+
  • Mozilla Firefox 1.5+
  • Apple Safari 2.0
  • Opera Version 8.51

Licensing

This arc90 tool is licensed under the Creative Commons Attribution 2.5 license.

A Simpler, Hosted Version of Sidenotes

If you'd like to avoid uploading files and tweaking CSS, we've also come up with a simpler, hosted version of sidenotes. You'll find details on how to use it at the arc90 blog.

Talk About Unobtrusive Sidenotes

You can send feedback on Unobtrusive Sidenotes at the arc90 blog.

Digg Del.icio.us