Gestion multilangue propre

Version imprimable

Bonsoir,

je cherche à faire une gestion multilangue 100% client (pas de langage serveur).
Mon idée initiale était de faire N fichiers pour N langues, chacun des fichiers ayant la structure suivante :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script> var langue='fr'; //par exemple switch(langue) { case 'fr' : var data1="texte en français"; etc. break; case 'en' : var data1="text in english"; etc. break; etc. } </script>  <script>document.write(data1);</script> etc.
Mais plusieurs bémols. D'abord, le document.write est à éviter. Mais comment faire alors ?

D'autre part, ma solution ne fonctionne pas avec les balises img :
Code:

1 2 <img src="<script>document.write(src_image);</script>" />
Donc comment faire pour que ça fonctionne aussi pour les images ?

11/09/2016, 11h06
laurentSc

OK, ce -1 montre que ma question est mal vue, cependant, avant de la poser, j'ai fait une recherche, et si je la pose, c'est que je n'ai pas trouvé...
11/09/2016, 11h34
eleydet

Bonjour,

En modifiant le DOM, ça ne marche pas?

Code:

document.getElementById("identifiant").innerHTML=data1;

Je te remercie de ta réponse qui me semble intéressante. Par contre, j'ai fait un petit essai qui donne juste une page blanche...:(
Code:

1 2 3 4 5 6 7 8 9 var langue='en'; if (langue=='en') document.getElementById("identifiant").innerHTML='testen'; else document.getElementById("identifiant").innerHTML='testfr'; </script> <span id="identifiant"></span>

Chez moi, ça marche...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <span id="identifiant"></span>
    <script>
      var langue='en';
      if (langue=='en')
        document.getElementById("identifiant").innerHTML='testen';
      else
        document.getElementById("identifiant").innerHTML='testfr';
    </script>
  </body>
</html>

