Attribut dir de base
L'attribut dir avec la valeur 'rtl' est la base de toute conception web RTL. Il est généralement défini sur la balise <html> ou <body> et influence l'alignement du texte, l'ordre par défaut des cellules de tableau et la direction des propriétés CSS telles que 'text-align'. Sans cet attribut, le contenu reste aligné à gauche, ce qui semble peu naturel pour les langues RTL. De plus, vous devez remplacer 'dir' au niveau du conteneur en cas de directions mixtes. Un attribut dir manquant ou incorrect rend les mises en page difficiles à lire et doit donc être traité en priorité.
Mise en page miroir et propriétés CSS logiques
Au lieu de propriétés physiques comme 'left' et 'right', utilisez des propriétés CSS logiques comme 'margin-inline-start' et 'padding-inline-end'. Celles-ci s'adaptent automatiquement à la direction d'écriture et évitent les réécritures manuelles. Une mise en page miroir signifie que la barre de navigation commence à droite et le contenu à gauche. Avec des valeurs logiques telles que 'float: inline-start' ou 'text-align: start', vous y parvenez sans requêtes média. Les propriétés modernes de CSS Grid et Flexbox comme 'justify-content: flex-start' agissent correctement en fonction de l'attribut dir. Testez toujours avec du contenu réel, car les propriétés logiques ne sont pas interprétées de la même manière par tous les navigateurs.
Chiffres et latin intégré
Dans les textes RTL, les chiffres et les lettres latines intégrées restent alignés de gauche à droite. Cela présente des défis car ils peuvent perturber le sens de lecture. Utilisez l'attribut 'unicode-bidi' ou 'direction: ltr' pour ces éléments afin de garantir un affichage cohérent. Pour les formats de date ou de numéro, il est conseillé d'adapter l'ordre à la culture RTL. Veillez également à la mise en page des formulaires, où les champs de saisie pour les chiffres doivent rester alignés à gauche. Un traitement minutieux de ce mélange de directions évite les ruptures visuelles et améliore la lisibilité.
Polices de caractères et typographie
Le choix de la police est crucial : l'arabe, le persan et l'hébreu nécessitent des polices avec une prise en charge appropriée des glyphes. Les options populaires incluent 'Noto Naskh Arabic', 'Vazir' pour le persan et 'Noto Sans Hebrew'. Définissez des polices de secours, par exemple 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Veillez à des tailles de police et à un interlignage suffisants, car les polices RTL sont souvent plus étroites ou plus complexes. Évitez l'italique, car il n'existe pas dans de nombreuses polices arabes. Testez l'affichage sur différents appareils pour garantir que les polices sont correctement chargées et lisibles.
Icônes et mise en miroir
Les icônes qui indiquent une direction (par exemple, les flèches, les symboles avant/arrière) doivent être inversées dans les mises en page RTL. Pour ce faire, utilisez des transformations CSS comme 'transform: scaleX(-1)' ou des ensembles d'icônes prenant automatiquement en charge le RTL (par exemple, Font Awesome avec l'attribut 'dir'). Les icônes sans connotation directionnelle (par exemple, maison, paramètres) restent inchangées. Assurez-vous que l'inversion n'altère pas la sémantique. Testez toutes les icônes en vue RTL, car des inversions involontaires peuvent nuire à l'utilisabilité.
