We’re pleased to announce the first of hopefully many tools, experiments and ideas out of the arc90 lab. This one is really cool. It’s a dead simple way to include color-coded sidenotes in your blog or web page. What are sidenotes you ask? They’re like footnotes, except cooler. They’re color-coded against highlighted text and sit alongside the main body of text rather than at the bottom. This is partly inspired by a brief experiment The Atlantic Monthly did about a year ago with an article by David Foster Wallace. It’s available in PDF format for download.
Installation of the script requires virtually zero coding skills. Simply download the code, drop in the javascript tag reference and CSS and the tool does the rest. Be sure to check it out over at the lab. You’ll find full instructions and examples <span class="sidenote" title="As an, ahem, sidenote, be sure to subscribe to the lab's RSS feed to stay up to date on the latest offerings.”>there.
Wayne said:
Excellent work, I may actually use this one day since I’m often writing articles and I make superfluous use of footnotes.
Thanks, awesome work!
ben scott said:
maybe it is good to use the particle tree lightbox.js technique for these footnotes at http://particletree.com/features/lightbox-gone-wild/
or maybe a technique like
http://www.stuffandnonsense.co.uk/archives/trimming_form_fields.html
to show or hide classes for the sidenotes with relative positioning on the actual span class
Kevin said:
Wow — what a great idea to share. Thanks!! I just added this site to my Favs. Thanks again!
arc90 lab said:
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…
Edward Vielmetti said:
just added it to my blog to try it out – you can see some of the results at
http://vielmetti.typepad.com/vacuum/marginalia
which is where I’ve been gathering notes on writing in the margins.
Martin Schneider said:
These rule.
In 10 years all web pages will look like this.
Backgrounds said:
Wicked script! this is just what im after. thanks, :)
Reid Young said:
Very cool, and they validate, but not without lots of warnings for those embedded tags. I wonder what future standards/validators will do with these. Unfortunately, I have a feeling that it won’t be pretty, and I don’t think it would be wise to use these in any kind of professional capacity.
And what about accessibility – what does JAWS do when it hits these gigantic title attributes with psuedo-XHTML tags?
I’d try to make myself useful, but I don’t have a copy of the software. All I can say is that I think I would rather stick with a more accessible and valid solution along these lines:
Michael Aleo said:
@ Martin Schneider “In 10 years all web pages will look like this.”
Design moves so fast now that these will be out of style in a year if not less. The validation issues are still there as well. Regardless, it’s an interesting concept and definitely has its uses.
Murali said:
this script is cool,
I dont want to display the content in span tag, so i added this in the stylesheet
.arc90_sidenoteLNK { padding: 0 .3em; display:none }
so it works, however,
it is not recognizing the Ending quotes,
i have something like this
Do you Know?ABC”>
and instead of stopping the box at ABC, it is continuing till the end of the content of the page. how can i stop that ? basically not recognizing the ending double quote of the “title” attribute
Cameron Boehmer said:
@Reid Young
I’m concerned with validation etc as well. I also don’t like javascript (rooted in a irrational terror of interpreted languages), so my solution doesn’t use it.
The way I addressed sidenotes was just to throw the note in it’s own [span] within the term-to-be-highlighted’s span (ps – I used [] to keep the tags from being rendered):
jibber jabber jobber [span class="term"] highlighted term [span class="def"]definition or notes on hightlighted term[/span][/span] more jibber jabber
And then I used CSS to position the inner span. Unforuntately, I’m no good with CSS and haven’t figured out a way to make the text wrap around them, so my sidenotes float outside the main body of text, which kind of sucks. Hopefully someone will come up with a better way to do the CSS.
Here is a screenshot
Cheers,
Cam
Cameron Boehmer said:
fixed link from screenshot above
Jay said:
Is there anyway to port this as a plugin for Wordpress? I host my friends’ blogs and while I am able to just drop in the javascript reference and the stylesheets, my friends aren’t interested in tinkering with the codes.
It’d be real handy if there’s a plugin for this that they’d just activate and deactivate.
Josh said:
Has anyone had success making these work within a Blogger post yet?
Jackdaw said:
Any way of getting this working without the span? I don’t want highlighted words, just the sidenote – in the above example on this page the highlighted word is ‘there’.
This is a great idea with really poor documentation.
Matthias said:
@Reid Young
I looked at the example with Fangs, that Firefox extension that claims to print text the way the screenreader would read it. Weirdly all connection between the highlighted words and their title tag, the sidenote content, is lost. I don’t completely trust Fangs, and I don’t really understand why it reads the title of the span before the paragraph, but it’s not looking good, although the source code looks promising.
Craig Andrews said:
I’m not seeing anything here that couldn’t be achieved by floating divs and a couple of CSS classes. What makes it worth all this javascript? The only javascript bit I can think of a need for is the one that toggle’s the floating div classes visibility.
Richard Ziade said:
I think the real goal here was to make it easy for non-programmers. You don’t need any sort of working knowledge of javascript or CSS to get this working.
I think there’s stil a final feature that will really make this effective: integrate it with Wordpress and/or Movable Type.
Jay said:
@Richard Ziade:
yup. i’ll be waiting patiently for the wordpress plugin. now that said, let’s say a plugin is made and released for wordpress, how would it integrate with a theme?
in the end, non-programmers would still need to tweak the css just to get it to work with their themes.
Joel Nagy said:
Hi everyone, I’m Joel Nagy, a lead developer at Arc90 and the author of Sidenotes.
I understand that some of you have concerns about the warnings in the validation. So I added a simple modification (available in the download, and on the examples page) that allows you to insert the angle brackets as HTML entities using ampersand gt or lt. You can also still use the angle brackets if you would like.
I’m kinda curious why some who have commented don’t want the highlighted span tag? The purpose behind the span was to draw the connection between the current thought and the note that relates to that thought. With out the highlight you may not see the connection.
henrie said:
hi! i really love this feature. im not sure i actually have a use for it. as pretty much my whole blog is a sidenote. but i added it anyways. i (dont know if im doing something wrong) cant get the toggle on and off switch to work. im not sure if there is something else i have to download for that or if its just some easy fix im just too much of a n00b to figure it out.
anyways
i love it.
thats all i really wanted to say.
-henrie
Oded said:
Hi There.
I really liked your “Unobtrusive Sidenotes” article but there’s something else in there that turned me on. The code examples are VERY nice. I’m actually, looking for something like it for a while now and what u did there is very creative.
I would like to ask you if this code allows you to edit the text within the text area as well?
Thanks
jenn.suz.hoy said:
The simplicity and easy-to-impliment features of this make it so appealing to designers. Though I’m not one to generally shy away from basic HTML or CSS coding, the thought of JavaScripting keeps me up at night. Can’t wait to take this idea out for a test drive on my own blog later on!
Paul said:
I also am having trouble getting these to fly on Blogger (using the simple/dummies hosted version).
Paul
Anonymous said:
Some interesting and useful AJAX/Javascript code
I like seeing more and more uses of prototype. I’m not sure if the big guys will win out with their UI toolkits (Yahoo UI/GWT) or if it will always feel better to put things together by hand. Either way it is good to understand how this stuff wor…
Bruce/Crablaw said:
Ditto re the Blogger interface issues. I am not a guru on code. Not sure what attribute to add (or to disable….) where to make the sidenotes align left/right such that text wraps around the note. I can “align” the image but cannot figure out how to do it w JavaScript. Any assistance would be appreciated.
BillyG said:
Nice.
p.s.: fix the empty href’s in your demo footer and you’ll validate too
Nick Hayday said:
on this example http://lab.arc90.com/tools/sidenote/
how do I make the tooltips show up as hidden on original load, rather than they way it defaults now?
Tatiana said:
Hi, I have no knowledge about ajax. Only about html and jsp. But I need this feature to my project. I tryied to implement your code in my page, but I wasn’t able to find out how you made the “hide/show” toggle work. If you could email me or post here the answer I would appreciate (like wich function is used in “onclick” actions and how excactly it works).
thanks
AT said:
“I’m kinda curious why some who have commented don’t want the highlighted span tag? The purpose behind the span was to draw the connection between the current thought and the note that relates to that thought. With out the highlight you may not see the connection.”
I was also looking for a way to not have the span highlight the text. I’d prefer to use it just as a normal sidenote, off on the side on it’s own. I don’t want to use a colored box whose meaning isn’t immediately apparent.
anniebluesky said:
I was excited to try it, also, but can’t get it to work with Blogger. Has anyone had any luck? If so, what did you do?
Amit Elhanan said:
I would like to know if it’s possible to combine different methods of sidenotes. I sort of want something between what the Atlantic Monthly was using and the regular sidenotes. Basically, I want the side note to open on the side when I roll over the part of it in the text. and im not talking about the tag which shows the text in the sidenote, I am talking about the actual sidenote. is that possible? setting it up so that the sidenotes show up (not as popups) when I roll over the text?
techniqueal t. said:
Wow, this is a real cool script! Got it running in blogger. There seems to be a conflict if there are existing spans on the body though. To be specific, the sidenote tends to misalign and prioritize a prior declared span even if that span doesnt have sidenote class property. Could this be a platform issue?
Meg said:
I love this script; thanks to arc90 for making it available. You can see a tweaked version working on my Moby Dick annotation website, http://www.powermobydick.com. The links in the notes do not validate, but they do work.
Dewed said:
Ditto on the “how do I have the side notes hidden on initial page load” question.
I’m considering using this as a contextual help link , but want the “help” hidden until it is requested.
Meg said:
Figured out why the links were not validating–you have to delete all stray spaces (there are some in the sample code) and use the proper HTML entities for any special characters within your sidenote text. So to start a string of italic characters, e.g., you’d write “<i>” rather than ““.
Meg said:
OK, my previous post was not real helpful because this website converted the HTML entities I typed into special characters! Here’s a web page that shows what I meant: http://www.utexas.edu/learn/html/spchar.html