Vol. 2, No. 5
How To Deal With Guests From Foreign Lands

No no no! They come in peace! Put away that club! The first step is to establish communication. Let's see if we can figure out what language the aliens speak. Hmm, sounds like French.

If your site is in English only, you're alienating a huge percentage of the Web's population, for whom English is a second or third language at best. Wouldn't it be terrific (and wouldn't you improve your traffic drastically) if you had a version of your site in French, and one in Thai, and one in Basque, and one in Inuktitut, et cetera?

Well, presenting all those pages is easy, it turns out. (The hard part is the translation.) It's simple to have a bunch of different directories, one for each language, and each containing the same pages, except in different tongues. If you prefer, you can keep your old directory structure intact, and just give the different pages different names: index-en.html for the English index page, index-fr.html for the French index page, index-la.html for the Latin index page, und so weiter. ISO 639, the specification for the use of two-letter codes to represent languages in HTML, lists almost 150 different languages. For practical reasons, you'll probably want to pick just a handful to use on your site.

Okay, you've created the parallel pages in different languages. What now? How do you make sure everybody gets sorted to their proper place? One popular strategy is to place little flag icons on your site, so a visitor, confronted with a page of incomprehensible English, can at least click that little Italian flag and be taken to a page she understands.

But flags raise all kinds of geopolitical issues, and they require an annoying extra click from each visitor. There's a simpler way ... through the miracle of JavaScript!

We've used JavaScript in the past to take a look at who's visiting our sites. We can do the same to solve this problem. JavaScript's navigator object has a property that tells us what language our visitor is surfing in. Because nothing's ever easy, though, the property has a different name in Netscape than it does in Explorer. For Netscape, it's navigator.language; for IE, it's navigator.browserLanguage. Sigh. So we need a couple of extra lines of code to get that data:

if (navigator.appName == 'Netscape'
   var lang = navigator.language;
else
   var lang = navigator.browserLanguage;

That puts the code for language the browser's using into the variable "lang". Now, this property includes some subdivisions: "en-us" means U.S. English, "en-gb" means British English, and such. That's all very nice, but you don't want to code up a different page for different species of English, do you? Replacing "lorry" with "truck," "crisps" with "chips," and so forth? More trouble than it's worth. So we'll just take the first two characters of the variable:

var lang = lang.substring(0,2);

Now we need a routine that will offer up the correct page. If you name your directories after the languages you support, it can be as simple as this:

window.location = './' + lang + '/index.html';

Which takes them to the index page in the directory named after the language we've detected they're using. Since we don't want to have to support 150 languages, though, we should make sure that users who are surfing in a language we don't support just get sent to the English site. So:

if (!(lang == 'fr' || lang == 'es' || lang == 'it' || lang == 'de')
   lang = "en";<BR> window.location = './' + lang + '/index.html';

That makes sure that if the language detected isn't French, Spanish, Italian, or German, it gets reset to English.

Putting it all together, we get:

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
if (navigator.appName == 'Netscape') {
   var lang = navigator.language;
   }
else {
   var lang = navigator.browserLanguage;
   }
var lang = lang.substring(0,2);
if (!(lang == 'fr' || lang == 'es' || lang == 'it' || lang == 'de')) {
   lang = 'en';
   }
window.location = './' + lang + '/index.html';
//-->
</SCRIPT>

If all goes right, that code should detect what language your visitors are using, and send them to a special directory just for them, where all the pages are written in that language. Once they're in the directory, of course, they don't need to be redirected any further. All the links will take them to other pages in the directory; i.e., in their language.

HINTS, POINTERS, AND TIPS O' THE TRADE :

It's nice to provide some sort of escape route for users, if they get sent to the German end of the site by some freak accident, so they can choose a language they prefer.

Remember that some people don't have JavaScript. Include a way for them to choose a language: otherwise they'll just be staring at a blank, nonfunctional page while everybody else gets redirected.

Don't forget to indicate the language each page is written in, with a META tag.

After it snows it's a really good opportunity to spot-evaluate your home's insulation. If the snow on your roof melts right away, it means too much heat is escaping through the roof.

RESOURCES:

All the ISO 639 two-letter language codes:
http://www.oasis-open.org/cover/iso639a.html

Altavista's automatic translator:
http://world.altavista.com

A good example of language redirection:
http://www.mandrake.com

Handcrafted Archive