RootsLabs

More than a tool ! GitHub Google+ LinkedIn RSS

Firefox OS : Localiser son application

Progi1984 - Commentaires (8) Firefox OS

Actuellement, le Marketplace Firefox gère trois langues : anglais (US), espagnol et portugais (Brésil).

Mais comment avec un code unique localiser son application ?

Localiser le fichier manifest.webapp de votre application Firefox OS

Afin de définir la locale par défaut de l’application, il faut définir la clé « default_locale » :

{
  "name": "NomApp",
  "developer": {
    "name": "Mon organisation",
    "url": "http://url.organisation.org"
  },
  "description": "Mon application",
  "default_locale": "fr"
}

Pour localiser le nom de l’organisation ou la description, il faut ajouter une clé « locales » :

{
  "name": "NomApp",
  "developer": {
    "name": "Mon organisation",
    "url": "http://url.organisation.org"
  },
  "description": "Mon application",
  "default_locale": "fr",
  "locales": {
    "es": {
      "description": "Mi aplicación",
      "developer": {
        "name": "Mi organización",
        "url": "http://es.url.organisation.org"
      }
    },
    "it": {
      "description": "La mia applicazione",
      "developer": {
        "name": "La mia organizzazione",
        "url": "http://it.url.organisation.org"
      }
    }
  }
}

Localiser le contenu de votre application Firefox OS

Initialisation

Pour l’application, c’est différent. Il faut tout d’abord inclure soit la librairie webL10n (fichier) – créé par Fabien Cazenave (@fabi1cazenave), hébergé sur GitHub (fabi1cazenave\webL10n) et compatible IE -, soit la version de Firefox OS(fichier) et un fichier de type ressources qui contient les liens vers les différentes langues:

<html>
  <head>
    <script src="shared/js/l10n.js"></script>
    <link rel="resource" type="application/l10n" href="l10n_app.ini" />
  </head>
</html>

Fichiers de langue

Ce fichier INI a une architecture simple. Tout d’abord on importe la langue par défaut, puis pour chaque langue, on crée une section avec les différents imports pour chaque fichier de langue. Mais un exemple vaut mieux que quelques mots :

@import url(app.en-US.properties)

[fr]
@import url(app.fr-FR.properties)

Ces fichiers properties ont la même architecture : une clé avec une chaine.

# Pour le fichier app.fr-FR.properties
about=A propos
author=Auteur
# Pour le fichier app.en-US.properties
about=About
author=Author

Localisation du code HTML

Désormais, il reste à l’intégrer au code HTML. Pour cela, dans du code HTML5, il faut créer un attribut data-l10n-id qui contiendra la clé. Par exemple :

<header data-l10n-id="about"></header>
<span data-l10n-id="author"></span>

Afin d’éviter un effet de clignotement, je conseille de remplir la balise avec la langue par défaut. Ainsi le précédent exemple ressemblerait à cela :

<header data-l10n-id="about">About</header>
<span data-l10n-id="author">Author</span>

Localisation des attributs HTML

Mais la puissance de la librairie webL10N ne s’arrête pas là car cette librairie permet aussi de localiser les attributs.
Imaginez ce code avec un élément HTML qui contient un attribut localisable :

<button data-l10n-id="btnSend" title="Titre du Bouton">Message du bouton</button>

Et avec le fichier de langue suivant, vous traduisez les attributs de votre élément HTML.

[en-US]
btnSend = Button Message
btnSend.title = Button Title
[fr]
btnSend = Message du bouton
btnSend.title = Titre du Bouton

Gestion d’arguments dans la localisation

Continuons à imaginer que vous souhaitiez traduire une phrase avec une variable à l’intérieur. Par exemple, ma phrase sera « Bienvenue, Progi1984 ! Vous utilisez le projet webL10N. » avec mon pseudo et le nom du projet comme variables.

Pour le code HTML, on utilise un nouvel attribut HTML5 data-l10n-args qui contient les arguments sous forme d’un JSON.

<p data-l10n-id="welcomeuse" data-l10n-args='{"user": "Progi1984", "project": "webL10N" }'></p>

Pour le fichier de langue, les arguments se trouvent entre accolades.

[en-US]
welcomeuse = Welcome, {{user}}! You use the project {{project}}.
[fr]
welcomeuse = Bienvenue, {{user}} ! Vous utilisez le projet {{project}}.

Gestion du Pluriel