Voilà qui est bien gênant : j'ai essayé avec 3 navigateurs (IE7, FF et Chrome) et comme rien avec chacun, j'ai essayé sur un second PC (j'ai le perso et le professionnel) et ça marche bien sur le perso. Mais cela concerne le boulot, donc il faudrait un code qui marche sur le PC pro. As-tu une idée d'un autre code que je pourrais tester ?

Pour plus de détail, sur le PC du boulot, le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script> document.getElementById("identifiant").innerHTML="testen"; var langue='en'; if (langue=='en') document.getElementById("identifiant").innerHTML="testen"; else document.getElementById("identifiant").innerHTML="testfr"; </script> <div id="identifiant"> </div> <script>alert("innerHTML="+document.getElementById("identifiant").innerHTML);</script>
donne l'affichage innerHTML=  (au cas, j'ai fait l'essai avec une DIV à la place du SPAN).

je crois qu'il te faut avant tout bien comprendre comment marche javascript
la notion d'événement de DOM etc.

car tu code me laisse pensé que tu ne maitrise pas les bases
Code:

1 2 3 4 5 6 7 8 9 <script> var langue='en'; if (langue=='en') document.getElementById("identifiant").innerHTML='testen'; else document.getElementById("identifiant").innerHTML='testfr'; </script> <span id="identifiant"></span>
je lis simplement ce que tu écris

mettre la valeur 'en' dans la variable langue
si la variable langue vaut 'en'
chercher dans le document l'élément dont l'identifiant est 'identifiant"
insérer le code html 'testen' dans cet élément
sinon
chercher dans le document l'élément dont l'identifiant est 'identifiant"
insérer le code html 'testfr' dans cet élément

créer dans la page l'élément de type spam dont l'identifiant est 'identifiant'

en clair tu cherche un élément avant qui ne soit créé.

Je ne sais pas pourquoi tu cherche à faire ce système mais c'est particulièrement couteux.
tu vas crée des pages HTML vides donc difficiles à lire et à maintenir
ces pages seront chargées par le client interprété et instanciées (le navigateur va créer tous les élément de la page)
ensuite le javascript va entrer en action est quasiment tout refaire.

je te conseille si tu a un serveur apache de regarder https://www.w3.org/International/que...pache-lang-neg
cela consiste à faire autant de page html de de langue
index.fr.html
index.de.html
index.en.html
etc. lorsque le client demande index.html le serveur lui envoi la version correspondant à la langue de sont navigateur.

Je te conseille de réserver la traduction côté client que si c'est javascript qui construit le DOM en clair le HTML que tu envoi au navigateur est vide et c'est JS qui crée des éléments.
dans ce cas la tu fais un fichier lang.fr.js lang.en.js etc qui contient
Code:

1 2 3 4 5 6 7 lang = { 'title': 'mytitle', 'form' : { 'cancel':'cancel', 'ok':'ok' } }
Code:

1 2 3 4 5 6 7 lang = { 'title': 'montitre', 'form' : { 'cancel':'annuler', 'ok':'valider' } }
ainsi dans ton js lorsque tu veux utiliser le texte du titre tu as la variable lang.title pour ton formulaire tu as lang.form.ok et lang.form.cancel
il te suffit de charger le bon fichier.

au vu de ce que tu as écrit le pense que cela est beaucoup trop compliqué pour toi. c'est pourquoi je te conseille de faire ça côté serveur.

Mais ne renonce pas à comprendre comment JS fonctionne et à expérimenter. n'hésite à suivre les tutos du site.

je ne sais pas ce que tu a essayé sur plusieurs navigateur mais le code de eleydet doit fonctionner partout
A+JYT

11/09/2016, 18h41
laurentSc

Effectivement, mon manque d'expérience avec le js m'a fait oublier de placer la manipulation du DOM après sa création...J'avais pas vu que eleydet avait inversé cela de mon code avant de dire "ça marche chez moi". Si je le fais aussi, ça marche :P

Sinon, dans le cadre de mon application, il faut que tout le code soit localisé dans le body d'un seul fichier, et tout côté client, donc je vais plutôt m'inspirer de mon exemple...

Je décoche "résolu" car je n'arrive pas à appliquer la gestion multilangue aux images :
Code:

1 2 3 4 5 6 7 8 9 10 11 <img id="image" src="" /> <script> var langue='en'; if (langue=='en') { document.getElementById("image").src="images/diagramen.jpg"; } else { document.getElementById("image").src="images/diagramfr.jpg"; } </script>
si je mets

Code:

<img id="image" src="images/diagramen.jpg" />

l'image s'affiche.

Je viens de tester ce code (avec deux images) à l'instant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <img id="image" src="">
    <script>
      var langue='en';
      if (langue=='en') {
	document.getElementById("image").src="image2.jpg";
      }
      else {
	document.getElementById("image").src="image1.jpg";
      }
    </script>
  </body>
</html>

Chez moi, il fonctionne...

11/09/2016, 19h52
laurentSc

C'est visiblement un problème de chemin et de nom de fichier...

En retard, je vois que la discussion est close, et pas pour les débutants en JS ! (désolé :()

Je viens de tester i18next : http://i18next.com/.

Je le trouve utilisable dans une solution client à condition d'en faire un usage modéré (quelques lignes à traduire). Pour la traduction de page entière, il faut toujours utiliser une solution serveur.

Voici le code de ma page de test (j'utilise ES2015 et le fichier dvjhUtilities, voir mon blog) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.0.1.css">
  <title>Test</title>
  <style>
    footer {
      margin-top: 2.4rem;
    }
  </style>
  <script src="https://code.jquery.com/qunit/qunit-2.0.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/3.4.1/i18next.min.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.3.1.js"></script>
  <script>
    'use strict';
 
    let
      domLoadedHandler = ev => {
        klog( `DOM ready   : ${ new kDvjhDate() }` );
        
        const
          kSalut = k$( "[name='salut']" ),
          kAction = k$( "[name='action']" );
          
        { // bloc i18next
          i18next.init(
            {
              "lng" : navigator.language, // on applique la langue du navigateur par défaut
              "resources" : {
                "en" : {
                  "translation" : {
                    "hello" : "Hello world",
                    "button" : "Go"
                  }
                },
                "fr" : {
                  "translation" : {
                    "hello" : "Bonjour",
                    "button" : "Action"
                  }
                },
                "ar" : {
                  "translation" : {
                    "hello" : "صباح الخير",
                    "button" : "عمل"
                  }
                }
              }
            },
            ( er, t ) => {
              if ( er ){
                kerror( er );
              } else {
               kSalut.textContent = i18next.t( "hello" );              
               kAction.textContent = i18next.t( "button" );              
              }
            }
          );
          
          /*
           * On peut changer de langue de différentes manières,
           * voir la documentation de i18next : "http://i18next.com/".
           *
           * Ici, on prend la valeur de l'attribut lang de l'élément du DOM
           */
          setTimeout( () => {
            
            kSalut.textContent = i18next.t( "hello", { "lng" : kSalut.getAttribute( "lang" ) } );
            kAction.textContent = i18next.t( "button", { "lng" : kAction.getAttribute( "lang" ) } );
            
          }, 5000 ); // 5s avant la modification
          
        }
        
      },
      windowLoadHandler = ev => {
        klog( `Window load : ${ new kDvjhDate() }` );
        
        kIDUnique();
    };
      
    kAddListener( [
      [ document, "DOMContentLoaded", domLoadedHandler ],
      [ window, "load", windowLoadHandler ]
    ] );    
  </script>
</head>
<body>
  <main>
    <output name="salut" lang="en"></output>
    <button name="action" lang="ar" dir="rtl"></button>
  </main>
  <footer>
    <section class="qunit">
      <div id="qunit"></div>
      <div id="qunit-fixture"></div>
    </section>
  </footer>
</body>
</html>

Voici le code d'origine pour l'arabe, malheureusement transformé dans le code ci-dessus.

               "ar" : {
                  "translation" : {
                    "hello" : "صباح الخير",
                    "button" : "عمل"
                  }

16/09/2016, 15h29
laurentSc

Je viens de décocher "résolu" car je rencontre un nouveau problème lié au même sujet : si le code document.getElementById("identifiant").innerHTML='xxx'; fonctionne bien si je l'utilise en local, il n'est pas pris en compte par l'outil que j'utilise pour intégrer mon code en plusieurs langues. Cependant, cet outil accepte du js simple (du style alert ou document.write). Existerait-il donc un autre code pour traduire en plusieurs langues ?

EDIT : je précise que dans mon cas, une solution serveur est impossible (je n'y ai pas accès). Pensez-vous que ce soit possible ?
17/09/2016, 22h46
laurentSc

J'ai repris le code depuis presque 0 et le bug ne se reproduit pas donc je l'avais introduit !
18/09/2016, 22h48
SylvainPV

Généralement, quand on arrive à ce genre de besoins (internationalisaion, labels dynamiques, accords pluriel/de genre etc...), c'est qu'il est temps d'utiliser une solution de templating (côté serveur ou côté client selon le besoin). J'en profite pour mettre un lien vers mon article sur le templating client: http://sylvainpv.developpez.com/tuto...lating-client/

i18next est une solution ultra-complète, peut-être un peu trop lourde pour le début. Je recommande de tester une petite lib de micro templating basique pour se faire les armes, puis quand tu arriveras aux points délicats (comme la gestion des dates ou les accords pluriel entre les langues), là il faudra chercher quelque-chose de plus sophistiqué.
19/09/2016, 13h09
sekaijin

je suis entièrement d'accord.
utiliser un templating permet d'assurer la traduction mais aussi d'adapter l'interface à la langue.
par exemple lorsque l'écriture est de droit à gauche il est mieux d'avoir les onglet dans le même sens.

A+JYT
22/09/2016, 19h03
laurentSc

Mon niveau assez faible nécessite qu'on me prenne par la main, plus que ne le fait ce guide. Donc soit, tu me donnes un exemple plus précis de l'application d'une des méthodes de templating, soit j'en reste au innerHTML (l'ancienne méthode)...
22/09/2016, 19h15
SylvainPV

Si écrire un guide complet ne suffit pas, je ne vois pas quoi faire de plus. L'article comporte tous les liens nécessaires vers les sites officiels des bibliothèques de templating avec leur documentation et guides de démarrage. Il faut se donner les moyens d'appendre
22/09/2016, 21h16
laurentSc

Bon OK, je regarderai demain car il fera plus clair (jour et idées...)
23/09/2016, 10h47
laurentSc

Pour démarrer, j'ai choisi l'une des méthodes de templating. Comme celle de John Resig est appelée "petit bijou", j'ai regardé celle-là. Mais si je vais sur le lien fourni : http://ejohn.org/blog/javascript-micro-templating/, je n'y trouve pas, comme tu le dis, de guide de démarrage...