HTML5 multilingual application

Question

I am developing an HTML5 application with CSS3 and jQuery.

I have text that I want to display in the user's language. Do you know how I can do this?

This app will work on Blackberry Playbook and other mobile devices.

I do not know how to get the user language of the OS or where should I put localization strings, etc.

Any clue?

Answer 1

I store a localized string in JS files (1 for each supported language). Ex.

string-en.js:

MyApp.STR = {"Hi":"Hi","By":"By", etc.}; 

string-fr.js:

  MyApp.STR = {"Hi":"Salut","By":"Par", etc.}; 

And at startup, I upload the correct file relative to the navigator language:

  loadLocalizedString: function(langParam/*optional*/) { var language = window.navigator.language, lang; console.log('loadLocalizedString with Navigator Language: ' + language); if (!langParam) { //Try to guess the best suited language if(language) { lang = language.substring(0,2); } else { lang = 'en'; } if($.inArray(lang, this.SUPPORTED_LANGUAGE) <= -1) { lang = 'en';//If the language is not available : english by default } } else { lang = langParam; } console.log('language: ' + lang); this.loadString('lib/string-'+lang+'.js'); }, SUPPORTED_LANGUAGE : ["en", "fr", "es", "it"], loadString:function(fileName) { try { $.ajaxSetup({async: false}); $.getScript(fileName);//We don't use the async callback, because we need the translation in the next method $.ajaxSetup({async: true}); } catch (e) { console.error('Error while loading : ' + fileName); } } 

And use the localized string in the application:

  html = MyApp.STR.Hi+' '+userName+' !'; 

Answer 2

I would suggest trying to detect the browser language using Javascript. I see no direct way to detect it using HTML.

Here is the link that solves the problem:

Is there any way to detect OS language using javascript?