Typographical tip for hCalendar

I was updating my schedule over on the DOM Scripting site and I thought I’d share a little tip for any microformateers who savour typographical correctness.

Most hCalendar events have both a start date (dtstart) and an end date (dtend). Both use the abbr pattern:

<abbr class="dtstart" title="20061122">November 22nd</abbr>
<abbr class="dtend" title="20061123">November 23rd</abbr>

Date ranges like that are often written as:

November 22nd–23rd

Or:

22nd–23rd November

Either way, that piece of text features a range of dates. The correct punctuation for a closed range is the en-dash. If you’re marking up an event in hCalendar, try to to use the corresponding HTML entity:

<abbr class="dtstart" title="20061122">November 22nd</abbr>
&ndash;
<abbr class="dtend" title="20061123">23rd</abbr>

The HTML entity is &ndash;. In decimal that’s &#8211;.

For more information on en-dashes (and em-dashes), read The Trouble With EM ’n EN (and Other Shady Characters) over on A List Apart. For more general typographical tips, try Reading Design by Dean Allen and Typography Matters by Erin Kissane, both of whom are great writers. And, of course, there’s Richard’s excellent practical guide to web typography.

If I come across any other typographical titbits for microformats, I’ll be sure to flag them up.

Wednesday, November 22nd, 2006 4:00pm

Tagged with

Comments

Good point, Jeremy! Typography is something which is completely ignored on the Web.

Another small thing: in case of phone numbers in hCard it is good to add some tracking (letter-spacing) to number as well as change old-style figures to traditional in case you using them (this is actual for typefaces such as Georgia or Hoefler Text). It also good to add some extra tracking to URLs as well.

P.S. Hopefully I am going to talk about these issues at some of upcoming WSG meetings in Sydney,

Shouldn’t the first attribute in the abbr-tag be class instead of title? I was kind of confused to see you using two title tags, so I headed over to microformats.org and there they use class, which makes a lot more sense to me.

# Posted by Melvin on Thursday, November 23rd, 2006 at 10:26am

Illustrations

Thanks to the magic of machine tags, you can illustrate this post by tagging a picture on Flickr with:

Related

Links

Find links I've tagged with microformats, typography, etc.

Photos

Find photos I've tagged with microformats, typography, etc. on Flickr.

Find photos that I took on November 22nd, 2006.