Billet du blogue

Multilinguisme et Javascript

Voici une situation qu’un développeur Javascript pourrait rencontrer :

  1. Il doit créer un script qui permet d’agrandir une image lorsqu’on clique sur celle-ci. Cela consiste à créer une « fenêtre » par dessus le contenu, avec un bouton « fermer ».
  2. Ce script est situé dans un dossier « /js/ » à la racine du serveur.
  3. Le site qui utilise ce script est multilingue.

La problématique est donc la suivante : le développeur doit créer un nœud texte (le texte du bouton « fermer ») dans un fichier Javascript, et ce texte doit varier selon la langue du document. Impossible donc d’utiliser un simple :

document.createTextNode("Fermer");

La solution est plutôt facile :

var htmlElement = document.getElementsByTagName("html")[0];
if (htmlElement.getAttribute("lang") == "fr") {
  document.createTextNode("Fermer");
} else {
  document.createTextNode("Close");
}

On trouve donc l’élément racine HTML et on récupère son attribut « lang » — on suppose que l’intégrateur qui a écrit le code HTML fait du bon travail ;) On se sert ensuite de la valeur de cet attribut pour déterminer le texte à créer.

Bonus! Si on utilise la librairie jQuery, on peut se servir du code suivant :

if ($("html").attr("lang") == "fr") {
  $("a.fermer").append("Fermer");
} else {
  $("a.fermer").append("Close");
}

Posté le avec les tags: , et .

Commentaires fermés

Les commentaires pour ce billet ont été désactivés un mois après la date de publication de ce-dernier. Vous désirez exprimer votre opinion sur ce billet malgré le fait que les commentaires aient été désactivés ? Utilisez le formulaire de contact.

Fil atom des commentaires de ce billet2 commentaires

  • Le problème c’est que si on multiplie les langues (et/ou si il y a beaucoup de phrases) on risque de se retrouver avec un javascript très lourd au final.

    En fait je ne sais pas si il existe une solution parfaite pour ce cas là.

    Actuellement j’utilise un objet global rempli par php, dans ma page HTML :

    <script type="text/javascript">
    var translate = new Object();
    translate.open = "<?php echo translate('Open'); ?>";
    translate.close = "<?php echo translate('Close'); ?>";
</script>

    et dans mon javascript :

    $("a.fermer").append(translate.close);

    Ce n’est pas parfait (javascript dans la page HTML plutôt que dans un fichier externe) mais faute de mieux…

    Yannick Croissant (17 septembre 2007 à 10:01 EST)

  • En effet, le fait de se servir d’un langage côté serveur a des avantages comme le fait d’utiliser seulement une (1) source centralisée. Cependant, comme tu l’as dit, ce n’est pas parfait puisqu’on insère du code Javascript dans le code HTML.

    La solution serait de créer un fichier lang.js et de le servir en tant que type MIME application/httpd-php pour qu’il produise un fichier contenant toutes les strings dont on a besoin.

    Rémi Prévost (17 septembre 2007 à 10:28 EST)