I am developing a mobile application with Phonegap and I need internationalization - display a html page in different languages. I do understand now that this is not a Phonegap issue - I have to internationalize the web application. <ul> <li>Does any framework support internationalization (e.g. jQuery Mobile)?</li> <li>Is it possible to use a template approach, e.g. use property files and template and generate the HTML during the build process?`</li> <li>If I use the approach from Bourbon (see in the answers), how can I switch the language per option setting?</li> </ul> Kind regards, Christian --- Edit -- Phonegap has a nice Globalization plugin since 2.2.0. It covers a lot of the i18n functionality. Check the docs http://docs.phonegap.com/en/edge/cordova_globalization_globalization.md.html#Globalization

I took an approach to this problem that allows others to contribute language translations for my application. Pros: <ul> <li>Uses "web-matured" libraries</li> <li>Crowd Sourced Translations</li> <li>No native hacking</li> <li>Uses templating</li> <li>Very easy to implement HTML/JS and easy to test</li> <li>Supports Language detection</li> <li>Supports Text Direction (BiDi)</li> <li>No Native dependencies at all so will work on Android/iOS/BB/WP yada yada..</li> <li>Testable in web browser</li> </ul> Cons: <ul> <li>Your project needs to be open source and fulfill TranslateWiki's requirements</li> <li>Slightly tricky to implement the commit to Gerrit if you come from a branch/merge world.</li> </ul> I used handlebars for templating and the html10n library to provide translation logic, translated strings come from community contributed json files. TranslateWiki provides the actual translations through the power of crowd-sourcing. Most of the heavy lifting on my implementation is done by TranslateWiki, a free and open source community service from the Wiki Media Foundation. Handlebars and the html10n library are powerful, built for the web and widely used. They prove to be extremely useful libraries for this implementation. No native code or plugins are required. index.html <pre class="prettyprint"><code><head> <script type="text/javascript" src="js/handlebars.js"></script> <script type="text/javascript" src="js/html10n.js"></script> <link rel="localizations" type="application/l10n+json" href="locales.json"> </head> <body> {{html10n "helloWorld"}} </body> </code></pre> locales.json <pre class="prettyprint"><code>{ "fr":"locales/fr.json", "en":"locales/en.json" } </code></pre> locales/en.json <pre class="prettyprint"><code>{ "en":{ "helloWorld":"Hello Cruel World" } } </code></pre> locales/fr.json <pre class="prettyprint"><code>{ "fr":{ "helloWorld":"Hello Baguette World" } } </code></pre> index.js <pre class="prettyprint"><code>Handlebars.registerHelper('html10n', function(str,a){ return (html10n != undefined ? html10n.get(str) : str); }); </code></pre> To switch between languages bring up your browser javascript console and type <pre class="prettyprint"><code>html10n.localize("fr"); </code></pre> Some additional logic is needed to do browser language detection, I use Etherpad's implementation to accomplish this. <pre class="prettyprint"><code>var language = document.cookie.match(/language=((\w{2,3})(-\w+)?)/); if(language) language = language[1]; html10n.bind('indexed', function() { html10n.localize([language, navigator.language, navigator.userLanguage, 'en']) }) html10n.bind('localized', function() { document.documentElement.lang = html10n.getLanguage() document.documentElement.dir = html10n.getDirection() // Then I display the index page using handlebars to render a template. }); </code></pre> That's it, a hack free recipe for rolling out i18n in your Cordova Application.

Phonegap/Cordova internationalization support

Tags:

I am developing a mobile application with Phonegap and I need internationalization - display a html page in different languages. I do understand now that this is not a Phonegap issue - I have to internationalize the web application.

Does any framework support internationalization (e.g. jQuery Mobile)?
Is it possible to use a template approach, e.g. use property files and template and generate the HTML during the build process?`
If I use the approach from Bourbon (see in the answers), how can I switch the language per option setting?

Kind regards, Christian

--- Edit --

Phonegap has a nice Globalization plugin since 2.2.0. It covers a lot of the i18n functionality. Check the docs http://docs.phonegap.com/en/edge/cordova_globalization_globalization.md.html#Globalization

841

asked Jan 16 '12 09:01

ChrLipp

1 Answers

I took an approach to this problem that allows others to contribute language translations for my application.

Pros:

Uses "web-matured" libraries
Crowd Sourced Translations
No native hacking
Uses templating
Very easy to implement HTML/JS and easy to test
Supports Language detection
Supports Text Direction (BiDi)
No Native dependencies at all so will work on Android/iOS/BB/WP yada yada..
Testable in web browser

Cons:

Your project needs to be open source and fulfill TranslateWiki's requirements
Slightly tricky to implement the commit to Gerrit if you come from a branch/merge world.

I used handlebars for templating and the html10n library to provide translation logic, translated strings come from community contributed json files.

TranslateWiki provides the actual translations through the power of crowd-sourcing. Most of the heavy lifting on my implementation is done by TranslateWiki, a free and open source community service from the Wiki Media Foundation.

Handlebars and the html10n library are powerful, built for the web and widely used. They prove to be extremely useful libraries for this implementation.

No native code or plugins are required.

index.html

<head>   <script type="text/javascript" src="js/handlebars.js"></script>   <script type="text/javascript" src="js/html10n.js"></script>   <link rel="localizations" type="application/l10n+json" href="locales.json"> </head> <body>     {{html10n "helloWorld"}} </body>

locales.json

{   "fr":"locales/fr.json",   "en":"locales/en.json" }

locales/en.json

{   "en":{     "helloWorld":"Hello Cruel World"   } }

locales/fr.json

{   "fr":{     "helloWorld":"Hello Baguette World"   } }

index.js

Handlebars.registerHelper('html10n', function(str,a){   return (html10n != undefined ? html10n.get(str) : str); });

To switch between languages bring up your browser javascript console and type

html10n.localize("fr");

Some additional logic is needed to do browser language detection, I use Etherpad's implementation to accomplish this.

var language = document.cookie.match(/language=((\w{2,3})(-\w+)?)/); if(language) language = language[1]; html10n.bind('indexed', function() {   html10n.localize([language, navigator.language, navigator.userLanguage, 'en']) }) html10n.bind('localized', function() {   document.documentElement.lang = html10n.getLanguage()   document.documentElement.dir = html10n.getDirection()   // Then I display the index page using handlebars to render a template. });

That's it, a hack free recipe for rolling out i18n in your Cordova Application.

answered Sep 27 '22 19:09

John McLear

Related questions
                            
                                How to read aloud Python List Comprehensions?
                            
                                Is there a limit on how many different apps can single developer publish on Android Market?
                            
                                How to make Capybara do a DELETE request in a Cucumber feature?
                            
                                mysql command line return execution time?
                            
                                When is it sensible to use Thread.Sleep()? [closed]
                            
                                Why doesn't my Chrome Profiler show proper retaining paths for my objects, and why are my objects never released?
                            
                                WebClient does not support concurrent I/O operations
                            
                                Include referenced project's .config file
                            
                                SQL FOR XML - Outputting data as Elements or as Attributes
                            
                                file downloading in restful web services
                            
                                Fabric asks for password even though I can SSH using credential
                            
                                What does "..." mean when next to a parameter in a go function declaration?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With