Discussion :

[SylvainPV]

Bonjour,

Voici mon problème: je réalise un site web multi-plateforme et multi-lingue : il est présent sous la forme d'un site web classique et également sous la forme d'une web-app embarquée sur tablettes et smartphones. Tout le code HTML/CSS/Javascript ainsi que les ressources front-end sont donc en local sur ces périphériques. Nous chargeons les données uniquement via des appels AJAX cross-domain qui retournent les infos au format JSON.

Nous planchons maintenant sur un moyen de gérer les différentes langues sur notre application embarquée. Actuellement nous avons du mal à trouver une solution satisfaisante. Voici ce qui a été envisagé :

1) compilation par le développeur de fichiers templates pour générer le contenu du site en différentes langues.

Nous avons codé un petit script qui parcourt nos HTML et JS et remplace les labels {LANG.MONLABEL} par leur équivalent défini dans un fichier properties Java. On se retrouve avec des dossiers "en", "fr", "de " et tout le contenu du site traduit à l'intérieur, il suffit ensuite simplement de faire une redirection au bon sous-dossier.
Avantages : pas de parsing JS, ultra-rapide, meilleure lisibilité
Inconvénients: nécessite de lancer manuellement une compilation à chaque modif sur les templates, complexité à l'usage, poids de l'appli démultiplié par le nombre de langages

2) utilisation d'un fichier lang.json chargé en AJAX depuis le serveur, et parsing du contenu en Javascript via data-attributes.
On utilise les data-attributes de HTML5 pour attribuer un label à un élémentHTML. Puis au chargement de la page une fonction JS récupère tous les éléments avec un label déclaré, et remplace le contenu de l'élement par le label traduit.
Avantages : fonctionne tout seul, facile à manipuler, possibilité de lier avec un back-end
Inconvénients: temps de parsing, peu lisible, obligé d'utiliser un élément HTML par label

3) utilisation d'un élément HTML déprécié pour identifier les labels à traduire
A ma connaissance il n'existe pas d'élément HTML pour désigner un texte à traduire. Donc je pensais utiliser un élément déprécié comme <i> ou <s> pour stocker les labels, et cacher ces éléments en CSS:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p><i>BONJOUR</i> Tom</p>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

i { display: none; }

Code json :

Sélectionner tout - Visualiser dans une fenêtre à part

app.lang.EN = { BONJOUR: "Hello" }

Résultat :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p><i>BONJOUR</i>Hello Tom</p>

Avantages : fonctionne tout seul, facile à manipuler, possibilité de lier avec un back-end
Inconvénients: temps de parsing, obligé de sacrifier un élément HTML, risques en cas de CSS surchargé


Ces 3 solutions peuvent fonctionner mais ont chacun leurs inconvénients, c'est pourquoi je fais appel à vous au cas où quelqu'un aurait une meilleure idée. Pour rappel, aucune solution serveur n'est envisageable car il s'agit d'une appli embarquée.

[SylvainPV]

Nous avons opté pour une autre solution: charger intégralement le contenu de notre application en AJAX et pré-processer le HTML chargé avant de l'injecter dans la page.

En clair, on charge un fichier de langue au format JSON, on requête en AJAX nos pages HTML, on remplace avec une expression régulière nos labels {LANG.monlabel} par le label équivalent dans le JSON, puis on injecte le HTML traduit dans notre conteneur.

Voici le code si ça intéresse quelqu'un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
app.setUserLanguage = function(lang, callback){
        if(['fr','en'].indexOf(lang) == -1){ lang = 'fr'; } //Langue par défaut
        app.lang = { name: lang };
        $.getJSON("lang/"+lang+".json", function(data){
            app.lang = data;
            if(isFunction(callback)){ callback(app.lang); }
        });
    };
 
    app.parseLang = function(html){
        return html.replace(/{LANG\.([\w\.]+)\}/g, function(match, label){
            if(label in app.lang){
                return app.lang[label];
            } else {
                console.error("Label "+label+" not found in lang ");
                return "???";
            }
        });
    };