Modes d'écriture et mise en page CSS

Ce n'est pas un article sur l'application pratique ou créative de cette propriété. Au lieu de cela, je veux démontrer pourquoi la compréhension des modes d'écriture est si importante - même pour ceux d'entre nous qui ont rarement besoin de changer le mode d'écriture d'une page ou d'un composant. La prise en charge de plusieurs modes d'écriture est la clé de la conception de nos nouvelles méthodes de mise en page Flexbox et Grid Layout. Comprendre cela peut débloquer une meilleure compréhension du fonctionnement de ces méthodes de mise en page.

Que sont les modes d'écriture ?

Le mode d'écriture d'un document ou d'un composant fait référence à la direction dans laquelle le texte s'écoule. En CSS, pour travailler avec les modes d'écriture, nous utilisons la propriété writing-mode . Cette propriété peut prendre les valeurs suivantes :

• horizontal-tb
• vertical-rl
• vertical-lr
• sideways-rl
• sideways-lr

Si vous lisez cet article sur Smashing Magazine en anglais, alors le mode d'écriture de ce document est horizontal-tb , ou Horizontal Top To Bottom . En anglais, les phrases sont écrites horizontalement - la première lettre de chaque ligne commençant à gauche.

Une langue comme l'arabe a également un mode d'écriture horizontal-tb . Il est écrit horizontalement, de haut en bas, mais l'écriture arabe est écrite de droite à gauche, et donc les phrases en arabe commencent à droite.

Le chinois, le japonais et le coréen s'écrivent verticalement, le premier caractère de la première phrase étant en haut à droite. Les phrases suivantes sont ajoutées à gauche. Par conséquent, le mode d'écriture utilisé est vertical-rl . Un mode d'écriture vertical allant de droite à gauche.

Le mongol s'écrit aussi verticalement, mais de gauche à droite. Par conséquent, si vous souhaitez composer un script mongol, vous utiliserez le mode d'écriture vertical-lr .

Les deux autres valeurs de writing-mode sont conçues davantage à des fins créatives que pour la composition de scripts verticaux. L'utilisation sideways-lr et sideways-rl tourne le texte sur le côté - même les caractères normalement écrits verticalement et debout. Les valeurs, malheureusement, ne sont prises en charge que dans Firefox pour le moment. Le CodePen suivant montre toutes les différentes valeurs de writing-mode , vous devrez utiliser Firefox si vous voulez voir les sideways-* en action.

Les modes d'écriture peuvent être utilisés lors de la création d'un document qui utilise une langue écrite à l'aide de ce mode d'écriture. Ils peuvent également être utilisés de manière créative, par exemple, pour définir un titre verticalement sur le côté d'un contenu. Dans cet article, cependant, je souhaite examiner l'impact que la prise en charge des langages verticaux et la possibilité de texte vertical ont sur la mise en page CSS et sur CSS en général.

Avant de le faire, si vous êtes intéressé par l'utilisation des modes d'écriture pour le texte vertical, voici quelques ressources utiles :

• Le site d'internationalisation du W3C contient une mine d'informations utiles. En savoir plus sur les scripts RTL et le texte vertical.
• Jen Simmons a écrit un excellent article sur les modes d'écriture CSS qui comprend également plusieurs exemples d'impression de ces modes utilisés.
• Réflexions sur le monde et nos systèmes d'écriture - Chen Hui Jing
• Composition verticale avec mode d'écriture revisité - Chen Hui Jing
• La propriété writing-mode sur MDN

Les dimensions en bloc et en ligne

Lorsque nous changeons le mode d'écriture d'un document, nous changeons la direction du flux de blocs . Par conséquent, il devient rapidement très utile pour nous de comprendre ce que l'on entend par bloc et inline.

L'une des premières choses que nous apprenons sur CSS est que certains éléments sont des éléments de bloc, par exemple un paragraphe. Ces éléments s'affichent les uns après les autres dans le sens du bloc. Les éléments en ligne, comme un mot dans une phrase, s'affichent l'un après l'autre dans le sens en ligne. En travaillant dans un mode d'écriture horizontal, nous nous habituons au fait que la dimension du bloc va de haut en bas verticalement et la dimension en ligne de gauche à droite horizontalement.

Cependant, comme les éléments en bloc et en ligne se rapportent au mode d'écriture de notre document, la dimension en ligne n'est horizontale que si nous sommes dans un mode d'écriture horizontal. Cela ne concerne pas la largeur, mais plutôt la taille en ligne. La dimension du bloc n'est verticale qu'en mode d'écriture horizontal. Par conséquent, cela ne concerne pas la hauteur, mais la taille du bloc.

Propriétés logiques relatives au flux

Ces termes, taille en ligne et taille de bloc, sont également utilisés comme noms de nouvelles propriétés CSS conçues pour refléter notre nouveau monde sensible au mode d'écriture. Si, dans un mode d'écriture horizontal, vous utilisez la propriété inline-size au lieu de width , elle agira exactement de la même manière que width - jusqu'à ce que vous changiez le mode d'écriture de votre composant. Si vous utilisez width qui sera toujours une dimension physique, ce sera toujours la taille du composant horizontalement. Si vous utilisez inline-size , ce sera la taille dans la dimension en ligne, comme le montre l'exemple ci-dessous.

