reading-flow

Syntaxe

/* Valeurs avec un mot-clé */
reading-flow: normal;
reading-flow: flex-visual;
reading-flow: flex-flow;
reading-flow: grid-columns;
reading-flow: grid-rows;
reading-flow: grid-order;
reading-flow: source-order;

/* Valeurs globales */
reading-flow: inherit;
reading-flow: initial;
reading-flow: revert;
reading-flow: revert-layer;
reading-flow: unset;

Valeurs

La propriété reading-flow prend l'un des mots-clés suivants comme valeur :

normal

La valeur par défaut. L'ordre de lecture suit l'ordre des éléments dans le DOM.

flex-visual

N'affecte que les conteneurs flexibles. L'ordre de lecture suit l'ordre visuel des éléments flex, en tenant compte du writing-mode. Par conséquent, un document en français avec flex-direction: row-reverse et reading-flow: flex-visual défini aurait un ordre de lecture de gauche à droite.

flex-flow

N'affecte que les conteneurs flexibles. L'ordre de lecture suit la direction définie par flex-flow.

grid-columns

N'affecte que les conteneurs de grille. L'ordre de lecture suit l'ordre visuel des éléments de la grille, colonne par colonne, en tenant compte du writing-mode.

grid-rows

N'affecte que les conteneurs de grille. L'ordre de lecture suit l'ordre visuel des éléments de la grille, ligne par ligne, en tenant compte du writing-mode.

grid-order

N'affecte que les conteneurs de grille. Si la propriété order est appliquée à l'un des enfants du conteneur, l'ordre de lecture suit l'ordre modifié des éléments. Si la propriété order n'est pas appliquée aux éléments de la grille, grid-order se comporte comme normal.

source-order

N'affecte que les conteneurs de grille, flexibles et de bloc. N'a aucun effet par lui-même — l'ordre de lecture du conteneur continue de suivre l'ordre des éléments dans le DOM — mais permet de modifier l'ordre de lecture en définissant la propriété reading-order sur les enfants du conteneur.

Description

La propriété reading-flow modifie l'ordre de lecture des élément dans un conteneur de bloc, conteneur flexible ou conteneur de grille lorsque sa valeur est différente de normal. Un tel conteneur est appelé conteneur de flux de lecture.

Par défaut, le contenu web est lu dans l'ordre source du DOM. En général, l'ordre source doit exprimer un ordre de lecture logique pour le contenu, et cela doit également se refléter dans l'ordre visuel de la mise en page du contenu. Cependant, parfois, l'ordre visuel ou l'ordre de tabulation diffère de l'ordre source. Par exemple, lors de l'application de plusieurs mises en page flexbox ou grille à un document avec des requêtes média pour répondre à différents besoins de l'appareil ou de l'utilisateur, l'ordre du contenu peut différer en fonction de la largeur de la fenêtre d'affichage. Dans ce cas, la propriété reading-flow peut être utilisée pour garantir que l'ordre de lecture et de tabulation reflète l'ordre visuel.

Dans certains cas, vous pouvez souhaiter affiner davantage l'ordre de lecture au sein d'un conteneur de flux de lecture. Vous pouvez utiliser les valeurs de la propriété reading-order sur les enfants du conteneur, en les regroupant en groupes ordinaux qui sont ensuite lus dans l'ordre numérique.

Interaction avec tabindex

Si un ensemble d'éléments enfants d'un conteneur de flux de lecture qui ne sont normalement pas focalisables est rendu focalisable avec des attributs tabindex="0", leur ordre de lecture sera modifié comme prévu par les propriétés reading-flow et reading-order, de la même manière que pour les éléments interactifs tels que <a> ou <button>.

Cependant, toute tentative de modifier l'ordre de tabulation du contenu d'un conteneur de flux de lecture en utilisant des valeurs tabindex positives sera ignorée — remplacée par les effets de reading-flow et reading-order. Vous ne devriez généralement pas les utiliser de toute façon ; voir Ne pas utiliser Tabindex supérieur à 0 ^(angl.). Les propriétés reading-flow et reading-order offrent un bien meilleur moyen de modifier l'ordre de tabulation si nécessaire.

Définition formelle

Syntaxe formelle

