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,

# Posted by Dmitry Baranovskiy on Thursday, November 23rd, 2006 at 12:22am

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

Magnolia

Find links that I've have tagged with microformats, typography, etc. on Magnolia.

Technorati

Is anybody linking to this?

Find out what other people are saying about microformats, typography, etc. according to Technorati.

Flickr

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

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

More information

About this site

Adactio is the online home of , a web developer living and working in Brighton, England.

Customise

If your browser was up to it, you'd be able to
?

This is the plain vanilla look.

Search


Subscribe

RSS is an XML-based format for syndicating website content. I have some feeds that you can subscribe to:

Elsewhere

Adactio Elsewhere has small pieces of me, loosely joined:

You can also find me scattered across these sites:

Bedroll

I had the pleasure of welcoming these people into my home:

Buy my book

Bulletproof Ajax