« Le langage HTML/Internationalisation » : différence entre les versions

Un livre de Wikilivres.
Contenu supprimé Contenu ajouté
Ligne 138 : Ligne 138 :
; Exemple
; Exemple
{{vert|<html}} lang="fr" {{vert|>}}
{{vert|<html}} lang="fr" {{vert|>}}
{{vert|<head>}}
{{vert|<head>}}
{{bleu|<style>}}
{{bleu|<style>}}
{{rouge|<!--}}********** Français **********{{rouge|-->}}
{{rouge|/*}} ********** Français ********** {{rouge|*/}}
HTML:lang(fr) { quotes: '« ' ' »'; } {{rouge|<!--}} guillemets de citation pour tout le document {{rouge|-->}}
HTML:lang(fr) { quotes: '\00ab\00a0' '\00a0\00bb'; } {{rouge|/*}} guillemets de citation pour tout le document {{rouge|*/}}
p:lang(fr) {
p:lang(fr) {
text-align: justify; {{rouge|<!--}} texte justifié {{rouge|-->}}
text-align: justify; {{rouge|/*}} texte justifié {{rouge|*/}}
text-indent: 2em; {{rouge|<!--}} retrait de paragraphe {{rouge|-->}}
text-indent: 2em; {{rouge|/*}} retrait de paragraphe {{rouge|*/}}
margin-top: 0; {{rouge|<!--}} pas de saut de ligne {{rouge|-->}}
margin-top: 0; {{rouge|/*}} pas de saut de ligne {{rouge|*/}}
margin-bottom: 0;
margin-bottom: 0;
quotes: '« ' ' »'; {{rouge|<!--}} guillemets de citation pour un paragraphe {{rouge|-->}}
quotes: '\00ab\00a0' '\00a0\00bb'; {{rouge|/*}} guillemets de citation pour un paragraphe {{rouge|*/}}
}
}
{{rouge|<!--}}********** Anglais **********{{rouge|-->}}
{{rouge|/*}} ********** Anglais ********** {{rouge|*/}}
HTML:lang(en) { quotes: '' '' '' ''; } {{rouge|<!--}} guillemets de citation pour tout le document {{rouge|-->}}
HTML:lang(en) { quotes: '\2018' '\2019' '\201c' '\201d'; } {{rouge|/*}} guillemets de citation pour tout le document {{rouge|*/}}
HTML:lang(en-GB) { quotes: '' '' '' ''; } {{rouge|<!--}} 2 niveaux de citation {{rouge|-->}}
HTML:lang(en-GB) { quotes: '\2018' '\2019' '\201c' '\201d'; } {{rouge|/*}} 2 niveaux de citation {{rouge|*/}}
HTML:lang(en-US) { quotes: '' '' '' ''; } {{rouge|<!--}} différents en GB et aux US {{rouge|-->}}
HTML:lang(en-US) { quotes: '\201c' '\201d' '\2018' '\2019'; } {{rouge|/*}} différents en GB et aux US {{rouge|*/}}
p:lang(en) {
p:lang(en) {
text-align:left; {{rouge|<!--}} texte aligné à gauche {{rouge|-->}}
text-align:left; {{rouge|/*}} texte aligné à gauche {{rouge|*/}}
text-indent: 0; {{rouge|<!--}} pas de retrait de paragraphe {{rouge|-->}}
text-indent: 0; {{rouge|/*}} pas de retrait de paragraphe {{rouge|*/}}
margin-top: 1em;
margin-top: 1em;
margin-bottom: 1em; {{rouge|<!--}} saut de ligne {{rouge|-->}}
margin-bottom: 1em; {{rouge|/*}} saut de ligne {{rouge|*/}}
quotes: '' '' '' '' {{rouge|<!--}} guillemets de citation pour un paragraphe {{rouge|-->}}
quotes: '\2018' '\2019' '\201c' '\201d' {{rouge|/*}} guillemets de citation pour un paragraphe {{rouge|*/}}
}
}
p:lang(en-GB) { quotes: '' '' '' ''; }
p:lang(en-GB) { quotes: '\2018' '\2019' '\201c' '\201d'; }
p:lang(en-US) { quotes: '' '' '' ''; }
p:lang(en-US) { quotes: '\201c' '\201d' '\2018' '\2019'; }
{{bleu|</style>}}
{{bleu|</style>}}
{{vert|</head>}}
{{vert|</head>}}
{{vert|<body>}}
{{vert|<p}} lang="fr"{{vert|>}}
{{vert|<p}} lang="fr"{{vert|>}}
Ceci est un paragraphe en français
Ceci est un paragraphe en français
Ligne 169 : Ligne 175 :
{{rouge|<q>}}une citation dans la citation{{rouge|</q>}}{{bleu|</q>}}…
{{rouge|<q>}}une citation dans la citation{{rouge|</q>}}{{bleu|</q>}}…
{{vert|</p>}}
{{vert|</p>}}
{{vert|<body>}}
{{vert|<p}} lang="en"{{vert|>}}
{{vert|<p}} lang="en"{{vert|>}}

