- What is this?
- How do I use it?
- Supported Browsers
- A Simpler, Hosted Version of Sidenotes
- Talk About Unobtrusive Sidenotes
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.
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:
<p>Here is some ordinary paragraph text. Within this text, I can highlight a particular passage and add a side note to it <span class="sidenote" title="This is the actual sidenote text that will be displayed alongside the main paragraph">like so.</span></p>
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’>
You can see sidenotes in action by clicking here.
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
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.