Can you tell me how a website with sidenotes was made?

August 19, 2011 12:33 PM

I need to have a site that looks just like this one (which appeared on MeFi the other day). It's just perfect for a project I have been working on. Can you help me figure out how he did it?

I have a book-like thing, in which I comment on the works of the great philosophers, providing context and jokes in the margins. It's less pretentious than it sounds.

I would just love to be able to do the sidenotes right beside the relevant text in a webpage. I did it on paper, but I didn't think it could be done online.

It looks to me like he used a blogging platform, but I've never been able to figure out how to tell which platform and which template people use. Is there a secret code?

posted by bexpert to Computers & Internet (9 answers total)

It looks like homebrewed CSS from the source. Not that unusual for a blog.

When you get your own, make sure you include the code comment:

/*

Yeah, there's some shitty code here.
There are some things that shouldn't
be done. I did them. Sometimes, I had
my reasons. Sometimes, I was just being
lazy. But guess what? You're sitting
there reading the source on some guy's
blog. So fuck you.

*/

posted by supercres at 12:36 PM on August 19, 2011 [10 favorites]

Note that he also copyrighted it, and that copying something that somebody created on their own and copyrighted can be viewed as theft of intellectual property.
posted by croutonsupafreak at 12:39 PM on August 19, 2011

Grantland also does this-- might be some addtional clues there (viewing with their source and CSS) that could help you develop your own style.
posted by activitystory at 12:50 PM on August 19, 2011

This page seems to have a pretty straightforward implementation that looks like the referenced blog. There's really not a lot to the CSS—looks like the main copy div has a fixed width with position: relative, the sidenote element has position: absolute, and left: [outside the width of the main copy] —everything else looks to be a formatting nicety.

The author here uses the <small> element to wrap around the sidenotes, but if you did this in HTML5, the <aside> element would be more semantically useful.
posted by adamrice at 12:50 PM on August 19, 2011 [1 favorite]

If you're OK with footnotes being on the bottom there are plugins for WordPress that do that. I'm linking to myself here, but I feel like the footnotes work pretty well. Especially since there's a link that takes you right back up the page to where the reference is.
posted by theichibun at 12:51 PM on August 19, 2011

It's HTML4 moreso than CSS -- If you look at the source, the "window.onload" javascript is the important part. It looks up every "A" tag identified as a class "footnote", saves its position on the page, and then sets the position of the footnote itself relative to the position of the "A" tag, plus 6 pixels for that slightly-lower look.
posted by AzraelBrown at 12:51 PM on August 19, 2011

See: http://builtwith.com/?http%3a%2f%2fstilldrinking.org%2fthe-episode-part-1. It does not pick up a particular content management (read: blogging platform) system.

AzrealBrown has it right. The part with the colorful language, the JavaScript, is what affixes the footnotes to the correct position. It's a great way to handle it, in my opinion. The bad part of how it's handled is that with JavaScript off, the footnotes don't appear at all. However, if you turn off both the CSS and JavaScript, the page looks fine, with the footnotes all at the bottom.
posted by artlung at 12:56 PM on August 19, 2011

I did this recently (it's a personal site so I won't link to it), but I did it without using JavaScript. The trick, I believe, was that the footnote text was placed inline in a span. For some reason a div with style display: inline would still cause odd line breaks. I only tested this against the latest versions of Chrome and Firefox, but it met my needs. Here's the relevant bit from my CSS file if it helps:

span.fn {
  margin-right: -55%;
  width: 45%;
  float: right;
  clear: right;
  }

I use nanoc for my site, and I wrote a custom filter to use on my Markdown source that looks for the inline footnotes inside curly braces and outputs the proper HTML and superscript numbers. For the RSS feed, the filter pulls out all the footnotes and puts them at the bottom like WordPress.
posted by stopgap at 1:07 PM on August 19, 2011 [1 favorite]

Lodel is a open source CMS dedicated to the publication of scientific papers (particularly in social sciences). Here's an example of a paper with side notes. However it's in French and I'm not sure there's a good documentation in English.
posted by elgilito at 1:09 PM on August 19, 2011