Multi language support

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.

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.com/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 "welcome_eng": "welcome" and "welcome_fr": "bienvenue", etc. Then you load the appropriate one using javascript, as in, get the variables like this: blablabla=["welcome_"+language]

Or, if you want even less work, your welcome text's div will have the id "welcome", 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.