Propriétés logiques dans les mises en page RTL
Créez une mise en page véritablement bidirectionnelle qui s’inverse automatiquement pour l’arabe et l’hébreu grâce aux propriétés logiques.
Propriétés logiques dans les mises en page RTL est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 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 CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Configurer le RTL dans HTML
Déclarez le RTL dans HTML avec l’attribut dir et un attribut lang correspondant :
<div dir="rtl" lang="ar" class="rtl-box">مرحبا بكم في تخطيط RTL</div>
dir="rtl" en CSS
Vous pouvez également définir la direction en CSS — ce qui est utile pour les vérifications ou les sections partiellement en RTL :
<div dir="rtl">هذا العنصر باتجاه RTL</div>
Vérification de l’alternance LTR/RTL
Vérification rapide : ajoutez dir="rtl" à <html>. Avec les propriétés logiques, la mise en page devrait être correctement inversée. Avec les propriétés physiques, vous verrez ce qui doit être corrigé.
Ce qui s’adapte automatiquement
Lorsque dir="rtl" est défini, les éléments suivants s’inversent automatiquement grâce aux propriétés logiques :
- Alignement du texte (début/fin)
- Marges et espacements internes (début/fin en ligne)
- Bordures (début/fin en ligne)
- Flottants (début/fin en ligne)
- Positionnement (début/fin du positionnement en ligne)
Ce qui ne s’adapte NOT automatiquement
Même avec les propriétés logiques, les éléments suivants nécessitent une attention particulière en RTL :
- Images d’arrière-plan contenant des éléments directionnels
- Icônes SVG dont le sens dépend de la direction (flèches, chevrons)
- Transformations comme
translateX()— utiliseztranslateX(calc(-1 * var(--offset)))avec un indicateur de direction - Positionnement absolu avec des valeurs en pixels explicites
Inversion des icônes SVG
CSS fournit une méthode claire pour inverser les icônes directionnelles en RTL :
<div dir="rtl"><span class="icon-arrow"></span> Mirrored arrow in RTL</div>
Variable CSS tenant compte de la direction
Une astuce avec une variable CSS pour obtenir des valeurs tenant compte de la direction :
<div dir="rtl" class="drawer">Drawer</div>
Exemple RTL pratique
Un composant de carte utilisant des propriétés logiques :
<div dir="rtl" class="card"><span class="card__icon">🔔</span><span class="card__text">تنبيه جديد</span></div>
font-size et RTL
Certaines polices arabes paraissent plus grandes ou plus petites à taille de pixel égale à celle des équivalents latins. Définissez la taille de police pour chaque système d’écriture si nécessaire :
<p>Default text (16px)</p>
<p lang="ar">نص عربي (17px)</p>
Outils de test
Les outils de développement du navigateur peuvent simuler des mises en page bidirectionnelles. Utilisez également l’arbre d’accessibilité de Chrome pour vérifier que l’ordre de lecture suit l’ordre logique plutôt que l’ordre visuel pour les lecteurs d’écran.
Liste de vérification RTL en situation réelle
Liste de vérification RTL :
- Toutes les marges et tous les espacements internes utilisent des propriétés logiques
- Toutes les bordures utilisent le début et la fin en ligne
- L’alignement du texte utilise le début et la fin
- Les icônes directionnelles sont inversées avec scaleX(-1)
- Les positions absolues utilisent inset-inline-* lorsque nécessaire
- Les conteneurs défilables défilent depuis le bord approprié
Vérification rapide
Quelle transformation CSS constitue la méthode la plus simple pour inverser une icône SVG en forme de flèche directionnelle dans les mises en page RTL ?
Récapitulatif
Définissez dir="rtl" sur l’élément html pour obtenir une mise en page RTL. Les propriétés logiques adaptent automatiquement les marges, les espacements internes, les bordures et l’alignement. Les pixels utilisés dans les transformations et le positionnement absolu nécessitent toujours une prise en compte manuelle du RTL. Inversez les icônes directionnelles avec scaleX(-1). Testez en activant et en désactivant dir="rtl" sur votre élément racine.
Apprends CSS avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 40
- Leçons
- 159
Questions Fréquemment Posées
La leçon « Propriétés logiques dans les mises en page RTL » est-elle gratuite ?
Oui — le texte complet de « Propriétés logiques dans les mises en page RTL » 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 CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Propriétés logiques dans les mises en page RTL » ?
Créez une mise en page véritablement bidirectionnelle qui s’inverse automatiquement pour l’arabe et l’hébreu grâce aux propriétés logiques. Tu pratiques CSS 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 CSS Academy ?
Aucune expérience préalable n'est requise. CSS 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 4 sur 4.
Combien de temps prend la leçon « Propriétés logiques dans les mises en page RTL » ?
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 CSS Academy ?
Oui. Chaque leçon CSS 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
- Pourquoi les propriétés logiques : internationalisation
- Directions des blocs et des éléments en ligne
- Marges, espacements internes et bordures logiques
- Propriétés logiques dans les mises en page RTL