lang
During my first post about France I decided that I wanted to make all the foreign phrases in it italic, just as one theoretically should. I’m also a fan of semantic XHTML, so in a fit of pedantic semantics, I attempted the solution which best fitted my own presciption of semanticity and valid XHTML-ness.
<i> tags didn’t satisfy, as they are smelly presentation-based tags and not semantic at all. <em>, the usual semantic way to get italics, is doubly wrong because you don’t want to emphasise the text, meaning that screen readers would change pitch as saying it, you want them to change accent.
I eventually settled on putting other-lingual chunks between <span> tags, adding an appropriate lang attribute with value, and a title attribute with language and translation in the first instance of the foreign phrase.
CSS 2 is kind enough to provide a technology called “selectors” which allows one to single out bits of a document not only of a given language, but of a language which isn’t the one habitually used on a web page, and apply the usual formatting rules to it.
Thus, for anyone who’d rather not trawl Google and invent this themselves, here is my solution:
- Make sure your entire XHTML document has a language defined. If you don’t, you could find the whole thing turning italic on you. Your first tag should look something like:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> - Add the following to your stylesheet:
/*make any non-English bits italic*/ :not(:lang(en)) { font-style: italic; } - Mark up foreign text comme ceci:
<span lang="fr" title="French: like this">comme ceci</span>
This doesn’t work in Internet Explorer as yet, as they’re far too lazy to implement CSS selectors over at Microsoft. However, in decent browsers like Firefox it does, and it degrades gracefully in that while not italicising, IE should at least realise that the text is foreign and provide the translation on hovering the mouse over.
I downloaded a Firefox text-to-speech extention, FoxyVoice, to test out my exciting, new-found multilingual taggery. However, it seems to only support US English at the moment. However, regardless of whether or not you understood the technical nerdery of the above post, I would recommend downloading this extension for sheer amusement. Its rendering of “6′6″ Ivo” as “six single quote six Eevo” in beautiful monotonic American is worth its weight in kibibytes.
September 19th, 2005 at 09:18
Yup; using property selectors is exactly the right way to do things, but yup, it doesn’t work right in IE. However,
*[lang=fr] {
…
}
Might work in IE (although possibly only IE7). Not quite the same effect, because it doesn’t pick up on *all* foreign text, but a step forward.