Le langage HTML/Internationalisation

L'Internet est un réseau mondial (world wide web). Le rendu du contenu peut donc varier selon la configuration du navigateur. Il peut être intéressant d'indiquer la langue utilisée, ce qui permettra au navigateur d'appliquer les paramètres régionaux relatifs à cette langue (s'il le peut).

L'identification des langues est définie dans le document RFC 3066 Tags for the Identification of Languages.

Comment indique-t-on la langue utilisée ?

La langue utilisée dans la majeure partie du document est un paramètre de la balise <html> d'ouverture :

<html lang="…">

Si on change de langue au cours du document, il faut l'indiquer dans la balise qui encadre le texte concerné. Par exemple

…
<html lang="fr" >

<head>
   …
</head>

<body>

<p>
   Le texte est en français par défaut.
   Mais comme on dit en italien&nbsp;:
   <q lang="it">Tradutore, traditore</q>.
</p>

</body>

</html>

En XHTML, il faut indiquer en outre la langue selon la norme XML, avec l'attribut : xml:lang="…". L'exemple ci-dessus devient donc :

…
<html lang="fr" xml:lang="fr" >

<head>
   …
</head>

<body>

<p>
   Le texte est en français par défaut.
   Mais comme on dit en italien&nbsp;:
   <q lang="it" xml:lang="it">Tradutore, traditore</q>.
</p>

</body>

</html>

Si le texte en langue étrangère n'est pas inclus dans une balise particulière, on peut simplement utiliser la balise <span>…</span> (voir le chapitre Zones de mise en forme).

Note: L'en-tête peut contenir une indication de la « langue de l'audience » avec la balise <meta http-equiv="content-language" content="''langue''">, en utilisant le même codage que ci-dessus (par exemple <meta http-equiv="content-language" content="fr"> pour le français). Cette balise sert pour le référencement par des moteurs de recherche, mais est indépendant de l'indication de la langue d'un élément de texte.

Identificateur de la langue

De manière générale, la langue est identifiée par deux lettre selon la norme ISO 639-2 (dite « alpha-3 »), par exemple :

allemand : de
anglais : en
arabe : ar
chinois : zh
espagnol : es
français : fr
grec moderne : el
hébreu : he
italien : it
japonais : ja
néerlandais : nl
portugais : pt
russe : ru

Certaines langues sont identifiées par un code de trois lettres, par exemple :

