Update: Better Sidenotes.

I’ve seen several articles and posts about footnotes and sidenotes bubble up recently:

• Daring Fireball: About the Footnotes
• Brand Spanking New: CSS Footnotes revisited: Sidenotes
• QuirksBlog: Footnotes on the Web

Since reading most of Edward Tufte’s books a few weeks ago, I’ve come to appreciate the elegance of sidenotes. Footnotes or endnotes in printed books are irritating, but I find them especially frustrating on the web. I read something in Eric Meyer’s Cascading Style Sheets: The Definitive Guide See Figure 10-42 on page 314 of Meyer’s book. that inspired me to solve this with CSS.

You can build sidenotes with absolute positioning. First, set the style on some containing block to position: relative;. If your page is centered, it’s best to use whichever block is doing the centering. Next, style up some <span>s (or <small>s) with a sidenote class. These will contain the sidenotes inline with the text. Depending on your site’s style and your taste, you will need to create something like this:

span.sidenote {
    position: absolute;
    left: 400px;
    width: 200px;
}

The length value for top can be omitted because the positioned element will line up with wherever you put the <span> in the text. You can’t use <p>s or <div>s because XHTML doesn’t allow <p>s to contain another <p> or a <div>. If you need to add a new paragraph to your sidenote, it’s probably already too long. I use this technique to render sidenotes on this site. I don’t use numbering because the sidenotes appear next to relevant parts of text.

The XHTML and CSS validate, and this technique works in Firefox Win/Mac, Safari, IE  5  Mac, IE  6 Win, and IE  5.5 Win. To show how flexible this technique is, try resizing the text in your browser on this page. The sidenotes should move into the correct position. Please contact me with any suggestions or improvements.

John Gruber posted an article about a month ago showing how to improve Apple’s Weather widget so that it would show you what time the data had been recorded. I implemented this right away. After a few hours, I found that I was doing too much math just to figure out how old the data was. Gruber’s hacked widget only showed the time of the weather reading, unadjusted for time zone differences or daylight savings. All I wanted to know was how fresh the data was. I dove into the code and hacked it to show something like “18 minutes ago” instead. This iteration worked, but returned nonsense results for readings in different time zones than mine. I sent a note to Gruber, and he showed me where to find the GmtDiff in AccuWeather’s XML response.

I’ve made a set of .diffs that you can use to patch a copy of Apple’s original Weather.wdgt. The .diffs are designed to work with Mac OS X 10.4.2, and include Gruber’s changes to the .html and .css, and mine to the .js files. (Did I mention to do this on a copy of Apple’s files?) Download these files, and place them in your Home directory:

In Safari and Firefox, you can option-click each link to download each file. parser_js.diff
Weather_css.diff
Weather_html.diff
Weather_js.diff

We’re going to do this in the Terminal. You can find the Terminal in /Applications/Utilities. First, copy Apple’s Weather.wdgt into your home directory (note the -r flag, the .wdgt is really a directory):

cp -r /Library/Widgets/Weather.wdgt ~/Library/Widgets/WeatherTime.wdgt

The UNIX patch patch is a UNIX utility invented by Larry Wall, who later created Perl. This utility automates tedious task of changing any type of text file. Find out more at Wikipedia. utility will do the grunt work for us. Type these commands in the Terminal:

That’s it! If for some reason this breaks in the future, you can just delete the WeatherTime.wdgt package (directory) from ~/Library/Widgets, and you’ll get Apple’s original widget back in your Dashboard. You can also find and delete WeatherTime with 10.4.2’s Widgets widget.

Please send any bug reports or suggestions to beau@hartshorne.ca.

I promised a trip report and some photos, but haven’t had time to put very much together. Here’s the abridged version.

Got to trailhead. Stove was leaky, fuel line was catching fire. Rented new stove. Walked in big one hundred kilometer loop with heavy packs over about seven days. We saw one bear, lots of deer, and a moose munching on some leaves a few meters outside our tent. The lakes were beautiful and unusually clear, but only because the acid rain from nearby mining had killed the algae and weeds which feed the fish which feed the birds and so on.

Pat in black, Greg in red. Yes, Greg can actually jump like that. Scary.

I need to meter the sky before taking bright outdoor shots like this. Missing from this picture is a beautiful blue sky.

It rained on the last day. Greg is carefully making his way down some very slippery rocks.