Il en est de même pour la height . La propriété height sera toujours la taille verticalement. Il est lié à la hauteur de l'article. La propriété block-size , cependant, donne la taille dans la dimension du bloc , verticalement si nous sommes dans un mode d'écriture horizontal et horizontal dans un mode vertical.

Comme je l'ai décrit dans mon article "Comprendre les propriétés logiques et les valeurs", il existe des mappages pour toutes les propriétés physiques, celles qui sont liées aux dimensions de l'écran. Une fois que vous commencez à y penser, une grande partie du CSS est spécifiée par rapport à la disposition physique d'un écran. Nous définissons le positionnement, les marges, le rembourrage et les bordures en utilisant le haut, la droite, le bas et la gauche. Nous faisons flotter les choses à gauche et à droite. Parfois, lier les choses à la dimension physique sera ce que nous voulons, mais nous pensons de plus en plus à nos aménagements sans référence à l'emplacement physique. La spécification Logical Properties and Values ​​déploie cette méthode de travail indépendante du mode d'écriture dans CSS.

Modes d'écriture, grille et Flexbox

Lorsque nos nouvelles méthodes de mise en page ont fait leur apparition, elles ont apporté avec elles une manière agnostique de considérer le mode d'écriture du composant en cours de mise en page sous forme de flex ou de grille. Pour la première fois, on demandait aux gens de penser au début et à la fin, plutôt qu'à gauche et à droite, en haut et en bas.

Lorsque j'ai commencé à présenter CSS Grid pour la première fois, mes premières présentations étaient un aperçu de toutes les propriétés de la spécification. J'ai mentionné que la propriété grid-area pouvait être utilisée pour définir les quatre lignes pour placer un élément de grille. L'ordre de ces lignes n'était cependant pas le haut, la droite, le bas et la gauche familiers que nous utilisons pour définir les quatre marges. Au lieu de cela, nous devons utiliser haut, gauche, bas, droite - l'inverse de cet ordre ! Jusqu'à ce que je comprenne le lien entre la grille et les modes d'écriture, cela semblait une décision très étrange. Je me suis rendu compte que ce que nous faisions, c'était de définir les deux lignes de départ, puis les deux lignes de fin. Utiliser haut, droite, bas et gauche fonctionnerait bien si nous étions dans un mode d'écriture horizontal, tournez la grille sur le côté cependant et cela n'a aucun sens. Si nous utilisons grid-area: 1 / 2 / 3 / 5; comme dans le stylo ci-dessous, les lignes sont définies comme suit :

• grid-row-start: 1; - bloquer le démarrage
• grid-column-start: 2 - démarrage en ligne
• grid-row-end: 3 - fin de bloc
• grid-column-end: 5 - fin en ligne

Lignes et colonnes Flexbox

Si vous utilisez Flexbox et ajoutez display: flex à un conteneur, vos éléments s'afficheront sous forme de ligne car la valeur initiale de la propriété flex-direction est row . Une ligne suivra la dimension en ligne du mode d'écriture utilisé. Par conséquent, si votre mode d'écriture est horizontal-tb une ligne s'exécute horizontalement. Si la direction du texte du script actuel est de gauche à droite, les éléments s'aligneront en partant de la gauche, si c'est de droite à gauche, ils s'aligneront en commençant par la droite.

Cependant, utilisez un mode d'écriture vertical, tel que vertical-rl et flex-direction: row entraînera la disposition verticale des éléments, car la direction en ligne est verticale. Dans ce CodePen suivant, tous les exemples ont flex-direction: row , seul le mode ou la direction d'écriture a changé.

Ajoutez flex-direction: column et la disposition des éléments dans la dimension de bloc de votre mode d'écriture. Dans un mode d'écriture horizontal, la dimension du bloc est de haut en bas, donc une colonne est verticale. Avec un mode d'écriture vertical-rl , une colonne est horizontale. Comme dans l'exemple précédent, la seule différence entre les mises en page flexibles ci-dessous est le mode d'écriture utilisé.

Placement automatique de la grille

Lorsque vous utilisez le placement automatique dans la grille, vous verrez un comportement similaire à celui de la disposition flexible. Les éléments de la grille se placent automatiquement en fonction du mode d'écriture du document. La valeur par défaut est de placer les éléments dans des rangées, qui seront la direction en ligne - horizontalement dans un mode d'écriture horizontal et verticalement dans un mode vertical.

Essayez de changer le flux des éléments en column comme dans l'exemple ci-dessous. Les éléments vont maintenant circuler dans la dimension du bloc - verticalement dans un mode d'écriture horizontal et horizontalement dans un mode vertical.

Placement placé sur une ligne de grille

Le placement basé sur les lignes respecte également le mode d'écriture. Les lignes de notre grille commencent à 1, à la fois pour les lignes et les colonnes. Si nous positionnons un élément de la ligne de colonne 1 à la ligne de colonne 3 et que nous sommes dans un mode d'écriture horizontal avec une direction de gauche à droite, cet élément s'étendra de la ligne de colonne la plus à gauche sur deux pistes de grille horizontalement. Couvrant ainsi deux colonnes.

