Previously, we wrote about getting the browser default language in PHP. But so what? What can you do with it? In this article, we’ll use the previous code, and expand on it to create a page which can be automatically translated into many languages — with the help of the Google translator.
The method is simple. Create a drop down box and fill it with the names of languages you want to translate to, then call Google’s translator with the selected language. Not really that hard at all, if you take it piece by piece.
But how good is Google’s translator? If you understand multiple languages, check it out for yourself. Naturally, it’s not as good as a manual translation, but when faced with a choice of nothing at all, Google’s machine translation isn’t really so bad.
But how can a person know you offer such a service, if they can’t read the message about selecting alternative languages? That’s where the previous detection of the browser’s default language comes in, as we’ll create a message in whatever the default language is, prompting them to choose a translation. Thus, even if they can’t read anything on your site, they at least can read a prompt (in their native language) allowing them to translate your page into their language.
We’ll tackle the job in several steps.
- Create a list of drop down languages.
- Create javascript event on the drop down list so when it changes, automatic translation is performed.
- Tie it all up to load when the page loads, using unobtrusive javascript.
The Code
The following is BSD-Licensed Javascript and PHP code.
First, create a standard HTML option box, with one snippet of PHP code to get a prompt in whatever the users default language is.
<select id="gtrans">
<option><?php print getLanguage();?></option>
<option value="fr">Français (French)</option>
<option value="de">Deutsch (German)</option>
<option value="el">Ελληνικά (Greek)</option>
<option value="iw">עברית (Hebrew)</option>
<option value="it">Italiano (Italian)</option>
<option value="ru">Русский (Russian)</option>
<option value="es">Español (Spanish)</option>
<option value="vi">Việt (Vietnamese)</option>
</select>
The getLanguage() code is simple, and guarantees even if a user can’t read anything on your page, they can at least read a prompt for translation. It uses the getDefaultLanguage() from our previous article on PHP browser language detection, so we won’t discuss it further here — you can refer to the previous article for more.
function getLanguage() {
# Drop any region from the default language.
# i.e. en-us becomes just en.
$lang = getDefaultLanguage();
$x = explode("-",$lang);
switch ($x[0]) {
case "de": return "Wählen Sie eine Sprache";
case "el": return "Επιλέξτε Γλώσσα";
case "es": return "Seleccione Idioma";
case "fr": return "Sélection de la langue";
case "it": return "Seleziona Lingua";
case "iw": return "בחר שפה";
case "ru": return "Выбор языка";
case "vi": return "Chọn ngôn ngữ";
default: return "Select Language";
}
}
So now we’ve got a list of languages, along with a prompt in the users own language so they can read the prompt, even if they can’t read the rest of the page. We now need to attach a javascript onchange event to the box, and create the code to call Google’s translator when the language selection changes.
<script type="text/javascript">
function init() {
var e = document.getElementById("gtrans");
if (e)
e.onchange = function() {
gtranslate(this.options[this.selectedIndex].value)
};
}
//
function gtranslate(lang) {
var url = "http://translate.google.com/translate?u=" +
encodeURIComponent(location.host + location.pathname) +
"&hl=en&ie=UTF-8&sl=en&tl=" + lang;
//window.location opens in current window, window.open is new window
//window.location = url;
window.open(url);
}
//Be careful if you integrate this into other code so it won't drop the
// other code's window.onload event.
window.onload = init;
</script>
In the window.onload event, we add an event handler to the combo box, and create the event handler to call Google’s translator.
And that’s it! Note: Your web server has to be a server available to Google for the translation to work, as Google will retrieve the page in order to translate it.
Caveats
If a user has javascript disabled, the box will appear, but won’t work. To solve this, you can use DOM methods and create the drop down entirely in javascript, thus if a user has javascript disabled, they’ll see nothing. That solution is just straight javascript, and isn’t included here as it would complicate the solution. It’s left to the interested reader.
Be sure to use UTF-8 as your character encoding. If you’re not using UTF-8 right now, convert all your documents to it — you’ll be glad you did later.
Second, if you’re sending different language-specific content at the same URL, be sure to send the appropriate Vary header. If you don’t, intermediate proxy caches might be confused and serve the wrong language to some people. To do that, just use the following first in your PHP code: header("Vary: Accept-Language"). But be warned Internet Explorer has some bugs with the Vary header you should be aware of.
For more on q-values, IE bugs, and more explanation on the regular expressions and headers in general, read our previous article Serving XHTML With the Correct MIMETYPE for discussions of similar issues. You are serving your XHTML correctly as application/xhtml+xml aren’t you?
References
Like this article? Stay up to date with new articles and content. It’s free, and we won’t sell your information.
SIGN UP TODAY by entering your primary email address below to guarantee you won’t miss anything.