ancien anglais (entre 450 et 1100) : ang
moyen anglais (1100–1500) : enm
berbère : ber
créole/pidgin issu de l'anglais : cpe
créole issu du français : cpf
créole issu du portugais : cpp
égyptien antique : egy
ancien français (842–1400) : fro
français moyen (1400–1600) : frm
grec ancien (jusqu'en 1453) : grc
kabyle : kab
massaï : mas

Lorsqu'un code à 3 lettres et un code à 2 lettres sont simultanément disponibles pour une même langue, seul le code à deux lettres doit être utilisé dans l'attribut lang.

On peut indiquer une sous-catégorie de langue. Par exemple :

anglais : en
- anglais du Royaume Uni : en-GB
  - anglais du Royaume Uni, selon l'orthographe du dictionnaire d'Oxford (Oxford English Dictionary) : en-GB-oed
- anglais étatsunien : en-US
- anglais cockney : en-cockney
espagnol : es
- espagnol d'Espagne : es-ES
- espagnol de l'Amérique latine : es-419

Les codes régionaux ne doivent cependant être utilisés que lorsqu'ils sont explicitement nécessaires. Par exemple, on n'écrira pas es-ES sauf s'il est nécessaire de différencier dans la même page des textes en espagnol courant d'autres passages en es-419.

Direction de l'écriture

On peut préciser si l'écriture se fait de gauche à droite (left-to-right, LTR) ou de droite à gauche (right-to-left, RTL), avec le paramètre dir, par exemple

<p lang="he" dir="rtl">עברית</p>

La valeur par défaut est ltr ; si une langue s'écrit de gauche à droite, il est inutile de le préciser.

Exemple de feuille de style différenciant la langue

L'exemple suivant est une feuille de style (écrite en CSS) dans laquelle la mise en page d'un paragraphe dépend de la langue.

/* ********** Français ********** */
  [lang|="fr"] > * { quotes: '\00ab\00a0' '\00a0\00bb'; } /* guillemets de citation */
  p:lang(fr) {
    text-align: justify; /* texte justifié */
    text-indent: 1em;    /* alinéa rentrant */
    margin-top: 0;       /* pas d'interligne */
    margin-bottom: 0;
  }

/* ********** Anglais ********** */
  [lang|="en"] > * { quotes: '\2018' '\2019' '\201c' '\201d'; }    /* guillemets de citation, 2 niveaux de citation  */
  [lang|="en-US"] > * { quotes: '\201c' '\201d' '\2018' '\2019'; } /* différents en GB et aux US  */
  p:lang(en) {
    text-align:left;        /* texte aligné à gauche */
    text-indent: 0;         /* pas de retrait de paragraphe */
    margin-top: 1em;
    margin-bottom: 1em;     /* alinéa "pavé" (interligne) */
  }

Les guillemets étant des caractères non-ASCII, on les mentionne en CSS en indiquant le code Unicode en hexadécimal après une barre de fraction (U+00ab est le guillemet ouvrant français «, U+00a0 est l'espace insécable…). Si on définit la page de code utilisée dans la feuille de style, on peut utiliser des caractères non-ASCII, mais la solution avec les barres de fraction inversée est universelle.

Vous pouvez tester le résultat avec des paragraphes suffisamment longs.

Exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<html lang="fr" xml:lang="fr">

<head>

   <title>
      Variation de mise en forme selon la langue
   </title>

   <meta
      http-equiv="Content-Type"
      content="text/html; charset=ISO-8859-15" />

   <style type="text/css">
      /* ********** Français ********** */
      [lang|="fr"] > * { quotes: "«\00a0" "\00a0\00bb"; } /* guillemets de citation */
      p:lang(fr) {
         text-align: justify; /* texte justifié */
         text-indent: 1em;    /* alinéa rentrant */
         margin-top: 0;       /* pas d'interligne */
         margin-bottom: 0;
      }
      /* ********** Anglais ********** */
      [lang|="en"] > * { quotes: "‘" "’" "“" "”"; }    /* guillemets de citation, 2 niveaux de citation  */
      [lang|="en-US"] > * { quotes: "“" "”" "‘" "’"; } /* différents en GB et aux US  */
      p:lang(en) {
         text-align:left;        /* texte aligné à gauche */
         text-indent: 0;         /* pas de retrait de paragraphe */
         margin-top: 1em;
         margin-bottom: 1em;     /* alinéa "pavé" (interligne) */
      }
   </style>

</head>

<body>

<p>
   Ceci est un paragraphe en français
   <q>avec une citation et
   <q>une citation dans la citation</q></q>…
</p>

<p>
   Notez l'alinéa rentrant
   et l'absence de saut de ligne entre les paragraphes…
</p>

<p lang="en" xml:lang="en">
   This is a paragraph in english
   <q>with a quotation and
   <q>a quotation in the quotation</q></q>…
</p>

<p lang="en-US" xml:lang="en-US">
   This is a paragraph in american english
   <q>with a quotation and
   <q>a quotation in the quotation</q></q>…
</p>

</body>

</html>

Lorsque vous affichez le résultat de ce code, diminuez la largeur de la fenêtre de votre navigateur afin que chaque paragraphe s'affiche au moins sur deux lignes, pour pouvoir apprécier les différences de mise en page (justifié/aligné à gauche, indentation/saut de ligne).

Vous devriez obtenir à peu près le résultat suivant, si le navigateur interprète bien la feuille de style.

Ceci est un paragraphe en français « avec une citation et « une citation dans la citation » »…

Notez l'alinéa rentrant et l'absence de saut de ligne entre les paragraphes…

This is a paragraph in english ‘with a quotation and “a quotation in the quotation”’…

This is a paragraph in american english “with a quotation and ‘a quotation in the quotation’”…

Note: Comme on a défini la page de code dans l'en-tête du fichier HTML, on peut utiliser les guillemets « en clair » (caractères non-ASCII) dans la feuille de style intégrée.

Décryptage de la feuile de style

Le CSS possède son propre wikilivre. Toutefois, afin que cela ne soit pas juste du copier-coller et que vous puissiez modifier l'exemple sans lire tout le wikilivre Programmation CSS, voici quelques éléments.

Dans l'expression « [lang|="en"] > * {…} » :

[lang|="en"] signifie « les éléments dont l'attribut est « lang="en" » » ;
> * désigne tous les éléments (*) situés en-dessous (>) de l'élément pré-cité, donc tous les sous-éléments de l'élément ayant pour attribut « lang="en" ».

L'expression « [lang|="en"] » désigne aussi les éléments ayant les attributs dérivés de en, notamment en-GB et en-US (mais ce cas-là est redéfini après).

L'expression « p:lang(en) » désigne les paragraphes (éléments introduits par la balise <p …>) dont l'attribut lang est "en".

La propriété quote indique les guillemets utilisés, sous la forme « "guillemet ouvrant" "guillemet fermant" ». Lorsqu'il y a deux paires de délimiteurs, la première paire correspond aux citations de premier niveau, la seconde paire aux citations de deuxième niveau (citation dans la citation).

Les autres éléments sont assez explicite en anglais.

Pour plus de détails voir : Programmation CSS/Les sélecteurs#Autres pseudo-classes.

Voir aussi