Localizing my Firefox OS Foursquare Checkin App
I created Checkin, my Firefox OS Foursquare checkin app, as much to learn about Firefox OS as to scratch my own checkin itch. The next step along this road was to “localize” the app: in short, to make it work in languages other than English.
I tried four approaches to getting the translations for the words and phrases in the Checkin app done:
- I emailed friends who speak Portuguese, German, Danish and Swedish. I have helpful friends: each sent me back their translation within a couple of hours.
- I set up a project at the crowdsourced translation site GetLocalization.com and requested translations into the remaining languages the Firefox OS is set up for. I did this 24 hours ago, and so far I’ve had no translations offered by the “crowd”, but I did have one person double-check the German translation.
- I set up a similar project at the crowdsources translation site Crowdin.net with similar results: 24 hours in and nobody has translated anything.
- I set up a project at the pay-per-word translation site Gengo.com, which specified $2.40 US per language for the 40 words I needed translated. I ordered translations for Polish, Spanish (Spain), Spanish (Latin America), Chinese (Traditional), Portuguese (Brazil), Arabic and Hungarian. The translations were completed in between 15 minutes (Hungarian) and 9 hours later (Polish), with the majority of them completed with two hours. The service was easy to use, easy to set up, and there was a helpful interface for clarifying translation details (like “does CHECKIN mean to ‘to enter’ as in a hotel or does it mean ‘to verify’?”)
Once I had all the translations done, I needed to set up the app to use them. The post Localizing Firefox OS Apps from Mozilla proved very useful in this regard. I simply needed to pull out all of the strings from the app – things like “Enable Foursquare?” and “Checked in” – and put them in language-specific “properties” files that look like this:
settings = Settings enable-foursquare = Enable Foursquare? currently-disabled = Currently disabled. foursquare-instructions = To enable Foursquare checkin, check the box above and authenticate yourself to Foursquare. confirm-checkins = Confirm checkins? confirm-explanation = Require confirmation every time? checkin-confirmation = Checkin to checkedin = Checked in. gps-waiting = Waiting for GPS gps-explanation = Waiting for the GPS to return your current location.
settings = Configuración enable-foursquare = ¿Activar Foursquare? currently-disabled = Actualmente desactivado. foursquare-instructions = Para activar los check-ins de Foursquare, marca la casilla de arriba e identifícate en Foursquare. confirm-checkins = ¿Confirmar los check-ins? confirm-explanation = ¿Solicitar confirmación siempre? checkin-confirmation = Realizando check-in checkedin = Check-in realizado. gps-waiting = Esperando GPS gps-explanation = Esperando a que el GPS devuelva tu ubicación actual.
@import url(checkin.en-US.properties) [es] @import url(checkin.es.properties)
In the index.html for my app I needed to reference the locales.ini and also the l10n.js script that I copied from the Gaia repository:
Then in the places in the HTML where I wanted to use a translated string I simply added a reference to the key in the properties files like this:
That has the effect of displaying either Settings (if the app is displayed in English) or one of الإعدادات, Indstillinger, Einstellungen, Configuración, Beállítások, Ustawienia, Configurações, Inställningar, or 設定, depending on the language of the device.
That’s it! Running Checkin on the Firefox OS simulator and changing the device language changes the language of the app: when the device is set to Hungarian, the app appears in Hungarian. It’s really quite magical.
I’ve two remaining challenges:
First, Arabic is a right-to-left language, but my app isn’t set up yet to account for this, so although the app is translated into Arabic, it still appears left-to-right. It seems like there are hooks in the Gaia UI building blocks, so I expect that, with some digging, this should be relatively easy.
Second, there are some translations that are longer in another language than in English, and the Firefox OS stock UI isn’t handling these well. So I see things like this, in Hungarian:
I’ll have to figure out a way around that too.
The updated multilingual version of Checkin hasn’t appeared in the Firefox Marketplace yet; if you want to install it in your device, though, you can grab the app from Github and install it. Recommendations for improved translations are welcome.