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

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

What is PhoneGap Cordova and ionic?

PhoneGap, Apache Cordova, and Ionic are frameworks for developing mobile application with single HTML, CSS, and JavaScript/TypeScript code base and targeting various mobile platforms, including Android. Install and enable the PhoneGap/Cordova repository plugin on the Plugins page as described in Managing plugins.

Can I use PhoneGap and Cordova with IntelliJ IDEA?

The plugin is available only in IntelliJ IDEA Ultimate. PhoneGap and Apache Cordova are frameworks for developing mobile application with single HTML, CSS, and JavaScript/TypeScript code base and targeting various mobile platforms, including Android.

What is PhoneGap?

PhoneGap originally started as an open-source project by Nitobi Software in 2008. Nitobi Software was acquired by Adobe in 2011 and shortly after donated PhoneGap to the Apache Software Foundation as Cordova.

What are Android support libraries in Cordova plugins?

Some Cordova plugins include Android Support Libraries to faciliate them. Most commonly, these are now included into the Cordova project by specifying them as Gradle dependencies (see the Cordova plugin spec documentation ).

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.

Phonegap/Cordova internationalization support

Tags:

ChrLipp

People also ask

1 Answers

John McLear

Recent Activity

Donate For Us

Phonegap/Cordova internationalization support

Tags:

ChrLipp

People also ask

1 Answers

John McLear

Related questions

Recent Activity

Donate For Us