Utilisez dir en HTML pour définir le sens de lecture de base du texte et flex-direction: row-reverse en CSS pour inverser le flux d’une ligne flex. Pour disposer des cartes sur une page publique depuis votre Mac, déterminez d’abord si vous devez modifier le sens du texte, l’ordre des éléments ou l’alignement.

Ce guide part du principe que vous modifiez le HTML et le CSS d’une page dans un éditeur de texte et que vous la prévisualisez dans un navigateur de bureau. L’objectif est de disposer trois tuiles neutres — Alpha, Beta et Gamma — tout en définissant intentionnellement le comportement du texte et l’ordre du document.

Que modifie réellement chaque paramètre de direction ?

L’attribut dir du HTML décrit le sens de lecture de base du texte d’un élément. Ses valeurs explicites sont ltr et rtl ; auto demande au navigateur de déterminer le sens à partir du contenu. Le WHATWG encourage les auteurs à exprimer le sens du texte en HTML afin que cette information reste disponible sans CSS. Norme HTML : l’attribut dir.

La propriété CSS direction contrôle également le sens de lecture de base du texte et influe sur le comportement de la mise en page. Elle est héritée : définir direction: rtl sur un conteneur peut donc affecter ses éléments descendants. MDN recommande d’utiliser l’attribut HTML dir dans la mesure du possible. Considérez une surcharge CSS de direction comme une décision délibérée concernant le sens du texte, plutôt que comme un moyen pratique de déplacer des boîtes. MDN : direction.

La propriété CSS flex-direction contrôle l’axe principal d’un conteneur flex. Une valeur row suit l’axe en ligne du mode d’écriture courant ; row-reverse inverse les directions de début et de fin de son axe principal. Elle modifie le sens de disposition des éléments tout en préservant leur ordre dans le code source. W3C : sens du flux flex.

Ces mécanismes interagissent. En écriture horizontale, une ligne flex ltr commence à gauche, tandis qu’une ligne flex rtl commence à droite. Ajouter row-reverse inverse l’un ou l’autre de ces sens de départ. Par conséquent, row-reverse ne signifie pas toujours que le premier élément apparaît à droite. MDN : flex-direction.

Quel paramètre correspond au résultat souhaité ?

Avant de modifier la page, décrivez concrètement le résultat souhaité : « Garder les libellés anglais inchangés, inverser l’ordre visuel des tuiles et maintenir le groupe à droite. » Cette formulation distingue les décisions relatives au texte, au flux des éléments et à l’alignement.

Résultat souhaité Point de départ approprié Élément à vérifier
Définir le sens de lecture de base du contenu dir="ltr" ou dir="rtl" en HTML Appliquez-le à la zone dont le texte nécessite ce sens.
Inverser la progression visuelle de tous les éléments d’une ligne flex flex-direction: row-reverse Vérifiez d’abord la direction actuelle du conteneur.
Déplacer une ligne inchangée vers le bord de fin de son axe principal justify-content: flex-end Vérifiez qu’il reste de l’espace libre pour l’alignement.
Modifier partout la séquence pertinente Réorganiser les éléments dans le code source Vérifiez que la séquence de lecture obtenue est cohérente.
Repositionner visuellement certains éléments Valeurs individuelles de order Examinez l’écart entre l’ordre visuel et l’ordre dans le code source.

La distinction entre inversion et alignement est importante. Avec une ligne ltr, justify-content: flex-end peut placer ensemble Alpha, Beta et Gamma à droite sans inverser leur ordre. L’alignement répartit l’espace disponible sur l’axe principal ; flex-end désigne le côté de fin de l’axe principal du conteneur flex. Son effet peut disparaître si des éléments flexibles consomment cet espace. MDN : justify-content.

Si les lecteurs doivent rencontrer une séquence précise, définissez-la dans le document lui-même. Le W3C déconseille explicitement d’utiliser l’inversion flex ou order pour compenser un ordre incorrect dans le code source. W3C : ordre et orientation.

Prévoyez les quatre combinaisons avant de modifier la page

La comparaison ci-dessous découle des règles documentées pour les axes. Elle suppose writing-mode: horizontal-tb, une seule ligne flex, des valeurs order identiques et l’ordre source Alpha, Beta, Gamma. « Apparence de gauche à droite » décrit la position physique des tuiles à l’écran.

Direction du conteneur Direction flex Le premier élément commence à Apparence de gauche à droite
ltr row Gauche Alpha, Beta, Gamma
ltr row-reverse Droite Gamma, Beta, Alpha
rtl row Droite Gamma, Beta, Alpha
rtl row-reverse Gauche Alpha, Beta, Gamma

Les deuxième et troisième lignes peuvent sembler identiques lorsque leur contenu se compose de simples rectangles. Leurs paramètres de sens du texte diffèrent toutefois. La quatrième combinaison explique une surprise fréquente : appliquer à la fois rtl et row-reverse produit une progression des éléments de gauche à droite. MDN décrit ce comportement, qui dépend de la direction. MDN : flex-direction.

Le sens de lecture de base du texte influe aussi sur la ponctuation et sur l’ordre des séquences de texte directionnelles. Définir rtl ne revient pas simplement à inverser tous les caractères d’un mot anglais. Un libellé peut rester reconnaissable alors que sa ponctuation apparaît à un emplacement inattendu. Des tuiles unies sont donc utiles pour examiner le positionnement des boîtes, mais insuffisantes pour évaluer le comportement du texte. MDN : notes d’utilisation de dir.

Essayez une page de comparaison complète sur votre Mac

