As most of the static content is coded in your HTML pages, one way to do this is figuring out user’s context and display him specific HTML page accordingly. That means maintaining different HTML pages for each language you want to support for your web application. This approach is little difficult because generally we get changes very frequently on HTML pages so for maintaining it you also need to make changes in rest of HTML files for other languages. This requires testing for all languages as HTML files will also have some functional code with it and it may break for some languages while making changes.

We tried to solve this problem in slightly different manner. We tried to separate the display strings from HTML controls and tried to replace them with translations by figuring out the user’s language dynamically. In this way we have only one HTML page to maintain but we do have multiple resource files for language translations which keeps all static display strings translated for a certain language. As we need to do it on client side these resource files are basically Java script files having JSON objects with key and values. Keys are used to retrieve the display string value and replaced on HTML page. Following are the steps while loading the HTML page:

• Very first included javascript after library javascripts is i18n.js on the page.
• i18n.js tries to load language from a cookie value, if it is not set then tries to get language setting of user from server using an Ajax request.
• Once language is known, it downloads the translated javascript file from server e.g. if user language is French i.e. fr, it will load javascript file from http://server/contextpath/js/lang/’ + _language + ‘/’ + getPageName() + ‘.js’.
• All translated Java script files should reside in respective language folders and their names should match the page name i.e. the HTML page name so that a generic code can be written to retrieve correct translated Java script file.
• In case there are some common strings used for all pages in web application, a common file _common.js can be created per language and can be downloaded along with page specific js.
• Once you have all the resource ready. replace all display string placeholders from HTML page so that page can be viewed in user’s language.
• Any other display message like Success and warning messages or any other content which is not the part of HTML page but getting generated dynamically using Java script should use the translated file to retrieve values against keys and display the translated text.

Question is how to replace display strings in HTML page. Here is the way you should write your HTML page so that you can replace strings according to the language.

• Use span tag to enclose all Strings used on page as labels, texts etc. Have an id of each span and this id will be used to replace the language text for that span tag.
• For controls like Select boxes and input tags use below code to replace texts
• Use following geti18N() function to get translated text for the page while making dynamic strings

<span id="mylabel.id" class="i18n"></span>
<input type="button" id="form.submit.button" name="form.submit.button" class="i18n"></input>
<select id="someSelect" class="i18n">
    <option id="select.option1" value="1"></option>
    <option id="select.option2" value="2"></option>
</select>

function translate() {
	if (_translator) {
		$("span.i18n").each( function (i) {
			$(this).html(_translator[this.id]);
		});
		$("input.i18n").each( function (i) {
			$(this).val(_translator[this.id]);
		});
		$("select.i18n").each( function (i) {
			var opts = $(this)[0].options;
			if (opts)
				for(var i=0; i<opts.length; i++) {
					opts[i].text = _translator[opts[i].id];
				}
		});
	}
}

You can see in the function above that class is used to for replacing translations in HTML file. Here _translator is the JSON object which is already loaded with translations as described earlier. Here is the example of translation file

{
  "key":"value",
  "mylabel.id":"My Label",
  "form.submit.button":"Submit",
  "select.option1":"Option 1",
  "select.option2":"Option 2"
}

For all dynamic Strings which are required while your getting success or error from server, you can use following function to get translated string from _translator object

function getI18N(key) {
        var s = '';
	if(_translator[key]) {
		s = _translator[key];
	}
       return s;
}

Please post comments if you find it can be improved. Thanks

Try it your self.

Many applications solve this by asking users their timezone at the time of registration and display part is more or less solved in this way. Most of the time these applications ask about your country and figure out by themselves about the timezone but there are some countries which are having multiple timezones and in that case time zone offset is used in GMT+- hh:mm format.

Problem arises when you also need to support the day light saving time. And it becomes more important when you need to do more than just displaying few values to the user like contacting certain people of certain timezone in certain time range.

There are ways to do support all different timezones with day light saving time and actually supported in many languages/platforms like Java and .Net. This is implemented using Zone info Database or Olsen Database

Mysql also provides this functionality but not in very standard way and probably that is the reason for non-popularity of this function. Another reason is that it requires some extra arrangements to use this function i.e. populating some of the timezone tables in mysql schema.

Here is the usage of this function:

1. SELECT CONVERT_TZ('2004-01-01 12:00:00','GMT','MET');

2. SELECT CONVERT_TZ(UTC_TIMESTAMP(),'GMT','MST');

Before using this function, just make sure that you have populated some of the timezone tables in mysql schema.

a. time_zone
b. time_zone_leap_second
c. time_zone_name
d. time_zone_transition
e. time_zone_transition_type

You can get these tables at http://dev.mysql.com/downloads/timezones.html and see more information about MySql timezone support at http://dev.mysql.com/doc/refman/5.0/en/time-zone-support.html

Here is an example of this function with the use case, suppose you want to send an e-mail to the user of your application on his birthday and users belong to multiple timezones having day light saving time. If you have following information , you can actually greet your user for his birthday as soon as date changes to his B’Day.

You need to run a thread every 5 minutes to check if any of your users have birthday.

a. user’s timezone information
b. user’s birth date.

SELECT DATE(CONVERT_TZ(UTC_TIMESTAMP(),'GMT','users-time-zone'));

if result is equal to the user’s birth date, you can send him B’Day wishes.

Take an example of website who sells some goods and take orders online. If this company can take orders for multiple countries, it will be good to have product details in different languages on its website. It will make interaction with its website easy for people from different countries and different languages.

Google provides some very good tools for translation. Visit http://translate.google.com and try some general purpose language tools.

1. Translation of Text
2. Translation of a web page

3. Translated search
4. Dictionary (French -> English)
5. Google Translate widget for your website.

You can use these tools

1. to Translate English to French
2. to Translate English to German
3. to Translate English to Italian

and vice versa, but exactly who many pairs are supported by Google?

What languages can be translated?

Currently, Google offers translations between the following languages:

* Arabic
* Bulgarian
* Chinese (Simplified)
* Chinese (Traditional)
* Croatian
* Czech
* Danish
* Dutch
* Finnish
* French
* German
* Greek
* Hindi
* Italian
* Korean
* Japanese
* Norwegian
* Polish
* Romanian
* Russian
* Spanish
* Swedish
* Portuguese

I am not very sure of the quality of translation but what i observed is if you are using less pronouns in your sentences, Google does more exact translation.

Google also provide Ajax API for Language translation, I will do another post for that.

Happy Translation!