I'm developing a HTML5 application that uses jQuery. I want to make it multi language: detecting user language and changing all literals to user's language.

I think that one approach is to use one HTML file for each language supported, but it is a waste of space.

Another approach could be use jQuery to change all literals to user's language. But I'm not sure how to do this.

What do you think? Is there a better approach?

UPDATE:

I've forget it to say that I have some literals inside JavaScript too.

I'm developing a HTML5 application that uses jQuery. I want to make it multi language: detecting user language and changing all literals to user's language.

I think that one approach is to use one HTML file for each language supported, but it is a waste of space.

Another approach could be use jQuery to change all literals to user's language. But I'm not sure how to do this.

What do you think? Is there a better approach?

UPDATE:

I've forget it to say that I have some literals inside JavaScript too.

• javascript
• jquery
• html
• internationalization
• multilingual

• I'd go with a server-side solution - what server-side tools do you have access to? (And how do you plan to "detect" the user's language?) – nnnnnn Commented Sep 2, 2011 at 6:54
• 1 Please make sure the user can change the language. I absolutely HATE when my webmailer interface change to whatever language is spoken in whatever internet cafe I am in. Possibly even another language than the one spoken in the country I am in. – mplungjan Commented Sep 2, 2011 at 7:24
• And please use the HTTP headers for the default language, not some geolocation information for the ip. – ThiefMaster Commented Sep 2, 2011 at 8:25
• 1 You might have a look at i18next. or try any other lib for this. – jamuhl Commented Oct 19, 2012 at 13:14

4 Answers 4

Coulnd't you do some sort of server-side query to the user's language and then load the appropriate text automatically? Maybe even a CMS is appropriate here.

For all the Javascript code, I would use String literals as a variable. So you can load a different language file appropriate to the user language.

File english.js:

var messages_siteA1 = "This is an alert.";
var messages_siteA2 = "...";
// ...

File german.js:

var messages_siteA1 = "Dies ist eine Warnung.";
var messages_siteA2 = "...";
// ...

And in your Javascript:

alert(messages_siteA1);

Or am I missing the point here? ;)

In the HTML5 Demo of my, the "HTML5 Word Clouds",

http://timc.idv.tw/wordcloud/

(source code can be found at https://github./timdream/wordcloud)

I wrote separate HTML for different languages, and includes a single set of Javascript files. For literal strings with in the script, I collect them into an object (named T) and put it into <script> block of each HTML files.

This give me the flexibility to customize pages for each language; as you can see, I listed CNN as example in English version, but list other sources in the Chinese version.

If you absolutely have to do it at client-side, how about using a json or xml file to store your translations? This avoids the trouble of creating copies of the same page. For example, in your json. you'd have "wele_eng": "wele" and "wele_fr": "bienvenue", etc. Then you load the appropriate one using javascript, as in, get the variables like this: blablabla=["wele_"+language]

Or, if you want even less work, your wele text's div will have the id "wele", then your javascript gets the id and add the appropriate content.

It mostly depends on how dynamic or static your pages are: If they contain much text, than it will be easier to duplicate the page for each language. In this case it is very important to carefully isolate HTML from CSS and scripts. All CSS and scripts should be stored in separate pages, in order to avoid having to update all translations whnever you update a style or a script.

OTOH, if it is mostly dynamic, than it makes sense to replace text snippets by their translation when creating the page. But I wouldn't do the text replacement client-side (jQuery). It's a server-side job.

Edit: If you have javascript literals, you should then of course keep them side by side with the HTML, either in the HTML file or in a separate .js file. But it remains up to the server to deliver the contents in the correct language.