Add Sidenotes to your Web Pages and Blogs

Unobtrusive Sidenotes combines Javascript and CSS so that you can 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.
[ad#5links]
The developers –Arc90Lab – believe that footnotes, at least the ones worth reading, are 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.

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.

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”).

arc