Changez le mode d'écriture en vertical-rl et la ligne de colonne 1 sera en haut de la grille, l'élément s'étendant sur deux pistes verticalement. S'étendant toujours sur deux colonnes, mais les colonnes s'exécutent maintenant horizontalement.

Alignement dans la grille et la Flexbox

L'un des premiers endroits où de nombreuses personnes seront entrées en contact avec la façon dont Flexbox a traité les modes d'écriture, serait lors de l'alignement des éléments dans une mise en page flexible. Si nous prenons l'exemple flex-direction: row ci-dessus et utilisons la propriété justify-content pour aligner tous les éléments sur flex-end , les éléments se déplacent à la fin de leur ligne. Cela signifie que dans un mode d'écriture horizontal avec une direction de gauche à droite, les éléments se déplacent tous vers la droite, car la fin de cette ligne est à droite. Si la direction est de droite à gauche, alors ils se déplacent tous vers la gauche.

En mode d'écriture verticale, ils se déplacent vers le bas, en supposant qu'il y ait de la place pour eux. J'ai défini une inline-size sur les composants de cet exemple pour nous assurer que nous avons de l'espace libre dans nos conteneurs flexibles pour voir l'alignement en action.

L'alignement est un peu plus facile à comprendre dans la disposition en grille, car nous avons toujours les deux axes avec lesquels jouer. La grille est bidimensionnelle, ces deux dimensions sont en bloc et en ligne. Par conséquent, vous pouvez vous souvenir d'une règle si vous voulez savoir s'il faut utiliser les propriétés qui commencent par align- ou celles qui commencent par justify- . Dans la disposition en grille, les align- -properties:- align-content , align-items , align-self sont utilisés pour faire l'alignement des axes de bloc. Dans un mode d'écriture horizontal cela signifie verticalement, et dans un mode d'écriture vertical horizontalement.

Encore une fois, nous n'utilisons pas gauche et droite ou haut et bas, car nous voulons que notre disposition de grille fonctionne exactement de la même manière, quel que soit le mode d'écriture. Nous alignons donc en utilisant start et end . Si nous alignons pour start sur la dimension du bloc, ce sera top quand dans horizontal-tb , mais ce sera right quand dans vertical-rl . Regardez dans l'exemple ci-dessous, les valeurs d'alignement sont identiques dans les deux grilles, la seule différence est le mode d'écriture utilisé.

Les propriétés justify-content , justify-items , justify-self sont toujours utilisées pour l'alignement en ligne dans la mise en page de la grille. Ce sera horizontal dans un mode d'écriture horizontal et vertical dans un mode d'écriture vertical.

L'alignement Flexbox est quelque peu compliqué par le fait que l'axe principal peut être commuté de ligne en colonne. Par conséquent, dans Flexbox, nous devons considérer la méthode d'alignement comme l'axe principal par rapport à l'axe transversal. Les propriétés d' align- sont utilisées sur l'axe transversal. Sur l'axe principal, tout ce que vous avez est justify-content car nous traitons les éléments en tant que groupe dans Flexbox. Sur l'axe transversal, vous pouvez utiliser align-content dans les cas où vous avez plusieurs lignes flexibles et un espace dans le conteneur flexible pour les espacer. Vous pouvez également utiliser align-items et align-self pour déplacer les éléments flexibles sur l'axe transversal les uns par rapport aux autres et à leur ligne flexible.

Pour en savoir plus sur l'alignement dans la mise en page CSS, consultez mes articles précédents du Smashing Magazine :

• Comment aligner les choses en CSS
• Tout ce que vous devez savoir sur l'alignement dans Flexbox

Sensibilisation au mode d'écriture et CSS plus anciens

Tous les CSS n'ont pas complètement rattrapé cette façon de travailler indépendante du flux et du mode d'écriture. Les endroits où il n'a pas commencé à se démarquer comme inhabituels plus vous pensez aux choses en termes de bloc et d'inline, de début et de fin. Par exemple, dans une mise en page multi-colonnes, nous spécifions column-width , ce qui signifie réellement column inline-size, car il n'est pas mappé à la largeur physique lorsque vous travaillez en mode d'écriture vertical.

Comme vous pouvez le voir, les modes d'écriture sous-tendent une grande partie de ce que nous faisons en CSS, même si nous n'utilisons jamais un mode d'écriture autre que horizontal-tb .

Je trouve extrêmement utile de penser à la mise en page CSS de cette manière indépendante du mode d'écriture. Bien qu'il soit peut-être un peu tôt pour passer de toutes nos propriétés et valeurs à des valeurs logiques, nous sommes déjà dans un monde relatif au flux lorsqu'il s'agit de nouvelles méthodes de mise en page. Avoir votre modèle mental en bloc et en ligne, début et fin, plutôt que lié aux quatre coins de votre écran, clarifie beaucoup de choses que nous rencontrons lors de l'utilisation de FlexBox et de la grille.