mozilla
Your Search Results

    Localizing strings in HTML

    This article explains how you can localize strings appearing in your app's HTML.

    Before you start, you need to have performed the steps described in the setup article. That is, you need to have added:

    • the translations in properties files, one for each language
    • a locales.ini declaring which languages your app supports
    • the l10n.js library

    The data-l10n-id attribute

    In the app's HTML, add a new attribute named data-l10n-id to all elements containing strings that need to be localized:

    <p data-l10n-id="winter-is-coming">Winter is coming</p>

    The attribute's value needs to match the name in a name=value line of your app.properties file. For example:

    app-heading = TranslationTester
    winter-is-coming = Winter is coming

    On page load, the l10n.js library will:

    • find all elements which have the data-l10n-id attribute set
    • use the attribute's value as a key to look up the correct translation of the string, given the current device language
    • assign this translation as the element's textContent

    Placeholders

    If the translated string expects to receive placeholders, you can pass these in as an JSON object assigned to an additional attribute called data-l10n-args. For example, suppose the localized strings are a greeting, and use a placeholder for the name of the person to greet:

    // en/app.properties
    greeting=Hello {{person}}!

    You can pass the person's name like this:

    <p data-l10n-id="greeting" data-l10n-args='{ "person": "Bob" }'>Hello!</p>

    Plurals

    In the same way, sometimes app.properties specifies different versions of a string for different plural forms:

    tomatoCount={[ plural(n) ]}
    tomatoCount[zero]=Vous n'avez pas de tomates :(.
    tomatoCount[one]=Vous avez une tomate.
    tomatoCount[other] = Vouz avez {{n}} tomates.

    You can pass a particular number using the data-l10n-args attribute:

    <p data-l10n-id="tomatoCount" data-l10n-args='{ "n": "1" }'>
      You have some tomatoes
    </p>
    Vous avez une tomate.

    Document Tags and Contributors

    Contributors to this page: wbamberg, necrophcodr
    Last updated by: necrophcodr,