This app is to test translations for Firefox OS apps and to have a blueprint for your own app with translation support. Feel free to fork this repository and then build up your app supporting multiple languages.
Optionally, you can set up your project for localization at Transifex to accept and import translations from other people.
If you go to http://robnyman.github.io/TranslationTester/ in your web browser or add it as an app in the App Manager in the Firefox Developer Tools (Tools > Web Developer > App Manager
in Firefox) you can test it out right away.
If you plan on testing in the App Manager, these are your two options:
- Clone or fork this repository, choose
Add Packaged App
and point to the directory - Choose
Add Hosted App
and point your App Manager to this URL: http://robnyman.github.io/TranslationTester/manifest-hosted.webapp
To view TranslationTester with a different locale, you can either manually trigger it via JavaScript or change the language in Firefox/App Manager:
- JavaScript: Change the language code in the
js/base.js file
, see thedocument.webL10n.setLanguage("es");
method - Firefox: Choose language under
Preferences > Content > Languages
. More information in Set content language in Firefox - App Manager/Firefox OS: Go to
Settings > Language
. More information in Change The Default Language on Firefox OS
- All localizations are available in the
locales
directory, organized by each language code - The
locales.ini
file imports them - The included
l10n.js
JavaScript file applies the current user locale's translation to respective element through theirdata-l10n-id
attribute.
If you want to add a new language, here's how to do it:
-
Create a directory in the
locales
directory, e.g.en-US
-
Create two files in your locale directory:
app.properties
andmanifest.properties
.app.properties
will have all the translations for your app's content,manifest.properties
will have the translation for the name and description of your app -
Open
locales.ini
and import your translation, e.g:[en-US] @import url(en-US/app.properties)
-
Open
manifest.webapp
and add your language in the locales directive:"en-US": { "name": "TranslationTester", "description": "This is a testing app for Firefox OS translations" }
If you want to add a new text/translation in the content file:
- Add the
data-l10n-id
attribute to the desired element:<p data-l10n-id="winter-for-real">Winter for real</p>
- The value chosen for the
data-l10n-id
attribute needs to correspond to the same value in theapp.properties
file for each language, e.g:winter-for-real = Winter for real
If you have translations offered by people not on the project - for instance, through the Transifex service - it's highly recommended that you list their names and give them appropriate credits. The suggestion, and implemented in this example, is to give an element an attribute, data-l10n-id="translation-credits"
in which the names will be retrieved from respective app.properties
file for the specific language being shown.
This repository and these instructions have been inspired and greatly helped by the Localizing the Firefox OS Boilerplate App article by Christie Koehler.