Categories: L20n Planet

L20n in Firefox: A Summary for Localizers

We’re working on bringing L20n to Firefox and Gecko this summer. Here’s what you need to know if you’re a localizer.

L20n was a big part of the MozLondon All Hands work week. Jeff’s write-up on the All Hands will give you a good overview of all projects and activities the Localization team has been involved in. In this post I’d like to focus on L20n and the plan to
bring it to Firefox Desktop and Gecko.

What’s L20n?

L20n is a localization framework developed by Mozilla’s Localization Engineering team. It builds on years of learning of the hard and the good parts of localization at Mozilla. It aims at allowing localizers to use the whole expressive power of their language without any compromises. Complex translations should be possible, but simple translations should remain simple.

The design of L20n revolves around two main themes:

  • separation of concerns: developers should write good localizable code without getting a degree in Applied Linguistics; localizers should not have to understand the programming language the code was written in and they should be able to use all of their language’s grammatical features without resorting to ugly hacks or asking the developers to makes changes to the source codebase just to support one edge-case;
  • isolation and asymmetry: one language’s grammatical features shouldn’t leak onto other languages; if a translation in language A is a simple string it should still be possible for the translation in language B to use more complex structures like plurals or

Here’s a good example to illustrate these points. Suppose you want to show a short label with the number of new messages in the UI. Something as simple as “0 new”, “1 new”, “2 new”, “5 new” etc. will work fine in English. In L20n, the English translation would look like
the following:

new-label = { $num_of_new } new

Things get more interesting for other languages where the adjective “new” needs to be accorded with the number. In French, we’d say “1 nouveau” but “2 nouveaux” and “5 nouveaux” (because “message” is masculine). The French localizer could encode this in L20n like this:

new-label = { PLURAL($num_of_new) ->
    [one]      Un nouveau
    [other]    { $num_of_new } nouveaux

The arrow -> introduces a so called select expression which chooses one of the defined variants (one, other) based on the value of PLURAL($num_of_new). The number of variants is language-specific and up to the localizer. In fact, they could provide a special case for 0,
if they wish:

new-label = { PLURAL($num_of_new) ->
    [0]        Aucun nouveau
    [one]      Un nouveau
    [other]    { $num_of_new } nouveaux

Note that while the French localizer can add variants at will, the English translation remains intact. That’s the isolation part. The source code (not shown here) also doesn’t require any changes in any case. That’s separation of concerns.

There are many more use-cases in which the expressiveness of L20n shines. The example above uses plural categories as the selector but you could also create select expressions based on genders, grammatical cases etc. You can learn more about the syntax used in L20n at The syntax is called FTL which stands for FTL Translation List. There’s also an on-line playground called the FTL Tinker where you can experiment with the syntax and see it evaluate right away in your browser!

L20n in Firefox

L20n has been successfully used to localize Firefox OS apps in the past. Firefox OS was a great testbed for us. We simplified L20n’s syntax based on the feedback we got from localizers. We streamlined the API to make it easier for developers to use it. Last but not least, we made sure the performance was not an issue even on low-memory devices. L20n has matured and now we’re bringing it to Firefox and Gecko.

Here’s what you need to know right now:

  1. L20n’s syntax, called FTL, is designed from ground up to be easy to understand, easy to edit and easy to write in. The syntax will be uniformly used everywhere where L20n is used.  No more #1 or %S or %1$S or &foo; or {{foo}}, depending on the file you’re in. Just one syntax which stays simple if you want it to.
  2. L20n also supports HTML in translations which means you can use <em> or <sup> as required by your language. Developers can also finally stop with the foo.start, foo.middle and foo.end madness and just drop those <a> elements into the translation text for you to position them wherever you please. This feature deserves its own blog post—stay tuned!
  3. We will start the transition with a simple UI feature.  A good candidate might be the Help > About Firefox dialog (bug 1289668).
  4. We will be slowly phasing DTD and properties files out, as we transition more UI features to L20n.  We will create scripts to help with the transition and can help you with converting files in your repositories.
  5. We are working closely with Pontoon and Pootle to enable support for the FTL syntax.  If you’re using these tools to translate Mozilla projects you probably won’t notice much change.
  6. We are planning to land at the beginning of one of the upcoming cycles to maximize the testing window. We don’t have a precise date yet. We’d like to target Firefox 51 or 52 which would put us in early August or mid-September. This however may still change.
  7. True to Mozilla’s spirit, the whole project is public and we’re looking for feedback and help! You can follow the meta bug or consult the buglist to track our progress.

Looking into the future

L20n’s first and foremost goal is to empower localizers and let them create good and natural-sounding translations.  The technology behind L20n opens up a new world of possibilities when it comes to improving the user’s and the localizer’s experience.

One such improvement is the ability to change the language of the UI on the fly, without having to restart the browser. This allows for a smoother and more pleasant experience for the user when a new language becomes available and the user chooses to use it. Furthermore it would allow for retranslating parts of the UI if needed which would especially be useful for Developer Tools: show console warnings and errors in your language for convenience or retranslate them on the fly to English to quickly look them up on the web.

Another innovation that we’re really excited about is the ability to push updates to the existing translations independent of the software updates which happen approximately every 6 weeks. We call this feature Live Updates to Localizations. In the future we’re hoping to be able to fix typos almost instantly in all Firefox instances around the world. The same technology would allow localizers to follow up with translations a few days after the release of a new version of Firefox. Last but now least, some translation authoring tools like Pontoon and Pootle could be allowed to push updates to the translations as you type them in your browser, allowing to instantly preview the translation and to make sure if fits well in the UI.

One comment on “L20n in Firefox: A Summary for Localizers”

Post a comment

  1. Robert Kaiser wrote on

    It’s awesome to see L20n finally come to Firefox. I’ve been looking forward to this for years!
    Thanks for not giving up and keeping up the work on it!


Leave a Reply

Your email address will not be published. Required fields are marked *