`dir=rtl` pour le texte de droite à gauche
Activez une mise en page RTL pour l’arabe, l’hébreu et les autres langues RTL.
`dir=rtl` pour le texte de droite à gauche est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Rôle de l’attribut dir
L’attribut dir déclare le sens de base du texte d’un élément. dir="ltr" (de gauche à droite, le sens par défaut de la plupart des langues) ou dir="rtl" (de droite à gauche, pour l’arabe, l’hébreu, le persan et l’ourdou).
Définir dir sur html pour un site RTL entier
Pour les sites arabes, hébreux, persans et ourdous, définissez dir="rtl" sur l’élément racine. Cela inverse le flux par défaut de chaque bloc : le texte s’aligne à droite, les listes sont indentées à droite, les barres de défilement se déplacent à gauche et les mises en page se reflètent automatiquement avec le CSS moderne.
<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>Texte bidirectionnel
Le texte à sens mixte (de l’arabe avec des noms de marques anglais intégrés) suit automatiquement l’algorithme bidirectionnel Unicode. Le sens de base (défini par dir) contrôle la disposition des segments unidirectionnels au niveau de la ligne ; chaque suite de caractères s’écoule dans le sens naturel de son propre système d’écriture.
Propriétés logiques CSS
Le CSS moderne utilise des propriétés logiques qui s’adaptent au sens : margin-inline-start (à gauche en LTR, à droite en RTL), padding-inline-end, border-inline-start. Remplacer left/right par start/end permet à une seule feuille de style de servir dans les deux sens.
/* Works in both directions */
.card {
padding-inline-start: 16px;
margin-block-end: 12px;
border-inline-end: 1px solid #ccc;
}Flexbox et Grid s’adaptent automatiquement
Le sens des lignes de Flexbox respecte dir : en RTL, les éléments s’écoulent de droite à gauche. Les colonnes des modèles de grille s’inversent également. Ainsi, la plupart des mises en page créées avec flex ou grid fonctionnent en RTL sans CSS spécifique au sens : les mises en page modernes sont indépendantes du sens.
Les icônes qui doivent s’inverser
Les icônes directionnelles (flèche retour, flèche suivante, annulation/rétablissement) doivent s’inverser en RTL. Utilisez le CSS transform: scaleX(-1) dans [dir="rtl"], ou fournissez des variantes SVG distinctes pour RTL. Les icônes non directionnelles (recherche, paramètres, engrenage) restent identiques.
[dir="rtl"] .icon-back {
transform: scaleX(-1);
}Alignement du texte
Préférez text-align: start à text-align: left : start correspond à gauche en LTR et à droite en RTL. Il en va de même pour end. Un alignement sensible au sens élimine toute une catégorie de problèmes lors de l’ajout de la prise en charge de RTL.
Remplacer dir pour un élément
Définissez dir="auto" sur un élément pour laisser le navigateur détecter le sens à partir du premier caractère à forte directionnalité : <p dir="auto">{user.name}</p> gère les noms fournis par les utilisateurs, qui peuvent être arabes, anglais ou mixtes, sans traitement particulier.
Encapsulation bidirectionnelle
Les éléments bdi (isolation bidirectionnelle) et bdo (remplacement bidirectionnel) permettent de contrôler finement la manière dont l’algorithme bidirectionnel traite un texte précis — ce qui est utile pour reproduire mot pour mot une saisie utilisateur ou imposer un sens particulier à un extrait de code au milieu d’un texte courant.
Champs de formulaire
Les champs de saisie héritent de dir de leur parent. Pour du texte fourni par l’utilisateur dont le sens varie (une application de discussion avec des utilisateurs parlant plusieurs langues), définissez dir="auto" sur chaque champ afin que chacun s’affiche correctement selon son contenu.
Tester les mises en page RTL
Les navigateurs permettent de prévisualiser RTL en définissant temporairement document.documentElement.dir = "rtl" dans la console de DevTools. Vérifiez l’orientation des icônes, les espacements internes et les marges, la position de la barre de défilement, ainsi qu’aucun élément n’utilise left/right en dur là où start/end seraient nécessaires.
La direction CSS diffère de la direction de la mise en page
La propriété CSS direction et l’attribut HTML dir ont le même effet sur la plupart des mises en page. Préférez l’attribut HTML, car les technologies d’assistance, les logiciels d’envoi de courriels et les autres consommateurs le lisent, tandis que la propriété CSS ne modifie que l’affichage dans les navigateurs.
Vérification des connaissances
Pourquoi les propriétés logiques CSS comme margin-inline-start sont-elles préférées à margin-left lors de la prise en charge des langues RTL ?
Résumé
dir="rtl" sur <html> inverse le sens de base pour les sites arabes, hébreux, persans et ourdous. Les propriétés logiques CSS (margin-inline-start, padding-block-end) s’adaptent automatiquement. Les mises en page Flexbox et Grid se reflètent sans modification. Inversez les icônes directionnelles, utilisez text-align: start/end et utilisez dir="auto" pour le contenu utilisateur dont le sens est inconnu.
Questions Fréquemment Posées
La leçon « `dir=rtl` pour le texte de droite à gauche » est-elle gratuite ?
Oui — le texte complet de « `dir=rtl` pour le texte de droite à gauche » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « `dir=rtl` pour le texte de droite à gauche » ?
Activez une mise en page RTL pour l’arabe, l’hébreu et les autres langues RTL. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « `dir=rtl` pour le texte de droite à gauche » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Attribut `lang` et lecteurs d’écran
- `dir=rtl` pour le texte de droite à gauche
- Les éléments `bdi` et `bdo`
- `charset` et gestion d’Unicode : caractères spéciaux