Le World Wide Web est accessible à tous dans le monde. Son nom l'indique ! Cela signifie que votre site Web est potentiellement accessible à toute personne ayant accès à Internet, peu importe où ils se trouvent, l'appareil qu'ils utilisent ou la langue qu'ils parlent.
L'objectif de la conception réactive est de rendre votre contenu accessible à tous. L'application de cette même philosophie aux langues humaines est le moteur de l'internationalisation : elle prépare 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 lisent verticalement et non horizontalement. Pour s'adapter à ces modes d'écriture, des propriétés logiques ont été introduites en CSS.
Si vous écrivez 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 pour 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.
La propriété directionnelle margin-left fait toujours référence à la marge située sur le côté gauche d'une zone de contenu.
La propriété logique margin-inline-start fait référence à la marge située sur le côté gauche d'une zone de contenu dans une langue qui s'écrit de gauche à droite.
et la marge sur le côté droit d’une zone de contenu dans une langue s’écrivant 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 a 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'écoule de gauche à droite,
inline-start correspond à "left" et inline-end correspond à "right".
De même, dans une langue comme l'anglais
où le texte est écrit de haut en bas,
block-start correspond à "haut" et block-end correspond à "bottom" (bas).
Si vous utilisez des propriétés logiques dans votre code 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 écrites de droite à gauche ou de bas en haut, votre conception sera ajustée 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 toucher 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 la grille et le 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
alors vous trouverez ces techniques modernes
plus faciles à comprendre.
Adoptez 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 « l'étiquette devrait avoir une marge sur la droite », pensez « le libellé devrait avoir une marge à l’extrémité de son axe aligné ».
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,
les styles n'ont pas besoin d'être mis à jour.
Vous pouvez imiter l'effet obtenu lorsque vos pages s'affichent dans une langue qui s'écrit de droite à gauche en utilisant l'attribut dir dans 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 directions du document (axe de bloc) et des modes d'écriture (axe intégré), voici une 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. Pour déclarer qu'une page utilise l'anglais américain:
<html lang="en-us">
Il est utile de déclarer la langue de votre document pour les moteurs de recherche. 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 ajouté à n'importe quel élément HTML, pas seulement 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.
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 à la fois hreflang et lang.
Ici, le texte "Deutsche Version" est balisée comme étant en allemand, et le lien de destination est également balisé 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. Ce qui est indiqué dans le fichier 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.
Tenir compte de 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, ont de longs mots d'usage courant. Votre interface doit s'adapter à ces mots. Par conséquent, évitez de concevoir des colonnes étroites. Vous pouvez également utiliser du code CSS pour insérer des traits d'union.
- Assurez-vous que vos valeurs
line-heightpeuvent accepter des caractères tels que les accents et d'autres caractères 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 une plage de caractères suffisamment large pour couvrir les langues de traduction.
- 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, et utilisez du code 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 significatif pour l'internationalisation.
De même, les propriétés logiques rendent votre CSS plus flexible.
Si vous avez l'habitude de penser en termes de top, bottom, left et right,
il peut être difficile de penser à block start, block end, inline start et inline end à la place.
Mais ça en vaut la peine. Les propriétés logiques sont essentielles pour créer des mises en page vraiment responsives.
Testez vos connaissances
Testez vos connaissances sur l'internationalisation.
En français, le côté physique right d'une boîte est logiquement de quel côté ?
block-starttopblock-endbottominline-startleftinline-endQuel attribut devez-vous ajouter à votre code HTML pour le rendre plus pertinent pour l'internationalisation ?
englishlanglanguagei18nEnsuite, vous apprendrez à aborder les mises en page au niveau de la page, également appelées mises en page macro.