Maintenant que vous savez les arguments sans problème, nous allons les utiliser pour gérer le pluriel.
Prenons la phrase « x Articles en attente », elle est variable en fonction du nombre d’articles :

  • 0 : « Aucun article en attente »
  • 1 : « 1 article en attente »
  • 2 et + : « x articles en attente »

Au niveau du code HTML, on va utiliser l’argument « num » qui contiendra le nombre d’articles :

<p data-l10n-id="articlespending" data-l10n-args='{"num": "0" }'></p>

Au niveau du fichier de langues, on va utiliser la macro plural() :

[en-US]
articlespending= {[ plural(num) ]}
articlespending[zero]  = No pending article
articlespending[one]   = One pending article
articlespending[other] = {{num}} pending articles
[fr]
articlespending= {[ plural(num) ]}
articlespending[zero]  = Aucun article en attente
articlespending[one]   = 1 article en attente
articlespending[other] = {{num}} articles en attente

Ainsi, en fonction du nombre d’articles (« num« ), webL10N prendra la phrase correcte pour traduire.

Conclusion

Pour conclure, voici les étapes pour localiser son application Firefox OS :

  • Inclure dans l’entête HTML le fichier javascript l10n.js
  • Inclure dans l’entête HTML le fichier INI des langues
  • Créer les fichiers de langues (au format PROPERTIES)
  • Modifier le fichier HTML pour inclure les attributs personnalisés data-l10n-id

Aide :

[EDIT 16/04/2013 08h20] : Correction de la syntaxe de certains attributs suite à une erreur de syntaxe. Merci à @jwajsberg
[EDIT 17/04/2013 14h00] : Ajout du lien vers la librairie webL10N suite au tweet de @nhoizey
[EDIT 17/04/2013 16h30] : Rectification du lien vers le fichier l10n.js du projet B2G suite au tweet de @nhoizey
[EDIT 17/04/2013 22h30] : Mise à jour sur la localisation des attributs suite au tweet de @jwajsberg
[EDIT 17/04/2013 23h20] : Mise à jour sur la gestion des arguments et du pluriel suite au tweet de @fabi1cazenave
[EDIT 22/08/2013 10h30] : Mise à jour des liens avec un article de Mozilla Hacks
[EDIT 08/12/2013 21h00] : Grâce à likpi, Mise à jour du lien vers la version à jour de webL10N

Articles similaires:

Commentaires

1. likpi, le 6 décembre 2013 à 06:38

Bonjour, merci pour tout vos article sur Firefox os, les ressources française sur le sujet sont rare.

Petite correction, le lien directe vers le fichier webL10n n’est plus a jour.

2. Progi1984, le 6 décembre 2013 à 09:07

@likpi : Peux tu m’indiquer quel lien n’est pas à jour ? Je suis désolé, j’ai vérifié tous les fichiers, j’arrive à accéder à toutes les pages.

3. likpi, le 7 décembre 2013 à 06:06

Pour l’application, c’est différent. Il faut tout d’abord inclure soit la librairie webL10n (fichier) <–

Celui-ci, le lien fonctionne, mais il ne correspond pas au fichier et au wiki du github : fabi1cazenave\webL10n

4. likpi, le 7 décembre 2013 à 06:07

La première ligne du commentaire si-dessus et la première ligne de la partie « Initialisation »

5. Progi1984, le 7 décembre 2013 à 12:21

Excuse-moi mais je ne vois pas tes liens… Peux tu me les envoyer soit par commentaire soit par mail (Page Contact) ? Merci.

6. Progi1984, le 7 décembre 2013 à 12:21

Je ne comprends pas tout.

7. likpi, le 8 décembre 2013 à 01:06

Je reprend :

Le lien : https://github.com/mozilla-b2g/gaia/blob/master/shared/js/l10n.js

Fonctionne très bien, mais …

Il ne correspond pas à la version de l10n.js qui est disponible en suivant le lien github suivant :
https://github.com/fabi1cazenave/webL10n

Je pense pas pouvoir faire mieux 😀

8. Progi1984, le 8 décembre 2013 à 22:06

Coucou…

Je pense que la version du repo de Mozilla est la plus à jour, car c’est la version utilisée par Firefox OS. webL10N de Fabien CAZENAVE semblle être la version initiale de développement.

PS : Je vais en profiter pour mettre à jour l’article. Merci @likpi.

Ajouter un commentaire

Commentaire :