Black Dog Blog

Archive for the ‘microformats’ Category

I promise after this we'll hear enough about microformats for today. I've found myself referring to my own posts on this, so I've created a microformats tag and am making this post with blank forms that I can copy and paste at work.

Blank hCard template for company

<div class="vcard">
  <span class="fn org">
    <span class="organization-name"></span>
    <span class="organization-unit"></span>
  </span>,
  <span class="adr">
    <span class="extended-address"></span>, <span class="street-address"></span>,
    <span class="locality"></span>, <span class="postal-code"></span>
  </span>
</div>

Blank hCard template for individual

<div class="vcard">
  <span class="fn n">
    <span class="given-name"></span>
    <span class="family-name"></span>
  </span>,
  <span class="title role"></span>,
  <span class="org">
    <span class="organization-name"></span>
    <span class="organization-unit"></span>
  </span>
  Phone: <span class="tel"></span><br />
  Email: <a href="mailto:" class="email"></a>
</div>

Consider this an informal licence to use these templates for whatever you like. No credit or link required; point folks at my posts on microformats if you think they'll be helpful.

(If you use them for a site or page that is pro-religion or is about sex, alcohol, smoking, cruel treatment of animals, or disreputable or illegal activities, please don't link back!)

Another few tricks with hcards.

These guys' details are freely available on the web, so I hope they'll forgive me for using them as examples.

Example 1

Paul Rodgers, Editor, 6 Music
Phone: (020) 7765 4763
Email: paul.rodgers@bbc.co.uk

When someone's email address contains their organisation's full name, it'd be churlish to refuse the opportunity, and no little thing like lower-case letters is getting in my way.

A couple of points to note in our first example:

• Paul's job title also includes the department he works for (well, controls, actually). That's fab, since it lets us kill two cats with one ballbearing.
• You'll also notice a big org span, which has to encompass his department (organization-unit) and company name (organization-name) and a bunch of other stuff.
  • I'm hoping this is ok semantically. As I understand it, when both unit and name are specified, anything else should be ignored; and indeed, exporting to Notepad through Operator shows that it seems to have been interpreted correctly.

Which creates:

Paul Rodgers, Editor, 6 Music
Phone: (020) 7765 4763
Email: paul.rodgers@BBC.co.uk

Example 2

Second example:

Robert Gallacher, Editor, Planning & Station Sound
Phone: (020) 7765 4373
Email: robert.gallacher@bbc.co.uk

And Robert's department isn't stated here, so we'll just mark it up as a role, which is easier. The org span can now go just around the letters BBC:

Which creates:

Robert Gallacher, Editor, Planning & Station Sound
Phone: (020) 7765 4373
Email: robert.gallacher@BBC.co.uk

Please note the date on this entry. It could well be that these people's details are no longer accurate. View them as examples only.

Sneaking microformats into here. And testing them until they work with Google Maps.

To see and use microformats in Firefox you currently need a suitable extension. If they get wide uptake, though, expect that to change.

(It's such fun updating this old site. Once you get used to the tables and can skim through them blindly, at least.)

An hCard microformat worked example

Firstly, refer to a vcard syntax glossary like this one. There is also a hcard microformat creator, which works best with a little common sense added.

Both of those were less than 100% helpful in marking up some of the addresses I was doing today, though, so here's an example of a fully marked-up company name and address with some tricky bits.

(This address is available freely on the web and was the first example I had to hand, unsurprisingly.)

In this example the address needs to show up as "BBC Media Management Scotland, Zone 1.02, Pacific Quay, Glasgow".

With microformats you can't put information in attributes (so you can't do <span class="org" address="1 Balloon Street">Company</span> or similar). All the text you want to mark up has to be there, displayed on the page.

That's a problem. There is no post code here.

Well, I found an incomplete post code for Pacific Quay, Glasgow on the web. G51—that's enough to help your mapping software out, at least. How to include it without making it visible? I just cheated and told the browser to hide it: <span class="postal-code" style="display:none">G51</span>

Similarly to the post code, the country (Scotland) is not shown separately. This time it's because the page is only aimed at people in Scotland, so it would look patronising and possibly US-centric at worst, merely bloated at best. So much for the site visitors, but mapping sites are almost all American and will assume the country is America unless told differently. Well, I could add another hidden span here, but wait a second. What was that organisation name again? BBC Media Management Scotland. There's a usage of the word that already exists, ready for me to throw my class="country-name" around.

The full organisation name, then. There isn't actually a company called called "BBC Media Management Scotland". "Media Management Scotland" is a subdivision of "BBC". A human reader will grok that, and with microformats we can get the computer to grok it too. <span class="fn org"><span class="organization-name">BBC</span> <span class="organization-unit">Media Management Scotland</span></span>

Or with the extra country-name: <span class="fn org"><span class="organization-name">BBC</span> <span class="organization-unit">Media Management <span class="country-name">Scotland</span></span></span>

And yes, you need to add both fn and org for it to understand that this is the name of an organisation. hcards were set up for people and org really refers to the company at which the named person works.

The address is fairly straightforward except for that "Zone 1.02". Experimenting with Google Maps, I found that "Zone 1.02, Pacific Quay" turned up no results, even with the country name and partial post code included. "Pacific Quay" on its own does turn up the correct result. I could just not mark up Zone 1.02, leaving Pacific Quay as the full street address. But that's changing reality to please Google or Multimap, which is dumb, and besides would be unhelpful to your readers if they want to export the full address, say to print some labels.

Luckily hcard microformats have a class called extended-address, I discovered after some digging. The examples I found used it for things like room or flat numbers in a building. That'll do. <span class="extended-address">Zone 1.02</span>, <span class="street-address">Pacific Quay</span>

I think that's all the tricky stuff in this example.

Full thing:

<span class="vcard">
  <span class="fn org">
    <span class="organization-name">BBC</span>
    <span class="organization-unit">Media Management Scotland</span>
  </span>,
  <span class="adr">
    <span class="extended-address">Zone 1.02<span>, <span class="street-address">Pacific Quay</span>,
    <span class="locality">Glasgow</span> <span class="postal-code" style="display:none">G51</span>
  </span>
</span>

Naturally, you'd want to remove the whitespace to get it to display inline without unsightly gaps around the commas. And you could replace the outermost span with a div to make it block-level.

Example on the web

Anyone any good with hCard microformats?

I've been adding info to my blog for fun, but I'm running into issues (when testing exporting it as a contact file through Operator and opening with Outlook): in a couple of cases it is incorrectly getting its data from the tag contents instead of the title attribute. (I'm using titles simply to make the human-readable part flow a bit more nicely.)

Code:

<address class="vcard">Contents &copy; <a class="url" href="http://hellhound.net/"><abbr class="fn" title="Herm Baskerville">Herm</abbr> '<span class="nickname">Mutt</span>' Baskerville</a></span>. <span class="org">Mutt <span class="title role" title="admin">administrates</span> <a class="organization-name" href="http://profusion.hellhound.net/" title="Profusion">Profusion writing and roleplay</a></span>.</address>

produces (edit: following code removed while I test stuff):

It's correctly picking up Herm¹ Baskerville as the full name. (The abbreviation tag with title is apparently best practice, better than classing separate words [plus a space] as name-parts, and clearly it does make more semantic sense.)

It is incorrectly picking up "Profusion writing and roleplay" for the organisation (instead of "Profusion") and "administrates" (instead of "admin") for the position.

Now, the title attribute is meant to overrule tag contents, unless I misunderstood something; perhaps it doesn't count in these specific cases? And no I'm not sure I really want to include all this info on the page, but I'm trying things out, godsdammit. :)

edit: Responses and interesting stuff to be found on the LJ mirror of this entry

¹ Less confusing than "Herman or Hermia, depending on my mood", right?