reading-flow = 
  normal        |
  source-order  |
  flex-visual   |
  flex-flow     |
  grid-rows     |
  grid-columns  |
  grid-order    

Exemples

Comparer les valeurs flexibles

Dans cet exemple, nous démontrons les effets des différentes valeurs de reading-flow sur un conteneur flexible avec des éléments flex inversés.

HTML

Le balisage inclut un élément HTML <select> pour sélectionner différentes valeurs de reading-flow, et un <div> wrapper contenant trois éléments HTML <a>.

<form>
  <label for="reading-flow">Choisir le flux de lecture&nbsp;:</label>
  <select id="reading-flow">
    <option>normal</option>
    <option>flex-visual</option>
    <option>flex-flow</option>
  </select>
</form>
<div class="wrapper">
  <a href="#">Élément 1</a>
  <a href="#">Élément 2</a>
  <a href="#">Élément 3</a>
</div>

CSS

Nous utilisons une valeur display qui vaut flex pour transformer le <div> en conteneur flexible, et afficher les éléments flexibles dans une ligne dans l'ordre inverse du DOM avec une valeur flex-direction qui vaut row-reverse. Initialement, nous définissons un reading-flow de normal afin que les éléments soient lus ou parcourus à l'aide de la touche Tab dans l'ordre du DOM.

Nous définissons également une valeur order de 1 sur le premier élément <a> pour qu'il s'affiche après le deuxième et le troisième élément dans le flux flexible. L'ordre visuel résultant des éléments flexibles de gauche à droite est « Élément 1 », « Élément 3 », puis « Élément 2 », mais l'ordre du DOM reste inchangé.

.wrapper {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: normal;
  gap: 1em;
}

a:first-child {
  order: 1;
}

JavaScript

Dans notre script, nous récupérons les références à l'élément <select> et au conteneur <div>, puis ajoutons un écouteur d'évènement change à l'élément <select>. Lorsqu'une nouvelle valeur est sélectionnée, elle est définie comme valeur de la propriété reading-flow sur le conteneur.

const elementSelecteur = document.getElementById("reading-flow");
const elementEnglobant = document.querySelector(".wrapper");

elementSelecteur.addEventListener("change", () => {
  elementEnglobant.style.readingFlow = elementSelecteur.value;
});

Résultat

La démonstration se présente comme suit :

Tout d'abord, essayez de naviguer entre les liens avec reading-flow: normal défini. L'ordre de tabulation est « Élément 1 », « Élément 2 », puis « Élément 3 », car c'est l'ordre des éléments dans le DOM.

Maintenant, essayez de changer la valeur de reading-flow et de naviguer à nouveau entre les liens :

• Une valeur de flex-visual fait que les éléments sont parcourus dans l'ordre « Élément 1 », « Élément 3 », puis « Élément 2 », ce qui correspond à l'ordre d'affichage visuel résultant des propriétés flexbox appliquées.
• Une valeur de flex-flow fait que les éléments sont parcourus dans l'ordre « Élément 2 », « Élément 3 », puis « Élément 1 », ce qui correspond à la direction du flex-flow — dans ce cas, row-reverse. Ici, l'ordre de tabulation est l'inverse de l'ordre d'affichage.

Comparer les valeurs de la grille

Dans cet exemple, nous démontrons les effets des différentes valeurs de reading-flow sur un conteneur de grille.

HTML

Le balisage inclut un élément HTML <select> pour sélectionner différentes valeurs de reading-flow, et un conteneur <div> contenant quatre éléments HTML <a>.

<form>
  <label for="reading-flow">Choisir le flux de lecture&nbsp;:</label>
  <select id="reading-flow">
    <option>normal</option>
    <option>grid-rows</option>
    <option>grid-columns</option>
    <option>grid-order</option>
  </select>
</form>
<div class="wrapper">
  <a class="a" href="#">Élément A</a>
  <a class="b" href="#">Élément B</a>
  <a class="c" href="#">Élément C</a>
  <a class="d" href="#">Élément D</a>
</div>

CSS