Enregistrez le document complet ci-dessous sous le nom direction-demo.html à l’aide d’un éditeur de texte brut, puis ouvrez le fichier dans votre navigateur. Il utilise des libellés synthétiques et des rectangles CSS, sans dépendance externe. Les résultats attendus découlent des règles documentées ; cet exemple n’est pas présenté comme ayant été testé dans un navigateur.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Direction and flex comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      margin: 24px;
      color: #202020;
      background: #fff;
    }
    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      writing-mode: horizontal-tb;
      justify-content: flex-start;
      gap: 12px;
      max-width: 448px;
      padding: 12px;
      border: 1px solid #777;
      margin-bottom: 20px;
    }
    .reverse { flex-direction: row-reverse; }
    .tile {
      flex: 0 0 64px;
      padding: 16px 0;
      text-align: center;
      background: #e2ecf4;
    }
  </style>
</head>
<body>
  <h1>Direction and flex comparison</h1>
  <p>LTR with row</p>
  <div class="row" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>LTR with row-reverse</p>
  <div class="row reverse" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row</p>
  <div class="row" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row-reverse</p>
  <div class="row reverse" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
</body>
</html>

Comparez les quatre lignes au tableau de prévision. Elles contiennent toutes le même ordre source. Seuls la direction du conteneur et la classe d’inversion diffèrent. Le mode d’écriture horizontal explicite permet de centrer cette démonstration sur le cas habituel d’un affichage horizontal sur ordinateur.

Ensuite, remplacez uniquement justify-content: flex-start par justify-content: flex-end, enregistrez et rechargez la page. Les groupes devraient se déplacer vers le bord opposé de leur axe principal tout en conservant la progression des éléments de chaque ligne. Cela permet de distinguer le positionnement de l’inversion sans introduire un autre paramètre de sens du texte. MDN : justify-content.

Enfin, rétablissez le paramètre d’alignement et ajoutez un point après Alpha dans chaque ligne. Comparez la ponctuation ainsi que la position des tuiles. Il s’agit d’un test illustratif du sens du texte, et non d’une recommandation d’attribuer rtl à des libellés anglais ordinaires. L’explication de MDN sur le sens de base indique pourquoi la ponctuation en bordure mérite une vérification spécifique. MDN : dir.

Diagnostiquez les résultats inattendus dans la mise en page réelle

Vérifiez que le parent est un conteneur flex

Vérifiez l’élément qui contient les tuiles. flex-direction s’applique lorsque son display vaut flex ou inline-flex. Une déclaration sur un conteneur de blocs ordinaire ne crée pas de mise en page flex. Vérifiez aussi si une règle ultérieure modifie la valeur effective à la largeur actuelle du navigateur. MDN : description de flex-direction.

Vérifiez la direction héritée avant d’ajouter une autre inversion

Examinez le conteneur et ses ancêtres pour repérer dir, puis recherchez les déclarations CSS direction. Lorsque dir est omis, la direction est généralement héritée de l’élément parent ; cette omission ne demande pas de détection automatique. Si la séquence source commence de façon inattendue à droite, la direction héritée peut l’expliquer. MDN : héritage de dir.

Évitez d’utiliser dir="auto" comme commutateur de mise en page. Le WHATWG le définit comme une détection du sens à partir du contenu, principalement fondée sur le premier caractère fortement directionnel, et recommande de le réserver aux textes dont le sens est véritablement inconnu. Une exigence de mise en page ne devrait pas dépendre du libellé qui apparaît en premier. Norme HTML : l’attribut dir.

Distinguez l’inversion des éléments de celle des lignes

Si le problème apparaît seulement lorsque vous réduisez la fenêtre, examinez le retour à la ligne. row-reverse modifie la progression sur l’axe principal ; wrap-reverse modifie le sens d’empilement des lignes flex. La valeur par défaut nowrap maintient une seule ligne et peut entraîner un débordement. Ces commandes sont distinctes : testez donc une fenêtre étroite en plus de la largeur initiale sur ordinateur. MDN : flex-wrap.

Recherchez les règles d’ordre propres aux éléments

Vérifiez si une tuile possède une valeur order. La mise en page flex regroupe les éléments selon cet entier, du plus petit au plus grand, et conserve l’ordre source au sein des groupes de même valeur. Une inversion change ensuite le sens dans lequel cette séquence obtenue est disposée. Réinitialisez les règles d’ordre inattendues appliquées à un élément avant de conclure que la direction du conteneur est incorrecte. MDN : ordre des éléments flex.

Vérifiez l’ordre de lecture avant de conserver la modification

Pour des tuiles décoratives neutres, l’inversion visuelle peut être le seul objectif. Pour des liens ou des commandes, examinez l’ordre dans le code source et suivez le déplacement du focus clavier dans le composant. L’inversion flex ne modifie pas l’ordre de navigation séquentielle ni l’ordre vocal. Un groupe inversé visuellement peut donc conserver son ordre d’interaction d’origine. W3C : sens du flux flex.

Servez-vous de cette vérification pour décider s’il faut modifier le code source. Si la séquence pertinente souhaitée est Gamma, Beta, Alpha, placez les éléments dans cet ordre. Si Alpha, Beta, Gamma reste la séquence de lecture correcte et que seule la présentation doit être inversée, évaluez la disposition visuelle en tenant compte de cette distinction. MDN illustre le comportement lié à l’ordre source avec des liens pouvant recevoir le focus. MDN : ordre des éléments flex.

Choisissez le mécanisme en fonction de l’exigence : dir en HTML pour le sens de lecture de base du texte, flex-direction pour le flux sur l’axe flex et l’alignement pour positionner une séquence inchangée. Avant de conserver le résultat, vérifiez séparément le positionnement des tuiles, la ponctuation, le retour à la ligne et l’ordre source. Vous pourrez ainsi résoudre de façon reproductible une mise en page qui semble simplement inversée.

Sources