Back in October Theresa O’Connor had an article make the rounds about using medieval heraldry standards in web design.

At the time I happened to also notice her name linked to an IPA pronunciation website, IPA Reader which I thought was cool.

Now she’s written a post about marking up IPA pronunciations and autolinking to IPA Reader!

I particularly like her commitment to using existing markup for the job:

I wanted to automate linking to IPA Reader whenever I write IPA on my site. Just a bit of DOM scripting. But how should we mark up chunks of IPA? Instead of minting some arbitrary class name, let’s use the right tool for the job: HTML’s lang attribute. We can mark runs of IPA with the BCP 47 code und-fonipa, like so:

<span lang=und-fonipa>[tɝˈisə oʊˈkɔnɝ]</span>

Automatically adding links to IPA Reader is straightforward. You search for all of the elements with lang=und-fonipa, and then use the textContent of each element to build the right URLs to IPA Reader. I mark these links with rel=help because the referenced document provides further help information for the parent of the element defining the hyperlink.

Very cool!