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:

1. 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.
2. 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.
3. I set up a similar project at the crowdsources translation site Crowdin.net with similar results: 24 hours in and nobody has translated anything.
4. 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.

On the left of each line is a key that I’ll use later in HTML and JavaScript to reference the string; on the right is the translation for the language in question (the example above is the file checkin.en-US.properties, which is used on English-language devices). So, for example, here is the same file but for Spanish:

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.

Once all of the properties files were created, I created a locales.ini file that referenced each of them. Here, for example, is this file set up for English (the default language) and Spanish:

@import url(checkin.en-US.properties)
[es]
@import url(checkin.es.properties)

With the properties files and the locales.ini set up, getting the translations into the app required two steps: editing the HTML and editing the JavaScript.

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:

<link rel="resource" type="application/l10n" href="locales/locales.ini" />
<script type="application/javascript" src="js/l10n.js"></script>

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:

<h1 data-l10n-id="settings">Settings</h1>

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.

In the JavaScript I do a similar thing, but using the navigator.mozL10n.get function:

$('#statusmessagetext').html(navigator.mozL10n.get("checkedin"));

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.