Grilles, valeurs logiques et modes d'écriture
L'une des fonctionnalités les plus importantes de la disposition en grille CSS est la prise en charge des différents modes d'écriture intégrée dans la spécification. Dans ce guide, nous examinons cette fonctionnalité de la disposition en grille CSS et d'autres méthodes de disposition modernes, en apprenant un peu sur les modes d'écriture et les propriétés logiques par rapport aux propriétés physiques au fur et à mesure.
Propriétés logiques et physiques, et les valeurs
CSS regorge de propriétés et de mots-clés de positionnement physiques — left et right, top et bottom. Dans le fragment de code ci-dessous, nous positionnons un élément en utilisant le positionnement absolu et utilisons les propriétés d'encart physiques comme valeurs de décalage pour déplacer l'élément. L'élément est placé à 20 pixels du haut et à 30 pixels du bord gauche du conteneur :
.conteneur {
position: relative;
}
.element {
position: absolute;
top: 20px;
left: 30px;
}
<div class="conteneur">
<div class="element">Élément</div>
</div>
Cet exemple utilise les propriétés left et right ; ce ne sont que deux des nombreuses propriétés physiques en CSS. On peut également ajouter des marges, du remplissage et des bordures en utilisant des propriétés physiques, par exemple margin-left et padding-left. Vous pouvez également voir des mots-clés physiques en usage, comme lorsque vous utilisez text-align: right pour aligner le texte à droite.
Nous appelons ces mots-clés et ces propriétés physiques parce qu'ils se rapportent à l'écran que vous regardez. La gauche reste toujours la gauche, quelle que soit la direction dans laquelle s'écoule votre texte.
Les problèmes des propriétés physiques
Les propriétés physiques peuvent poser des problèmes lorsqu'on développe un site qui doit fonctionner dans plusieurs langues, y compris celles où le texte s'écoule de droite à gauche ou de haut en bas. Les navigateurs sont conçus pour afficher correctement le contenu quelle que soit la langue. Certaines fonctionnalités CSS peuvent remplacer les paramètres par défaut du navigateur et entraîner un affichage moins optimal du contenu.
Dans cet exemple, la propriété direction a été définie sur rtl, ce qui change le sens d'écriture par défaut d'un document en anglais de ltr. Nous avons deux paragraphes. Les deux doivent s'écouler de droite à gauche en raison de la valeur direction définie sur un élément ancêtre (<body>). Le premier paragraphe a text-align défini sur left, il s'aligne donc à gauche de son conteneur. Le deuxième paragraphe s'aligne à droite et s'écoule de droite à gauche.
Il s'agit d'une démonstration élémentaire des problèmes pouvant survenir lors de l'utilisation de valeurs et de propriétés physiques en CSS. Si nous écrivons du CSS en utilisant des propriétés et des mots-clés physiques, nous imposons au navigateur notre hypothèse quant à la manière dont le texte doit s'afficher et l'empêchons de prendre en charge d'autres modes d'écriture.
Les propriétés et valeurs logiques
Les valeurs et propriétés logiques n'assument pas de direction du texte. C'est pourquoi nous utilisons le mot-clé start dans la disposition en grille CSS pour aligner un élément sur le début d'un conteneur. Avec un contenu en anglais, start se trouve à gauche, mais ce n'est pas obligatoire. Le mot start n'indique aucun emplacement physique, ce qui permet aux sites web de commencer le contenu à droite lorsque des langues s'écrivant de droite à gauche, comme l'arabe, sont utilisées.
L'axe de bloc et l'axe en incise
Lorsque nous utilisons des propriétés logiques plutôt que physiques, nous ne considérons pas le monde de gauche à droite et de haut en bas. Nous avons un autre point de référence. C'est ici que la compréhension des axes de bloc (block en anglais) et en incise (inline en anglais), introduits dans le guide sur l'alignement dans les grilles, devient très utile. Si vous réfléchissez à la disposition en termes de bloc et d'incise, le fonctionnement de la disposition en grille CSS devient beaucoup plus clair.
Les modes d'écriture CSS
Le module des modes d'écriture CSS définit comment les modes d'écriture fonctionnent en CSS. Ces fonctionnalités ne servent pas uniquement à prendre en charge des langues dont le mode d'écriture est différent de celui du français ; elles peuvent également être utilisées à des fins créatives. Les exemples de cette section utilisent la propriété writing-mode pour modifier le mode d'écriture appliqué à notre grille, démontrant ainsi le fonctionnement des valeurs logiques dans le processus.
writing-mode
Les modes d'écriture ne se limitent pas à l'écriture de gauche à droite ou de droite à gauche, et la propriété writing-mode nous permet d'afficher du texte dans d'autres directions. La propriété writing-mode peut prendre les valeurs suivantes :
horizontal-tbvertical-rlvertical-lrsideways-rlsideways-lr
La valeur horizontal-tb, qui signifie « horizontal, de haut en bas », est la valeur par défaut du texte sur le Web. C'est la direction dans laquelle vous lisez ce guide. Les autres valeurs modifient la façon dont le texte s'écoule dans notre document, en correspondant aux différents modes d'écriture utilisés dans le monde.
Par exemple, nous avons deux paragraphes ci-dessous. Le premier utilise la valeur par défaut horizontal-tb et le second utilise vertical-rl. Dans le deuxième mode d'écriture, le texte s'étend toujours de gauche à droite, mais sa direction est verticale — le texte en incise s'étend désormais vers le bas de la page, de haut en bas.
<div class="enveloppe">
<p style="writing-mode: horizontal-tb">
Mon mode d'écriture est celui par défaut <code>horizontal-tb</code>
</p>
<p style="writing-mode: vertical-rl">
Moi je suis écrit avec <code>vertical-rl</code>
</p>
</div>
La gestion des modes d'écriture avec une grille
Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement du mode d'écriture qui change les axes logiques.
Mode d'écriture par défaut
Dans cet exemple, la grille possède trois colonnes et deux pistes de lignes. Cela signifie qu'il y a trois pistes qui descendent le long de l'axe de bloc. Avec le mode d'écriture par défaut, la grille place automatiquement les éléments en commençant par le coin supérieur gauche, en se déplaçant vers la droite, en remplissant les trois cellules sur l'axe en incise. Elle passe ensuite à la ligne suivante, créant une nouvelle piste de lignes, et remplit davantage d'éléments :
.enveloppe {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
<div class="enveloppe">
<div class="element1">Élément 1</div>
<div class="element2">Élément 2</div>
<div class="element3">Élément 3</div>
<div class="element4">Élément 4</div>
<div class="element5">Élément 5</div>
</div>
Définir le mode d'écriture
Si on ajoute writing-mode: vertical-lr au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en incise court verticalement, de haut en bas.
.enveloppe {
writing-mode: vertical-lr;
}
<div class="enveloppe">
<div class="element1">Élément 1</div>
<div class="element2">Élément 2</div>
<div class="element3">Élément 3</div>
<div class="element4">Élément 4</div>
<div class="element5">Élément 5</div>
</div>
L'utilisation de valeurs logiques pour l'alignement
Avec les axes de bloc et en incise capables de changer de direction, les valeurs logiques pour les propriétés d'alignement commencent à avoir plus de sens.
Dans cet exemple, nous utilisons l'alignement (les propriétés align-self et justify-self) pour aligner des éléments dans une grille définie avec writing-mode: vertical-lr. Les propriétés start et end fonctionnent exactement de la même manière que dans le mode d'écriture par défaut et restent logiques, contrairement à l'utilisation de left et right, top et bottom pour aligner les éléments. Cela se produit une fois que nous avons basculé la grille sur le côté, comme ceci :
.enveloppe {
writing-mode: vertical-lr;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
}
.element1 {
grid-column: 1 / 4;
align-self: start;
}
.element2 {
grid-column: 1 / 3;
grid-row: 2 / 4;
align-self: start;
}
.element3 {
grid-column: 3;
grid-row: 2 / 4;
align-self: end;
justify-self: end;
}
<div class="enveloppe">
<div class="element1">Élément 1</div>
<div class="element2">Élément 2</div>
<div class="element3">Élément 3</div>
</div>
Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de vertical-lr à vertical-rl pour changer de mode d'écriture.
Le placement automatique et les modes d'écriture
Comme nous l'avons vu dans les exemples précédents, le mode d'écriture peut modifier la direction visuelle selon laquelle les éléments se positionnent sur la grille. Par défaut, les éléments se positionnent le long de l'axe en incise, en ajoutant de nouvelles lignes dans la direction de bloc. Nous avons désormais constaté que l'axe en incise ne s'étend pas toujours de gauche à droite, et que l'axe de bloc ne s'étend pas toujours de haut en bas.
Le placement sur les lignes et les modes d'écriture
Ce qu'il faut surtout retenir lorsque l'on classe des éléments par numéro de ligne, c'est que la ligne 1 correspond au début et la ligne -1 à la fin, quel que soit le mode d'écriture utilisé.
Placement sur les lignes pour du texte de gauche à droite
Dans l'exemple suivant, on a une grille avec la direction ltr et on positionne trois éléments en utilisant le placement sur les lignes.
- L'élément 1 commence à la ligne verticale 1 et occupe une piste
- L'élément 2 commence à la ligne verticale -1 (le bord tout à droite) et s'étend jusqu'à la ligne verticale -3
- L'élément 3 commence à la ligne verticale 1 et s'étend jusqu'à la troisième ligne verticale.
.enveloppe {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
.element1 {
grid-column: 1;
}
.element2 {
grid-column: -1 / -3;
}
.element3 {
grid-column: 1 / 3;
grid-row: 2;
}
<div class="enveloppe">
<div class="element1">Élément 1</div>
<div class="element2">Élément 2</div>
<div class="element3">Élément 3</div>
</div>
Placement sur les lignes pour du texte de droite à gauche
Si nous ajoutons la propriété direction avec la valeur rtl pour le conteneur de la grille dans l'exemple précédent, la ligne 1 se place sur le côté droit de la grille, et la ligne -1 sur le côté gauche.
.enveloppe {
direction: rtl;
}
<div class="enveloppe">
<div class="element1">Élément 1</div>
<div class="element2">Élément 2</div>
<div class="element3">Élément 3</div>
</div>
Si vous changez la direction de votre texte, pour des pages entières ou pour certaines parties de pages, et que vous utilisez des lignes, vous pouvez nommer vos lignes pour éviter que la disposition change complètement de direction. Pour certains usages, par exemple lorsqu'une grille contient du contenu textuel, ce changement peut être exactement ce que vous recherchez. Pour d'autres usages, ce n'est peut-être pas le cas.
L'étrange ordre des valeurs pour grid-area
Vous pouvez utiliser la propriété grid-area pour spécifier les quatre lignes d'une zone de grille en une seule valeur. Lorsqu'on découvre cette propriété pour la première fois, on est souvent surpris que les valeurs ne suivent pas le même ordre que le raccourci pour margin — qui suit le sens horaire : haut, droite, bas, gauche.
L'ordre des valeurs de grid-area est :
grid-row-startgrid-column-startgrid-row-endgrid-column-end
Ce qui, pour le français, de gauche à droite, signifie que l'ordre est :
topleftbottomright
C'est dans le sens antihoraire ! C'est l'inverse de l'ordre utilisé pour les marges et le remplissage. Si nous nous souvenons que grid-area considère le monde comme « bloc et incise », vous remarquez que nous définissons d'abord les deux débuts, puis les deux fins, ce qui est beaucoup plus logique une fois qu'on le sait !
Utiliser des modes d'écriture hybrides et les grilles
En plus d'afficher les documents en utilisant le mode d'écriture correct pour la langue, les modes d'écriture peuvent être utilisés de manière créative dans des documents qui sont autrement en ltr. Dans cet exemple, nous avons une disposition en grille avec un ensemble de liens sur un côté. Nous utilisons les modes d'écriture (writing-mode: vertical-lr) pour les faire pivoter sur le côté dans la colonne :
.enveloppe {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr auto;
font:
1em "Helvetica",
"Arial",
sans-serif;
}
nav {
writing-mode: vertical-lr;
}
nav ul {
list-style: none;
margin: 0;
padding: 1em;
display: flex;
justify-content: space-between;
}
nav a {
text-decoration: none;
}
<div class="enveloppe">
<div class="contenu">
<p>
Feuilles de navet achillée millefeuille haricot de riz rutabaga endive
chou-fleur laitue de mer chou-rave amarante épinard d'eau avocat daikon
chou chinois asperge pourpier d'hiver chou frisé. Céleri pomme de terre
oignon vert raisin sec raifort épinard carotte soko. Racine de lotus
épinard d'eau fenouil kombu maïs pousse de bambou haricot vert bette à
carde chou marin potiron oignon pois chiche gram maïs pois. Choux de
Bruxelles coriandre châtaigne d'eau courge bette à carde wakamé chou-rave
betterave carotte cresson. Maïs amarante salsifis noix de bunya nori
haricot azuki mouron des oiseaux pomme de terre poivron artichaut.
</p>
<p>
Nori raisin betterave argentée brocoli kombu feuilles de betterave fèves
pomme de terre quandong céleri. Noix de bunya haricot à œil noir navet des
prairies poireau lentille feuilles de navet panais. Laitue de mer laitue
châtaigne d'eau aubergine pourpier fenouil haricot azuki arachide pois de
Sierra Leone bologi poireau soko chicorée celtuce persil jícama salsifis.
</p>
</div>
<nav>
<ul>
<li><a href="">Lien 1</a></li>
<li><a href="">Lien 2</a></li>
<li><a href="">Lien 3</a></li>
</ul>
</nav>
</div>
Valeurs physiques et propriétés logiques
Si vous combinez des propriétés de grille logiques avec des propriétés physiques, rappelez-vous que les propriétés physiques ne changent pas en fonction du mode d'écriture. Dans notre guide d'alignement des éléments dans une grille CSS, nous utilisons des marges automatiques pour éloigner un élément des autres ; cela utilise des propriétés physiques. Il existe des équivalents logiques pour la plupart des propriétés physiques, qui respectent les modes d'écriture de la même manière que les propriétés et valeurs d'alignement et de placement dans la grille.
De même, lorsque vous utilisez le positionnement absolu dans une zone de grille, vous pouvez utiliser les propriétés d'encart logiques pour placer des éléments dans la zone de grille. Lorsque vous combinez des propriétés ou des valeurs logiques et physiques, tenez compte de la tension entre elles. Par exemple, il faut parfois modifier votre CSS pour gérer un passage de ltr à rtl. Votre compréhension des axes de bloc et en incise dans les grilles vous aide à comprendre les propriétés et valeurs logiques CSS.