Pr�t � lire

You are here: irt.org | Articles | Dynamic HTML (DHTML) | Pr�t � lire

Published on: Saturday 2nd May 1998 By: Martin Webb

Introduction
Trapping the browsers language
Redirecting the visitor
Special Effects
Working Examples

Introduction

Have you ever wanted to display a different page in another language for non-English visitors to your site? This article explains how, in Netscape Navigator 4 and Microsoft Internet Explorer 4, you can trap which language the visitors browser is using and then show them either a pre-translated version of your page. For Microsoft Internet Explorer 4 this article also shows how to use page transitions to disolve a document into the translated document.

Why Prêt à lire? Well its a play on words: Prêt à Porter meaning Ready to Wear, Prêt à lire meaning Ready to Read.

Trapping the browsers language

The following JavaScript 1.2 code will check the value of the navigator objects language property in NN4 and the browserLanguage property in MSIE4:

// The following only works in JavaScript 1.2 or greater:
<SCRIPT LANGUAGE="JavaScript1.2"><!--
if (navigator.appName == 'Netscape')
    var language = navigator.language;
else
    var language = navigator.browserLanguage;

var code = language.substring(0,2);
//--></SCRIPT>

As can be seen from the list of language values there are several subsets of each main language. To avoid too much work, we can restrict ourselves to the main set of languages by extracting the first two characters of the language variable using the substring() method.

Redirecting the visitor

The following JavaScript code, detects the language as above, but then restricts the languages it supports to just French ('fr'), German ('de'), Italian ('it'), Spanish ('es') and Portuguese ('pt'). Any other languages found are ignored and English ('en') is used instead.

The showpage() function accepts the language code and opens up a new window centered in the middle of the screen, with the required pre-translated document loaded, where the filenames of the pre-translated documents are msg-en.htm, msg-fr.hmtl, msg-de.htm, msg-it.htm, msg-es.htm and msg-pt.htm:

<SCRIPT LANGUAGE="JavaScript1.2"><!--
// The following only works in JavaScript 1.2 or greater:
function showpage(code) {
    var Y = (screen.height - 400)/2;
    var X = (screen.width - 600)/2;
    msgWindow = window.open('','targetName2','height=400,width=600,screenX='+X+',screenY='+Y+',left='+X+',top='+Y);
    msgWindow.location.href = 'msg-' + code + '.htm';
}

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

var code = language.substring(0,2);

if (code == 'fr' || code == 'de' || code == 'it' || code == 'es' || code == 'pt')
    showpage(code);
else
    showpage('en');
//--></SCRIPT>

Special Effects

How about displaying the page in English, and before the visitors eyes fading out the English version and fading in the translated version? Impossible? Not with Microsoft Internet Explorer 4 and page transitions. Placing the following META tags in the head of your documents you can fade in the document as it loads (page-Enter) and fade out the document as it unloads (page-Exit):

<HEAD>
<META http-equiv="page-Enter" CONTENT="RevealTrans(Duration=4,Transition=12)">
<META http-equiv="page-Exit" CONTENT="RevealTrans(Duration=4,Transition=12)">
</HEAD>

The revealTrans() procedure requires two parameters, Duration the number of seconds that the transition should last, and Transition the type of transition required, there are 23 types, type 12 being Random Dissolve. Now all we need is a mechanism to display the English document then after a small delay to display the translated document.

The following JavaScript code will display the english.htm document in a centered popup window, but only if the browsers language is French, German, Spanish, Italian or Portuguese:

<SCRIPT LANGUAGE="JavaScript1.2"><!--
// The following only works in JavaScript 1.2 or greater:
function showpage() {
    var Y = (screen.height - 400)/2;
    var X = (screen.width - 600)/2;
    msgWindow = window.open('','targetName2','height=400,width=600,screenX='+X+',screenY='+Y+',left='+X+',top='+Y);
    msgWindow.location.href = 'english.htm';
}

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

var code = language.substring(0,2);

if (code == 'fr' || code == 'de' || code == 'it' || code == 'es' || code == 'pt')
    showpage();
//--></SCRIPT>

The english.htm document displays the English text, and then sets a timer using setTimeout() to load the required foreign language version after 5 seconds:

<HTML>
<HEAD>

<META http-equiv="page-Enter" CONTENT="RevealTrans(Duration=4,Transition=12)">
<META http-equiv="page-Exit" CONTENT="RevealTrans(Duration=4,Transition=12)">

</HEAD>

<BODY><CENTER>

<H1>Welcome to the JavaScript '<EM>No Content</EM>' Web Site.</H1>
<P>This page has detected that your browser is not using English.  The remainder of the Web Site is in English, however you may be able to use the AltaVista Translation Service to translate either a complete page or portions of text.
<P>The AltaVista Translation Service can be located at <A HREF='http://babelfish.altavista.digital.com'>http://babelfish.altavista.digital.com</A>
<P>I hope you find this site useful.

<P>
<A HREF="msg-fr.htm">French</A>
<A HREF="msg-de.htm">German</A>
<A HREF="msg-it.htm">Italian</A>
<A HREF="msg-pt.htm">Portuguese</A>
<A HREF="msg-es.htm">Spanish</A>

<SCRIPT LANGUAGE="JavaScript1.2"><!--
// The following only works in JavaScript 1.2 or greater:
if (navigator.appName == 'Netscape')
    var language = navigator.language;
else
    var language = navigator.browserLanguage;

var code = language.substring(0,2);

if (code == 'fr' || code == 'de' || code == 'it' || code == 'es' || code == 'pt')
    setTimeout("location.href = 'msg-' + code + '.htm'",5000);

//--></SCRIPT>

</CENTER></BODY>
</HTML>

Working Examples

Why not try out the two working examples Redirecting the visitor and Special Effects - both of these working examples simulates a french browser.

View the profile on Martin Webb and the list of other Articles by Martin Webb.

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 21st December 2007. Maintained by: Martin Webb
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.