Need to translate a portion of your page to another language quickly and easily? This method uses simple javascript and CSS to translate without a request to the server.
This is a dirty trick
If your site is multilingual it makes sense to divide the content into separate pages instead of trying to pack all the translations into a single page and switch among them using CSS as I’m about to do here. (Apache provides automatic language negotiation. It can serve your language-specific pages to users based on their browsers’ requests.) However, in certain cases where only a small part of a page needs translation the following solution might be appropriate.
A portion of the content below can be switched among four languages: English, Spanish, French, and German. (Unfortunately I can’t switch among those four languages, so my translations are by Babelfish.) Each link in the language-selection menu executes a javascript funtion called switchlanguage() that takes a two-character language code as an argument. The switchlanguage() function turns off each stylesheet that has a two-character title that doesn’t match the language code that’s passed in. This is a somewhat primitive approach, but it’s suitable for the scope of this example.
Did I say language switching with CSS?
This is really language switching via CSS and javascript. Javascript is pushing the button and CSS is doing all the work.
It only goes so far
I’ve used lang="xx" in the div tags to specify which language each div contains, but I’ve already specified the page’s language in the DOCTYPE and again in the <html> tag. Therefore, there are limitations to the character sets that can be displayed within the divs. Japanese, for example, wouldn’t display properly and I’m not sure how to fix that.
Example
The body of this page is available in four languages:
Language is ever-changing
This text is in English.
How to skin a cat
Skinning a cat is more difficult than it sounds. First, the presiding legal authority must grant a license. Second, a suitable implement must be chosen. Third, a great deal of bandages must be made ready — not for the cat, but for the person who wishes to skin it.
La lengua siempre-esta’ cambiando
Este texto está en español.
Cómo pelar un gato
Pelar un gato es más difícil que suena. Primero, la autoridad legal de presidencia debe conceder una licencia. En segundo lugar, un instrumento conveniente debe ser elegido. Tercero, los vendajes muchos deben ser hechos listos (no para el gato, sino para la persona que desea pelarlo).
La langue jamais-change
Ce texte est en français.
Comment peler un chat
Peler un chat est plus difficile qu’il retentit. D’abord, l’autorité légale de présidence doit accorder un permis. En second lieu, un instrument approprié doit être choisi. Troisièmement, beaucoup de bandages doivent être préparés (pas pour le chat, mais pour la personne qui souhaite le peler).
Sprache überhaupt-ändert
Dieser Text ist auf Deutsch.
Wie man eine Katze enthäutet
Eine Katze zu enthäuten ist schwieriger, als es klingt. Zuerst muß die vorsitzende zugelassene Berechtigung eine Lizenz bewilligen. Zweitens muß ein verwendbares Werkzeug gewählt werden. Drittens müssen viele Verbände bereit gebildet werden (nicht für die Katze, aber für die Person, die sie enthäuten möchte).
The javascript
function switchlanguage(language) {
for(i = 0; i < document.styleSheets.length; i++) {
sheet = document.styleSheets.item(i);
if(sheet.title.length == 2)
if(sheet.title == language) sheet.disabled = false;
else sheet.disabled = true;
}
}