Nous utilisons une valeur display qui faut grid pour transformer le <div> en conteneur de grille, et affichons les éléments de la grille en trois colonnes à l'aide de grid-template-columns. Nous définissons également grid-template-areas pour décrire différentes zones de placement dans ces colonnes, et plaçons les éléments <a> dans ces zones à l'aide de grid-area. Initialement, nous définissons un reading-flow de normal afin que les éléments soient lus ou parcourus par tabulation dans l'ordre source DOM par défaut.

Enfin, nous définissons une valeur order de 1 sur le premier élément <a> ; cela n'a aucun effet sur la mise en page car cela ne remplace pas le placement de la zone de la grille, mais cela a un effet lorsque certaines valeurs de reading-flow sont définies, comme vous le verrez plus tard.

La lecture de gauche à droite, l'ordre d'affichage résultant des éléments de la grille est « Élément D », « Élément B », « Élément C », puis « Élément A ».

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-areas:
    "d b b"
    "c c a";
  reading-flow: normal;
}

.a {
  grid-area: a;
}
.b {
  grid-area: b;
}
.c {
  grid-area: c;
}
.d {
  grid-area: d;
}

a:first-child {
  order: 1;
}

JavaScript

Dans notre script, nous récupérons des références à l'élément <select> et au conteneur <div>, puis ajoutons un écouteur d'évènement change à l'élément <select>. Lorsqu'une nouvelle valeur est sélectionnée, elle est définie comme valeur de la propriété reading-flow sur le conteneur.

const elementSelecteur = document.getElementById("reading-flow");
const elementEnglobant = document.querySelector(".wrapper");

elementSelecteur.addEventListener("change", () => {
  elementEnglobant.style.readingFlow = elementSelecteur.value;
});

Résultat

La démonstration s'affiche comme ceci :

Tout d'abord, essayez de naviguer dans les liens avec reading-flow: normal défini. L'ordre de tabulation est « Élément A », « Élément B », « Élément C » et « Élément D », car c'est l'ordre des éléments dans le DOM.

Modifiez maintenant la valeur de reading-flow, puis essayez à nouveau de parcourir les liens à l'aide de la touche Tab :

• Une valeur de grid-rows fait en sorte que les éléments soient parcourus par tabulation dans l'ordre d'affichage visuel par ligne. Cela donne « Élément D », « Élément B », « Élément C », puis « Élément A ».
• Une valeur de grid-columns fait en sorte que les éléments soient parcourus par tabulation dans l'ordre d'affichage visuel par colonne. Cela donne « Élément D », « Élément C », « Élément B », puis « Élément A ».
• Une valeur de grid-order fait en sorte que les éléments soient parcourus par tabulation dans l'ordre du DOM, mais prend en compte les modifications de la valeur order. Comme nous avons défini order: 1; sur le premier élément <a>, l'ordre de tabulation est « Élément B », « Élément C », « Élément D », puis « Élément A ».

Ajustement de l'ordre de lecture sur les conteneurs de blocs

Dans cet exemple, nous démontrons les effets de la valeur reading-flow: source-order sur un conteneur de blocs.

HTML

Le balisage inclut un conteneur <div> contenant quatre éléments HTML <a>.

<div class="wrapper">
  <a class="a" href="#">Élément A</a>
  <a class="b" href="#">Élément B</a>
  <a class="c" href="#">Élément C</a>
  <a class="d" href="#">Élément D</a>
</div>

CSS

Nous définissons un reading-flow de source-order afin que les éléments soient lus ou parcourus par tabulation dans l'ordre du DOM, mais des modifications sont autorisées pour l'ordre de lecture via reading-order. Nous définissons une valeur reading-order de 1 sur le premier élément <a>.

.wrapper {
  reading-flow: source-order;
}

a:first-child {
  reading-order: 1;
}

Résultat

La démonstration s'affiche comme ceci :

Essayez de naviguer dans les liens à l'aide de la touche Tab : l'ordre de tabulation est « Élément B », « Élément C », « Élément D », puis « Élément A » — l'ordre des éléments dans le DOM est respecté, mais l'Élément A a été placé dans un groupe ordinal de lecture plus élevé que les autres (la valeur par défaut de reading-order est 0), il est donc tabulé en dernier.

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété reading-order
• Exemples de reading-flow CSS ^(angl.) sur chrome.dev