Version du 19 mars 2007 à 12:39

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 Calques).


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">, e utilisant le même codage que ci-dessus (par exemple <meta http-equiv="content-language" content="fr-BE"> pour le français de Belgique). 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-1 (dite « alpha-2 »), 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
  • portuguais : 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 portuguais : 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

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
  • français : fr
    • français de France : fr-FR
    • français de Belgique : fr-BE
    • français du Canada : fr-CA

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 dans laquelle la mise en page d'un paragraphe dépend de la langue.

/* ********** Français ********** */
   HTML:lang(fr) { quotes: '\00ab\00a0' '\00a0\00bb'; } /* guillemets de citation pour tout le document */
   p:lang(fr) {
      text-align: justify; /* texte justifié */
      text-indent: 2em;    /* retrait de paragraphe */
      margin-top: 0;       /* pas de saut de ligne */
      margin-bottom: 0;
      quotes: '\00ab\00a0' '\00a0\00bb';   /* guillemets de citation pour un paragraphe */
   }
/* ********** Anglais ********** */
   HTML:lang(en) { quotes: '\2018' '\2019' '\201c' '\201d'; } /* guillemets de citation pour tout le document */
   HTML:lang(en-GB) { quotes: '\2018' '\2019' '\201c' '\201d'; } /* 2 niveaux de citation  */
   HTML: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;     /* saut de ligne */
      quotes: '\2018' '\2019' '\201c' '\201d' /* guillemets de citation pour un paragraphe */
   }
   p:lang(en-GB) { quotes: '\2018' '\2019' '\201c' '\201d'; }
   p:lang(en-US) { quotes: '\201c' '\201d' '\2018' '\2019'; }

Les guillemets étant des caractères non-ASCII, on les mentionne en CSS après une barre de fraction, en indiquant le code Unicode en hexadécimal (U+00ab est le guillemet ouvrant français « « », U+00a0 est l'espace insécable…).

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

Exemple
<html lang="fr" >

<head>

   <style>
/* ********** Français ********** */
   HTML:lang(fr) { quotes: '\00ab\00a0' '\00a0\00bb'; } /* guillemets de citation pour tout le document */
   p:lang(fr) {
      text-align: justify; /* texte justifié */
      text-indent: 2em;    /* retrait de paragraphe */
      margin-top: 0;       /* pas de saut de ligne */
      margin-bottom: 0;
      quotes: '\00ab\00a0' '\00a0\00bb';   /* guillemets de citation pour un paragraphe */
   }
/* ********** Anglais ********** */
   HTML:lang(en) { quotes: '\2018' '\2019' '\201c' '\201d'; } /* guillemets de citation pour tout le document */
   HTML:lang(en-GB) { quotes: '\2018' '\2019' '\201c' '\201d'; } /* 2 niveaux de citation  */
   HTML: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;     /* saut de ligne */
      quotes: '\2018' '\2019' '\201c' '\201d' /* guillemets de citation pour un paragraphe */
   }
   p:lang(en-GB) { quotes: '\2018' '\2019' '\201c' '\201d'; }
   p:lang(en-US) { quotes: '\201c' '\201d' '\2018' '\2019'; }
   </style>

</head>

<body>

<p lang="fr">
   Ceci est un paragraphe en français
   <q>avec une citation et
   <q>une citation dans la citation</q></q></p>

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

</body>

</html>


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

Voir aussi