×
Namespaces

Variants
Actions

How to include language translation for a web page

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: Maveric (14 Dec 2010)
Last edited: hamishwillee (31 Jul 2012)

Contents

Introduction

In this article we will check how to add page translation possibility for the user on your web page. To achieve this the Google Translation API will be called.

This example let's the user to select either by the language flag or from drop-down box, into which language the page should be translated via the Google JS Language API.

Prerequisites

+Web browser +Code editor +Web site (or blog) that the page resides for translation

Example code

For this example we will create one html file with JavaScript included. If you have an existing web page you could edit it directly, on your host server.

We will start with defining two div sections for the html code.

Firstly, we will be needing one "div" section that will contain the actual content to be translated. This "div id" in our example would be called "story".

 <div id="story"></div>

Secondly, the translated content page content "div" section is required and we call it in this example as "translation".

 <div id="translation"></div>

After the "div" sections have been included, we are going to add the "head" section with including first the Google JS API.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

After this we continue with our actual JavaScript code part. Please check the comments within the code for details. As this example uses the Google loader, please be sure to check the general information of use for it here : http://code.google.com/intl/fi-FI/apis/loader/

<script type="text/javascript">
// Google AJAX API initialization and loading
google.load("language", "1");
 
function changeLanguage(lang)
{
var source = document.getElementById("story").innerHTML;
var len = content.length;
var words = 500;
var sourcelang = "en";
// Limitation is 500 characters for a translation request
 
document.getElementById("translation").innerHTML = "";
 
for(i=0; i<=(len/words); i++) {
google.language.translate (source.substr(i*words, words),
"en", lang, function (result) {
if (!result.error) {
document.getElementById("translation").innerHTML = document.getElementById("translation").innerHTML + result.translation;
} }); }
 
// Set the div invisible containing the original language
document.getElementById("story").style.display = 'none';
return false;
}
 
// Rollback original language
 
function defaultLanguage() {
document.getElementById("translation").style.display='none';
document.getElementById("story").style.display = 'block';
return false;
}
 
</script>

The following part adds the language selection drop down menu.

<a href="#" onclick="defaultLanguage();">Switch to English</a>
<select onchange="changeLanguage(this.options[this.selectedIndex].value);">
<option value="de">deutsch</option>
<option value="pt">português</option>
<option value="fr">français</option>
<option value="ja">japanese</option>
<option value="ar">arabic</option>
<option value="it">italiano</option>
<option value="ru">russian</option>
<option value="po">polski</option>
<option value="zh-CN">chinese</option>
<option value="es">spanish</option>
<option value="ko">korean</option>
<option value="nl">dutch</option>
<option value="hi">hindi</option>
<option value="el">english</option>
<option value="ro">româna(</option>
</select>

Tested on

Google Chrome, Mozilla Firefox 3.6.13

This page was last modified on 31 July 2012, at 10:26.
161 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×