Internationalization

Le World Wide Web est accessible à tous, dans le monde entier, et porte son nom ! Cela signifie que votre site Web est potentiellement accessible à toute personne ayant accès à Internet, indépendamment de l'endroit où elle se trouve, de l'appareil qu'elle utilise ou de la langue qu'elle parle.

L'objectif de la conception réactive est de rendre votre contenu accessible à tous. Appliquer cette même philosophie aux langues humaines est la force motrice de l'internationalisation, en préparant vos contenus et vos conceptions pour un public international.

Propriétés logiques

L'anglais s'écrit de gauche à droite et de haut en bas, mais toutes les langues ne sont pas écrites de cette façon. Certaines langues, comme l'arabe et l'hébreu, se lisent de droite à gauche, et certaines polices de caractères japonaises se lisent à la verticale plutôt qu'à l'horizontale. Des propriétés logiques ont été introduites en CSS pour permettre l'utilisation de ces modes d'écriture.

Si vous avez rédigé du code CSS, vous avez peut-être utilisé des mots clés directionnels tels que "gauche", "droite", "haut" et "bas". Ces mots clés font référence à la disposition physique de l'appareil de l'utilisateur.

En revanche, les propriétés logiques font référence aux bords d'une boîte en relation avec le flux de contenu. Si le mode d'écriture change, le code CSS écrit avec des propriétés logiques est mis à jour en conséquence. Ce n'est pas le cas avec les propriétés directionnelles.

Alors que la propriété directionnelle margin-left fait toujours référence à la marge à gauche d'une zone de contenu, la propriété logique margin-inline-start fait référence à la marge située à gauche d'une zone de contenu dans une langue qui s'écrit de gauche à droite et à celle située à droite d'une zone de contenu dans une langue qui s'écrit de droite à gauche.

Pour que vos conceptions s'adaptent à différents modes d'écriture, évitez les propriétés directionnelles. Utilisez plutôt des propriétés logiques.

.byline {
  text-align: right;
}

.byline {
  text-align: end;
}

Lorsque CSS possède une valeur directionnelle spécifique comme left ou right, il existe une propriété logique correspondante. Alors qu'auparavant nous avions margin-left, nous avons maintenant margin-inline-start.

Dans une langue comme l'anglais où le texte s'étend de gauche à droite, inline-start correspond à "gauche" et inline-end à "droite".

De même, dans une langue comme l'anglais où le texte est écrit de haut en bas, block-start correspond à "top" et block-end à "bottom" (bas).

Si vous utilisez des propriétés logiques dans votre CSS, vous pouvez vous servir de la même feuille de style pour traduire vos pages. Même si vos pages sont traduites dans des langues écrites de droite à gauche ou de bas en haut, votre conception s’ajustera en conséquence. Vous n'avez pas besoin de créer des conceptions distinctes pour chaque langue. En utilisant des propriétés logiques, votre conception répondra à chaque mode d'écriture. Cela signifie que votre conception peut atteindre plus de personnes sans que vous ayez à passer du temps à créer des conceptions distinctes pour chaque langue.

Les techniques de mise en page CSS modernes telles que grid et flexbox utilisent des propriétés logiques par défaut. Si vous pensez en termes de inline-start et block-start au lieu de left et top, vous trouverez ces techniques modernes plus faciles à comprendre.

Prenez un schéma courant, comme une icône à côté d'un texte ou un libellé à côté d'un champ de formulaire. Au lieu de penser « l'étiquette doit avoir une marge à droite », pensez « l'étiquette doit avoir une marge au bout de son axe intégré ».

label {
  margin-right: 0.5em;
}

label {
  margin-inline-end: 0.5em;
}

Si cette page est traduite dans une langue qui s'écrit de droite à gauche, il n'est pas nécessaire de mettre à jour les styles. Vous pouvez simuler l'effet de l'affichage de vos pages dans une langue qui s'écrit de droite à gauche en utilisant l'attribut dir dans votre élément html. La valeur ltr signifie "de gauche à droite". La valeur "rtl" signifie "de droite à gauche".

