<html>
<head>
<title>Test document bilingue pour Tara</title>
<style type="text/css">
body.en *[lang]:not(:lang(en)) {
display: none;
}
body.fr *[lang]:not(:lang(fr)) {
display: none;
}
</style>
<script type="text/javascript">
function toggleDocumentLanguage(l) {
var bodyElt = document.getElementById('docContent');
if (l.length)
bodyElt.setAttribute('class', l);
else
bodyElt.removeAttribute('class');
}
</script>
</head>
<body id="docContent">
<p>
<a href="javascript:toggleDocumentLanguage('fr');">Français</a>
<a href="javascript:toggleDocumentLanguage('en');">English</a>
<a href="javascript:toggleDocumentLanguage('');">Bilingue/Bilingual</a>
</p>
<p lang="en">I speak english</p>
<p lang="fr">et aussi français!</p>
<p lang="en">but I also speak a few other languages</p>
<p lang="fr">et la liste est trop longue pour ce blog</p>
<hr>
<address></Daniel></address>
</body>
</html>
Inutile de te dire que cela marche parfaitement dans Mozilla (c'est bibi qui a implémenté :not()
)... Lorsque la pseudo-classe :target
sera implémentée, on pourra même faire ça sans Javascript du tout. On en reparlera à ce moment-là, je laisse les lecteurs creuser la solution potentielle tous seuls en attendant.
This has absolutely no link with the title but my wife met me at our AOLTW building today and we had lunch at La Criée, a seafood restaurant in the neighbourhood.
Service was bad, food was bad, the room was ugly, restrooms were dirty. Berk.
- Hope you enjoyed your meal, sir.
- Not at all. But don't worry, your did your best. Your best is just too far away from my normal expectations, goodbye.
Ah, David... Don't let this bit of anger hide the joy you had to work for my employer during all these years. As you told me, it's not the company it used to be ; ok, but it's still a place where you can be at the same time an employee, payed to implement what's supposed to be good for the company according to the wishes of the Management, and an independant contributor to Mozilla, doing what you propose to do for the highest benefit of all.
My employer, your former employer, is the seventh company I work for in my professionnal life. And even if does not always work as it should be working, it's still a very cool place, where one can express himself/herself almost without limit.
Whatever are the mistakes, my employer is still funding this open-source giant project and it's still a real joy, at least for me, to be here. You have no idea what means "a software company" here, on the Old Continent.
So Tara was the first one to put those little flags everywhere, indicating the languages of a document targeted by a link. But she's still putting images into her documents, by hand, link by link. Ok, you are sure that it works in aall browsers but that's still hard to maintain, and to tell the truth, an ugly hack.
Then Karl, le tombeur de ces dames du W3C et d'ailleurs, discovered that CSS can do the same giving life back to an HTML attribute almost forgotten : hreflang. It indicates the language of the target of the link. Here's, in substance, what Karl wrote :
a[hreflang="fr-ca-qc"] { background-image: url(flag_quebec.gif); background-repeat: no-repeat; background-position: top right; }
Hum. That was not very nice. That's exactly the kind of ugly hack we are using in Composer's AllTags mode and I've always hated it. So I proposed Tara and Karl to move to this :
a[hreflang]:after { content: url(flag_quebec.gif); }
which is conceptually much nicer. And then, Dominique Hazaël-Massieux made a good point : we should use language names or identifiers but certainly not flags. So here's my last proposal, and let the power of CSS be.
a[hreflang]:after { content: " [" attr(hreflang) "] "; color: #cc9933; font-weight: bold; }