June 17, 2003

Footnotes and Sidenotes

Andreas Boevens, from webgraphics, has come up with a nice solution for footnotes in web documents. He calls them sidenotes. Now it does rely upon some CSS3 pseudo-selectors, so it doesn't work in IE. It degrades nicely though. He also point out the problems with his approach (mess, usability, semantics). Pretty cool stuff. Jason pointed me to another nice site: http://www.info.com.ph/~etan/w3pantheon/style/popupnotes.html. Same principle, slightly different implementation.
Post Info

Tagged As CSS, Coding, HTML

Comments are Open (7)

Posted at 05:51 PM

Comments

Jason

very similar to this example:
http://www.info.com.ph/~etan/w3pantheon/style/popupnotes.html

though I can't decide which is better.

Tony

That is also very very slick. I don't like how it's set on the :hover attribute. And I can't tell that they're links. But the presentation is well done.

Nice.

Jason

his other example may be more to your liking, though, as he points out, longer notes will run on top of each other, but at least it works in IE.
http://www.info.com.ph/~etan/w3pantheon/style/sidenotes.html

can you explain why you don't like the hover state in the first example?

found via http://www.l-c-n.com/IE5tests/index.shtml

Tony

It seems too forced to actually read it. I either have to be careful to keep my mouse in the same spot, or put it there and lift my hand. Too much effort, particularly for something like a footnote that I'd actually read. I'd much rather be able to click it and then read it, or if it references something else, copy the reference, etc.

My general thoughts on hovering is that it's fine for graphics and non-important text elements. But I'd classify a footnote as something important, or at least worth reading. Thus I'd want it to stay/stick.

If it popped up on the hover, but didn't go away until I closed it, that'd be another thing.

Hope that makes sense.

The other examples are good.

Andreas Bovens

I am amazed by seeing this similar implementation (one of them with a very familiar sounding name) - don't know the guy, first time I see his site.
I agree about the :hover state. It is very temporary. But then also, it wouldn't be such a problem if he'd drop those numbers and include the word(s) the footnote is giving more info about in the containing span. Like that, you can point to words instead of numbers, which requires less effort from your hand.

Andreas

From footnotes to sidenotes moved to a new URI: http://andreas.web-graphics.com/footnotes/index.html

Tony

Thanks Andreas. I'll update the main link.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Search
Comments on this post
Categories
Info
Tony Stephens
Copyright © 1995-2005
Site Version:
10
Licensed:
Creative Commons
Validate:
XHTML, CSS, 508, RSS
Subscribe
Blog-Fu, Link-Fu