Si vous souhaitez tester toutes les permutations des orientations de document (l'axe du bloc) et des modes d'écriture (l'axe intégré), voici cette démonstration interactive.

Identifier la langue de la page

Nous vous recommandons d'identifier la langue de votre page en utilisant l'attribut lang dans l'élément html.

<html lang="en">

Cet exemple concerne une page en anglais. Vous pouvez être encore plus précis. Voici comment déclarer qu'une page est en anglais américain:

<html lang="en-us">

La déclaration de la langue de votre document est utile pour les moteurs de recherche. Elle est également utile pour les technologies d'assistance comme les lecteurs d'écran et les assistants vocaux. En fournissant des métadonnées linguistiques, vous aidez ces types de synthétiseurs vocaux à prononcer correctement votre contenu.

L'attribut lang peut être ajouté à n'importe quel élément HTML, pas seulement à html. Si vous changez de langue sur votre page Web, signalez-le. Ici, un mot est en allemand:

<p>I felt some <span lang="de">schadenfreude</span>.</p>

Identifier la langue d'un document lié

Un autre attribut appelé hreflang peut être utilisé pour les liens. hreflang utilise la même notation de code de langue que l'attribut lang et décrit la langue du document associé. Si une traduction de votre page entière est disponible en allemand, créez un lien vers celle-ci comme suit:

<a href="/path/to/german/version" hreflang="de">German version</a>

Si vous utilisez du texte en allemand pour décrire le lien vers la version allemande, utilisez à la fois hreflang et lang. Ici, le texte "Deutsche Version" est balisé comme étant en allemand, et le lien de destination est également balisé en allemand:

<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>

Vous pouvez également utiliser l'attribut hreflang au niveau de l'élément link. Il se trouve dans l'élément head de votre document:

<link href="/path/to/german/version" rel="alternate" hreflang="de">

Toutefois, contrairement à l'attribut lang, qui peut s'appliquer à n'importe quel élément, hreflang ne peut être appliqué qu'aux éléments a et link.

Tenez compte de l'internationalisation dans votre conception

Lorsque vous concevez des sites Web qui seront traduits dans d'autres langues et dans d'autres modes d'écriture, tenez compte des facteurs suivants:

• Certaines langues, comme l'allemand, ont des mots longs d'usage courant. Votre interface doit s'adapter à ces mots, donc évitez de concevoir des colonnes étroites. Vous pouvez également utiliser le code CSS pour introduire des traits d'union.
• Assurez-vous que les valeurs line-height peuvent accepter des caractères tels que les accents et d'autres signes diacritiques. Des lignes de texte qui semblent correctes en anglais peuvent se chevaucher dans une autre langue.
• Si vous utilisez une police Web, assurez-vous qu'elle comporte un nombre de caractères suffisamment large pour couvrir les langues dans lesquelles vous allez traduire.
• Ne créez pas d'images contenant du texte. Si vous le faites, vous devrez créer des images distinctes pour chaque langue. Séparez plutôt le texte et l'image, et utilisez du code CSS pour superposer le texte sur l'image.

Réfléchissez à une stratégie internationale

Des attributs comme lang et hreflang rendent votre code HTML plus pertinent pour l'internationalisation. De même, les propriétés logiques rendent votre CSS plus adaptable.

Si vous avez l'habitude de penser en termes de top, bottom, left et right, il peut être difficile de commencer à penser à block start, block end, inline start et inline end à la place. Mais cela en vaut la peine. Les propriétés logiques sont essentielles pour créer des mises en page réellement responsives.

Testez vos connaissances

Testez vos connaissances sur l'internationalisation.

Vous allez ensuite apprendre à aborder les mises en page au niveau de la page, également appelées mises en page avec macros.