Internationalisation

Le Web est accessible à tous dans le monde. C'est d'ailleurs ce que signifie son nom ! Cela signifie que votre site Web est potentiellement accessible à toute personne ayant accès à Internet, où qu'elle se trouve, quel que soit l'appareil qu'elle utilise ou les langues qu'elle parle.

L'objectif du responsive design est de rendre votre contenu accessible à tous. L'internationalisation, qui consiste à préparer vos contenus et vos conceptions pour une audience internationale, repose sur la même philosophie appliquée aux langues humaines.

Propriétés logiques

L'anglais s'écrit de gauche à droite et de haut en bas, mais ce n'est pas le cas de toutes les langues. Certaines langues, comme l'arabe et l'hébreu, se lisent de droite à gauche, et certaines typographies japonaises se lisent verticalement au lieu d'horizontalement. Pour s'adapter à ces modes d'écriture, des propriétés logiques ont été introduites dans CSS.

Si vous écrivez du code CSS, vous avez peut-être utilisé des mots clés directionnels comme "left" (gauche), "right" (droite), "top" (haut) et "bottom" (bas). Ces mots clés font référence à la disposition physique de l'appareil de l'utilisateur.

Les propriétés logiques, quant à elles, font référence aux bordures d'une boîte en fonction du flux de contenu. Si le mode d'écriture change, le CSS écrit avec des propriétés logiques sera 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 sur le côté gauche d'une boîte de contenu, la propriété logique margin-inline-start fait référence à la marge sur le côté gauche d'une boîte de contenu dans une langue de gauche à droite, et à la marge sur le côté droit d'une boîte de contenu dans une langue 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 le CSS comporte une valeur directionnelle spécifique telle que left ou right, il existe une propriété logique correspondante. Alors qu'avant nous avions margin-left, nous avons maintenant aussi margin-inline-start.

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

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

Si vous utilisez des propriétés logiques dans votre CSS, vous pouvez utiliser la même feuille de style pour les traductions de vos pages. Même si vos pages sont traduites dans des langues qui s'écrivent de droite à gauche ou de bas en haut, votre mise en page s'adaptera en conséquence. Vous n'avez pas besoin de créer des designs distincts pour chaque langue. En utilisant des propriétés logiques, votre conception s'adaptera à tous les modes d'écriture. Cela signifie que votre design peut toucher plus de personnes sans que vous ayez à passer du temps à créer des designs distincts pour chaque langue.

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

Prenons un modèle courant comme une icône à côté d'un texte ou un libellé à côté d'un champ de formulaire. Au lieu de penser "le libellé doit avoir une marge à droite", pensez "le libellé doit avoir une marge à la fin de son axe inline".

label {
  margin-right: 0.5em;
}

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

Si cette page est traduite dans une langue qui se lit de droite à gauche, les styles n'auront pas besoin d'être mis à jour. Vous pouvez simuler l'effet de l'affichage de vos pages dans une langue de droite à gauche en utilisant l'attribut dir sur votre élément html. Une valeur de ltr signifie "de gauche à droite". Une valeur "rtl" signifie "de droite à gauche".

Si vous souhaitez tester toutes les permutations de sens de lecture (axe de bloc) et de modes d'écriture (axe en ligne), consultez cette démonstration interactive.

Identifier la langue d'une page

Nous vous conseillons d'identifier la langue de votre page à l'aide de l'attribut lang sur l'élément html.

<html lang="en">

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

<html lang="en-us">

Il est utile pour les moteurs de recherche de déclarer la langue de votre document. Il est également utile pour les technologies d'assistance telles que 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 utilisé sur n'importe quel élément HTML, et pas seulement sur html. Si vous changez de langue sur votre page Web, indiquez-le. Dans ce cas, un mot est en allemand :

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

Identifier la langue d'un document associé

Il existe un autre attribut appelé hreflang que vous pouvez utiliser sur les liens. L'attribut 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 l'intégralité de votre page est disponible en allemand, ajoutez 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 hreflang et lang. Ici, le texte "Deutsche Version" est marqué comme étant en allemand, et le lien de destination est également marqué comme étant en allemand :

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

Vous pouvez également utiliser l'attribut hreflang sur l'élément link. Placez le code suivant dans la section head de votre document :

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

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

Pensez à l'internationalisation dans votre conception

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

• Certaines langues, comme l'allemand, utilisent couramment des mots longs. Votre interface doit s'adapter à ces mots. Évitez donc de concevoir des colonnes étroites. Vous pouvez également utiliser le CSS pour insérer des traits d'union.
• Assurez-vous que vos valeurs line-height peuvent contenir des caractères tels que des 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 typographie Web, assurez-vous qu'elle comporte une gamme de caractères suffisamment large pour couvrir les langues dans lesquelles vous allez traduire votre contenu.
• Ne créez pas d'images contenant du texte. Dans ce cas, vous devrez créer des images distinctes pour chaque langue. Séparez plutôt le texte et l'image, puis utilisez le CSS pour superposer le texte sur l'image.

Réfléchissez à une stratégie internationale

Les attributs tels que 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 en termes de block start, block end, inline start et inline end. Mais cela en vaut la peine. Les propriétés logiques sont essentielles pour créer des mises en page véritablement responsives.

Vérifiez vos connaissances

Testez vos connaissances sur l'internationalisation.

Ensuite, vous apprendrez à aborder les mises en page au niveau de la page, également appelées mises en page macro.