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!
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!
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>
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).
By including the
l10n.js file, the translations for respective language’s
app.properties file will be applied to element with the corresponding
Add “name” and “description” translations
The translations for the
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
- App Manager/Firefox OS
- Language setting in the Settings app
- 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!