Introducing TranslationTester and localization support for Open Web Apps

When building Open Web Apps, one important factor is to make your content available to as many possible, and one way to do that is to make it available in more than one language. Therefore we want to make it as easy as possible for you, both with a complete code repository to get started and updated documentation and possibilities to get translations for your apps.

We are now also offering a way to have your app set up and to get connected to localizers directly!

Presenting TranslationTester

Based on the great work and content by Jason in Localizing Firefox OS Apps and Christie in Localizing the Firefox OS Boilerplate App, I’ve been working on simplifying the set-up for localization.

Above articles describe many facets and possibilities available, and to complement that, I wanted to be able to offer the most basic code and structure for most use cases: basically, just add translations and you’re good to go!

This lead to the creation of the TranslationTester code repository, available on GitHub.

From no translation to localized app in less than 4 minutes!

Based on the TranslationTester, Will Bamberg has put together a nice and short screencast showing the exact process of going from no translations to having support in just a few minutes!

In the app-l10n-example repository you have versions of the before and after stages in this screencast, and all of the localization process is described on MDN.

How to localize an app

These are the things needed to localize an app. All of them are included in the TranslationTester repository, but included here to show easy it is to get started, or continue to build on the TranslationTester platform for your app.

Mark up the HTML

For any element that you want to have its text localized, add a data-l10n-id attribute to the desired element. For example:

<p data-l10n-id="winter-for-real">Winter for real</p>

Create translations

In the locales directory, you have a directory for each language, and can just add new ones for new languages. In each language directoy you create an app.properties file which will contain all your translations for that language (optionally you can also create a manifest.properties file for the name and description of the app, unless you edit it in the main manifest.webapp for your app).

Include l10n.js

By including the l10n.js file, the translations for respective language’s app.properties file will be applied to element with the corresponding data-l10n-id attribute.

Add “name” and “description” translations

The translations for the name and description for your app could be added to the main manifest.webapp file, or in an optional manifest.properties under each locale’s directory.

How to view different locales

To view your app with a different locale, change the language in Firefox/App Manager:

All platforms
Set the desired locale to test in JavaScript, e.g:

document.webL10n.setLanguage("es");
App Manager/Firefox OS
Language setting in the Settings app
Firefox
Choose language under Preferences > Content > Languages. More information in Set content language in Firefox

Get help with translations

We have a Mozilla localization app pilot offered through the Transifex service. As part of that, we’re offering you to add your apps as part of this pilot, to be connected to localizers and quickly offer your app in more languages, to more people.

Please apply in the Localize My Firefox App form to get started!

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


7 comments

  1. Junior

    One [a little] off-topic question: Is is possible (or will be in future) remove file and edit menus from Open Web Apps (in Desktop)?

    Thanks

    May 14th, 2014 at 06:19

    1. Robert Nyman [Editor]

      Not sure at this time, but I think it’s there to be inline with the operating system it’s running. Worth thinking about, though.

      May 14th, 2014 at 10:12

  2. Biraj

    Same rule can be applied for website translation

    May 15th, 2014 at 12:25

  3. Axel Hecht

    Robert, can you explain the “Tester” in the app name?

    I’ve expected something testing localizations, but what I see is “minimal viable app template with localization”, right?

    Also, did you choose Kaze’s webL10n over the builtin code in gaia for particular reasons? If so, it might be good to get bugs on file, in FirefoxOS, Gaia::L10n. gandalf and stas are maintaining the impl now.

    May 19th, 2014 at 04:46

    1. Robert Nyman [Editor]

      Naming things is always difficult. :-)
      My thinking is that it was, like you say, a simple template to get started and testing out having translations in your app.

      Why it I picked that one is that the one in Gaia is a work in progress, and could change over time and potentially break things, so I decided to avoid that dependency.

      I’m all for discussing which one would work best over time and how we can best collaborate on this.

      May 26th, 2014 at 06:34

  4. Maureen Hanratty

    Wow, this is awesome! Can developers also use this to get their app description in the Marketplace translated?

    May 19th, 2014 at 10:49

    1. Will Bamberg

      I’m not much of an expert on this (I just made the video), but as far as I know: the app’s description in the Marketplace is taken from the “description” field in the manifest and this respects localization.

      So if you’ve provided translations of the description in the manifest using the “locales” field, as this tutorial describes, then the right translation should appear in the Marketplace.

      May 20th, 2014 at 09:45

Comments are closed for this article.