Say my name
You can write down exactly how someone pronounces something by using IPA, the International Phonetic Alphabet. It’s really neat. For instance, the way I pronounce my name1 can be transcribed in IPA as [tɝˈisə oʊˈkɔnɝ].2
But what does that sound like? I can’t read IPA, so I can’t just look at that and know.3
Fortunately there’s software like Katie Linero’s IPA Reader where you can paste some IPA in and hear how it sounds. (Here’s how IPA Reader pronounces [tɝˈisə oʊˈkɔnɝ].)
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.
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll("[lang=und-fonipa]").forEach(
function(ipa_element) {
const anchor = document.createElement("a");
anchor.setAttribute("href",
"https://ipa-reader.com/?text="
+ encodeURI(ipa_element.textContent));
anchor.setAttribute("rel", "help");
anchor.appendChild(document.createTextNode("⏵"));
ipa_element.appendChild(document.createTextNode(" "));
ipa_element.appendChild(anchor);
});
});
And there you go. The result looks like this: [tɝˈisə oʊˈkɔnɝ]
Further reading
If you are intrigued by und-fonipa
and want to learn way more about BCP 47 language tags, r12a’s excellent Choosing a Language Tag should not be missed. If you want to learn more about what it takes to make a tool like IPA Reader, Katie Linero wrote all about it in Pronouncing Things with Amazon’s Polly.
Notes
- I didn’t pick this example arbitrarily. How someone pronounces their name is important. We should all make an effort to pronounce others’ names as they wish them to be pronounced. ↩
- In my mild Eastern New England English tempered by over twenty years of close contact with Western American English. ↩
- Some people can, and do, and it’s simultaneously almost magical and kinda creepy. For instance, opera singers are often able to read IPA so they can sing in languages they don’t read or speak. (Even outside of browser land, opera did it first! 🤣) ↩