Skip to main content

Chapitre 71 : Gestion du RTL via classes CSS vs sélecteurs logiques

Pour un architecte senior, le choix se base sur des métriques de maintenance et de performance.

CritèreApproche par Classes (.rtl)Propriétés Logiques (inline-start)
Volume de codeÉlevé (Duplication LTR/RTL)Faible (Une seule déclaration)
MaintenanceRisquée (Oublis de surcharge)Simple (Changement unique)
PerformanceNeutre (Sélecteurs classiques)Optimale (Calcul natif du moteur)
PrécisionTotale (Contrôle élément par élément)Très élevée (via :dir())
CompatibilitéUniverselleNavigateurs Modernes (Evergreen)
CognitionIntuitive (Gauche/Droite)Abstraite (Début/Fin)

Questions clés​

1. Pourquoi utiliser margin-inline-start plutôt que margin-left même si mon site n'est pas encore traduit en arabe ?

Découvrir la réponse

L'adoption préventive des propriétés logiques réduit drastiquement le coût d'entrée pour l'internationalisation future. C'est une approche "Future-Proof". Si le besoin RTL arrive, le site est déjà compatible sans modifier une seule ligne de CSS.

2. Le sélecteur :dir(rtl) est-il identique à la classe .rtl ?

Découvrir la réponse

Non. La classe .rtl est une marque manuelle dans le DOM. :dir(rtl) est une pseudo-classe qui regarde la valeur de l'attribut dir (ou la direction héritée). :dir() est plus puissant car il s'adapte dynamiquement à la directionnalité réelle du contenu, même si celle-ci change localement dans la page (ex: un paragraphe en anglais au milieu d'une page en arabe).

3. Comment gérer les images ou icônes qui doivent être inversées (miroirées) ?

Découvrir la réponse

Les propriétés logiques ne retournent pas les images. Pour inverser une icône (comme une flèche "suivant"), on peut utiliser :

  • :dir(rtl) .arrow { transform: scaleX(-1); }
  • Ou mieux, utiliser des icônes SVG distinctes ou des variables CSS pour l'orientation.

4. Est-ce que text-align: start fonctionne partout ?

Découvrir la réponse

Oui, start et end sont supportés depuis très longtemps. Ils remplacent avantageusement left et right car ils basculent automatiquement selon la direction du texte.

Mise en pratique​

Exercice 1 : Migration vers le Logique (Reproduction guidée)​

Énoncé : Convertissez le bloc CSS suivant, basé sur des propriétés physiques, en utilisant uniquement des propriétés logiques pour supprimer le besoin de la classe .rtl.

.nav-item {
  padding-left: 15px;
  padding-right: 10px;
  border-left: 2px solid blue;
  text-align: left;
}

.rtl .nav-item {
  padding-left: 10px;
  padding-right: 15px;
  border-left: 0;
  border-right: 2px solid blue;
  text-align: right;
}
Découvrir la solution commentée
/* 
  On remplace left/right par inline-start/inline-end.
  Le navigateur gère l'inversion automatiquement selon l'attribut dir="rtl" ou "ltr".
*/
.nav-item {
  padding-inline-start: 15px;
  padding-inline-end: 10px;
  border-inline-start: 2px solid blue;
  text-align: start;
}

Exercice 2 : Gestion d'exception avec :dir() (Adaptation)​

Énoncé : Vous avez un composant de "Player Audio". La barre de progression doit être RTL, mais le bouton "Play/Pause" doit rester systématiquement à gauche de l'écran, peu importe la langue, pour des raisons de standardisation UX.

Implémentez ce comportement en utilisant :dir().

Découvrir la solution commentée
/* Style général logique */
.audio-player {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.progress-bar {
  flex-grow: 1;
  margin-inline-start: 10px;
}

/* 
  Exception : On force le bouton Play à rester à gauche 
  en utilisant une propriété physique 'left' ou en surchargeant 
  le comportement logique.
*/
:dir(rtl) .play-button {
  /* On annule le comportement miroir si nécessaire */
  margin-inline-start: 0;
  margin-inline-end: 0;
  position: absolute;
  left: 0; 
}

Exercice 3 : Architecture d'un Dashboard complexe (Conception)​

Énoncé : Vous concevez un Dashboard avec une barre latérale (Sidebar) et un contenu principal.

  1. La Sidebar doit être à gauche en LTR et à droite en RTL.
  2. Le contenu principal doit avoir une marge intérieure qui s'adapte.
  3. Vous devez supporter des navigateurs modernes, mais garder une trace de la méthode de surcharge pour les éléments "non-traduisibles" (comme des graphiques financiers dont l'axe X est toujours chronologique de gauche à droite).

Proposez une structure CSS robuste.

Découvrir la solution commentée
/* 
  1. Utilisation des propriétés logiques pour le layout global.
  On utilise Grid pour simplifier la directionnalité.
*/
.dashboard-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  /* 
     En RTL, grid-template-columns place la première colonne 
     à droite. Pas besoin de modifier le CSS.
  */
}

.sidebar {
  background: #f4f4f4;
  padding-inline-start: 20px;
}

.main-content {
  padding-inline-start: 30px;
}

/* 
  2. Gestion des éléments "non-traduisibles" (L'axe X du graphique).
  On utilise :dir(rtl) pour forcer le mode LTR localement 
  sur le composant graphique.
*/
.financial-chart {
  direction: ltr; /* Force le contenu à être LTR */
  text-align: left;
}

/* 
  3. Si on a besoin d'une modification très spécifique 
  qui ne peut être gérée par les propriétés logiques 
  (ex: une image de fond positionnée précisément), 
  on utilise :dir(rtl) pour l'exception.
*/
:dir(rtl) .financial-chart-header {
  margin-left: 0;
  margin-right: 10px;
}