The arc90 lab is the playground of arc90 - a New York-based technology and strategic consulting firm. The lab is a place for us to share our ideas, tools and the occasional experiment in web technology. All ideas, experiments and tools are licensed under Creative Commons.
This site is licensed under a Creative Commons Attribution 2.5 License.
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:
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 “arc90_sidenotes” and title attribute that includes the text you’d like to include in the side note. For example:
There are couple of things worth pointing out. 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 zip file contains a sample CSS.
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").
Style Up Your Sidenotes
One of the cool features of Sidenotes is the ability to style up the text within by simply using a slightly modified version basic HTML markup. Markup is just like HTML except for two key differences:
- Instead of using < & > for your tags, use basic brackets: [ & ].
- Instead of using double quotes, use single quotes.
Here are some code examples of how you can style up your sidenote text:
- The person’s name is [bold]David Williams.[/bold]
- 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.
