Modes d'écriture et mise en page CSS

Dans cet article, je vais jeter un coup d'œil à la propriété CSS de mode d'écriture . Cependant, il ne s'agit pas d'un article sur l'application pratique ou créative de cette propriété. Au lieu de cela, je veux 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 essentielle à la conception de nos nouvelles méthodes de présentation de Flexbox et Grid Layout. Comprendre cela peut permettre de mieux comprendre le fonctionnement de ces méthodes de présentation.

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 utiliser les modes d'écriture, nous utilisons la propriété write-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, le mode d'écriture de ce document est horizontal-tb ou horizontalement de haut en bas . En anglais, les phrases sont écrites horizontalement, la première lettre de chaque ligne commençant par la gauche

Une langue telle que l'arabe possède é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 les phrases en arabe commencent donc à droite.

Le chinois, le japonais et le coréen sont écrits verticalement, le premier caractère de la première phrase en haut de la page. 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 également verticalement, mais de gauche à droite. Par conséquent, si vous souhaitez composer un script en mongol, utilisez le mode d'écriture vertical-lr .

Les deux autres valeurs du mode d'écriture sont davantage conçues pour la création que pour la composition des scripts verticaux. En utilisant latéralement-lr et latéralement-rl le texte est tourné sur le côté – même les caractères écrits verticalement et verticalement. Les valeurs ne sont malheureusement prises en charge que par Firefox pour le moment. Le code ci-dessous montre toutes les valeurs du mode d’écriture vous devrez utiliser Firefox si vous souhaitez voir les de côté - * en action.

Les modes d'écriture peuvent être utilisés lors de la création d'un document utilisant 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 en-tête verticalement sur le côté de certains contenus. Cependant, dans cet article, je voudrais examiner l'impact de la prise en charge des langues verticales et de la possibilité de texte vertical sur la disposition CSS, et sur les CSS en général.

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

Les dimensions du bloc et des caractères en ligne

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

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 bloc. Les éléments en ligne, tels que les mots d'une phrase, s'affichent les uns après les autres dans le sens de la ligne. En mode d'écriture horizontale, nous commençons à nous habituer au fait que la dimension du bloc s'étend verticalement de haut en bas et la dimension en ligne de gauche à droite horizontalement.

Les éléments de bloc et les éléments en ligne étant liés au mode d'écriture de notre document, la dimension en ligne est horizontale uniquement si nous sommes en mode écriture horizontale. Cela ne concerne pas la largeur, mais la taille en ligne. La dimension du bloc est uniquement verticale en mode d'écriture horizontale. Par conséquent, il ne s'agit pas de hauteur, mais de taille de 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 nouvelle écriture. monde conscient du mode. Si, en mode d'écriture horizontal, vous utilisez la propriété inline-size au lieu de width il 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 inline, comme le montre l'exemple ci-dessous.

Il en va de même pour hauteur . La propriété height aura toujours la taille verticale. Cela concerne la taille de l'article. La propriété block-size donne cependant la taille dans la dimension de bloc verticalement si nous sommes en mode écriture horizontale et horizontal en mode vertical.

Comme je l'ai décrit dans mon article « Comprendre les propriétés et valeurs logiques », il existe des correspondances 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 de CSS est spécifiée par rapport à la disposition physique d'un écran. Nous définissons le positionnement, les marges, le remplissage et les bordures en haut, à droite, en bas et à gauche. Nous flottons les choses à gauche et à droite. Parfois, nous voulons lier les choses à la dimension physique, mais de plus en plus, nous pensons à nos dispositions sans référence à l’emplacement physique. La spécification des propriétés logiques et des valeurs déploie cette méthode agnostique en mode écriture pour l'ensemble du CSS.

Modes d'écriture, grille et Flexbox

Lorsque nos nouvelles méthodes de mise en page ont atterri sur la scène, elles ont apporté une approche agnostique. lors du mode d’écriture du composant étant agencé sous forme de schéma flex ou réseau. 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é à parler de CSS Grid, mes premières présentations étaient un récapitulatif complet. les propriétés dans la spécification. J'ai mentionné que la propriété grid-area pouvait être utilisée pour définir les quatre lignes afin de placer un élément de la grille. L'ordre de ces lignes ne correspond toutefois pas à la position habituelle haut, droite, bas et gauche utilisée 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 nous fixions les deux lignes de début, puis les deux lignes de fin. Utiliser haut, droite, bas et gauche fonctionnerait bien si nous étions en mode écriture horizontale, si nous retournons la grille sur le côté, cela n’a aucun sens. Si nous utilisons la surface de la grille: 1/2/3/5; comme dans le stylo en dessous des lignes, les lignes sont définies comme suit:

• la grille-début-rangée: 1; – le début du bloc
• début de colonne: 2 – début en ligne
• fin de rangée: 3 – fin du bloc
• fin de colonne: 5 – fin en ligne [19659036] Voir le stylo [grid-area] (https://codepen.io/rachelandrew/pen/zgEEQW) de Rachel Andrew .

  Rangées et colonnes Flexbox

  Si vous utilisez flexbox et ajoutez à l'affichage: flex dans un conteneur, vos éléments s'affichent sous forme de ligne comme valeur initiale de la La propriété flex-direction correspond à 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 est horizontale. Si la direction du texte du script actuel est orientée de gauche à droite, les éléments s'aligneront en commençant par la gauche, tandis que s'il est placé de droite à gauche, ils s'aligneront en commençant par la droite.

  Utilisez cependant un mode d'écriture vertical, tel que vertical-rl et flex-direction: row entraînera une disposition verticale des éléments, le sens de la ligne étant vertical. Dans ce codePen suivant, tous les exemples ont flex-direction: row seul le mode d'écriture ou la direction a changé.

  Voir le stylo [flex-direction: row] (https://codepen.io/rachelandrew/ pen / XvezrE) de Rachel Andrew .

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

  Voir le stylo [flex-direction: column] (https://codepen.io/rachelandrew/pen/RXLjbX) d'ici à Rachel Andrew .

  Placement automatique en grille

  Lors de l’utilisation du placement automatique en grille , vous verrez un comportement similaire à celui de la mise en page flex. Les éléments de la grille sont automatiquement placés en fonction du mode d'écriture du document. La valeur par défaut consiste à placer les éléments en rangées, ce qui correspond à la direction en ligne (horizontalement en mode d'écriture horizontal et en vertical).

  Voir le stylo [Grid auto-placement row] (https://codepen.io/rachelandrew/pen / eqGeYV) de Rachel Andrew .

  Essayez de modifier le flux d'éléments en colonne comme dans l'exemple ci-dessous. Les éléments vont maintenant passer dans la dimension de bloc – verticalement en mode d'écriture horizontal et horizontalement en verticale.

  Voir le stylo [Grid auto-placement column] (https://codepen.io/rachelandrew/pen/xvXPby) par Rachel Andrew .

  Positionnement en ligne avec grille

  Positionnement en ligne également respecte 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 si nous sommes en 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 la grille horizontalement. Ainsi couvrant 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 couvrant deux pistes verticalement. Toujours sur deux colonnes, mais les colonnes sont maintenant horizontales.

  Voir le stylo [Margins: adjacent siblings] (https://codepen.io/rachelandrew/pen/mNBqEy) de Rachel Andrew .

  Alignement dans la grille et dans la boîte souple

  L'un des premiers endroits où de nombreuses personnes auront été en contact avec la voie Flexbox traiter avec 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é justification-contenu pour aligner tous les éléments sur flex-end les éléments bougent. à la fin de leur rangée. Cela signifie que dans un mode d'écriture horizontal avec une orientation de gauche à droite, tous les éléments se déplacent vers la droite, la fin de cette ligne étant à droite. Si la direction est droite à gauche, ils se déplacent tous vers la gauche.

  En mode d'écriture vertical, ils se déplacent vers le bas, en supposant qu'il leur reste suffisamment d'espace pour le faire. J'ai placé un inline-size sur les composants de cet exemple pour nous assurer de disposer d'un espace disponible dans nos conteneurs flexibles pour voir l'alignement en action.

  L'alignement est un peu plus facile à comprendre dans la disposition de la grille. , comme nous avons toujours les deux axes pour 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 souhaitez savoir s'il faut utiliser les propriétés commençant par align- ou celles commençant par justifier- . Dans la grille, les propriétés align- : – align-content align-items align-self servent à faire l'axe des blocs alignement. Dans un mode d'écriture horizontal, cela signifie verticalement et dans un mode d'écriture vertical horizontalement.

  Encore une fois, nous n'utilisons ni gauche, ni droite, ni haut et bas, car nous souhaitons que notre structure de grille fonctionne exactement de la même manière, peu importe la qualité. qu'est-ce que le mode d'écriture. Nous alignons donc en utilisant début et fin . Si nous alignons sur début sur la dimension du bloc, ce sera haut lorsque, dans horizontal-tb mais sera à droite lorsque vertical-rl . Regardez dans l'exemple ci-dessous, les valeurs d'alignement sont identiques dans les deux grilles, la seule différence étant le mode d'écriture utilisé.

  Voir le stylo [Margins: adjacent siblings] (https://codepen.io/rachelandrew/pen/jgGaML) par Rachel Andrew .

  Les propriétés de Propriété , motivés-éléments motivés eux-mêmes sont toujours utilisés pour un alignement en ligne de la grille. Ce sera horizontal dans un mode d'écriture horizontal et vertical dans un mode d'écriture vertical.

  Voir le stylo [Margins: adjacent siblings] (https://codepen.io/rachelandrew/pen/RXLjpP) de de Rachel Andrew . .

  L’alignement de la Flexbox est quelque peu compliqué par le fait que l’axe principal peut être basculé de ligne en colonne. Par conséquent, dans Flexbox, nous devons réfléchir à la méthode d'alignement entre axe principal et axe transversal. Les propriétés align- sont utilisées sur l'axe transversal. Sur l'axe principal, tout ce que vous avez est justifier-contenu car dans la boîte souple, nous traitons les éléments en tant que groupe. Sur l'axe transversal, vous pouvez utiliser align-content dans les cas où vous avez plusieurs lignes flexibles ET de l'espace dans le conteneur flex pour les espacer. Vous pouvez également utiliser align-items et align-self pour déplacer les éléments flexibles sur l'axe transversal l'un par rapport à l'autre et leur ligne de flexion.

  Voir le stylo [Flexbox alignment] ] (https://codepen.io/rachelandrew/pen/YmrExP) de Rachel Andrew .

  Pour plus d'informations sur l'alignement dans la structure CSS, consultez mes articles précédents du Smashing Magazine:

  Sensibilisation en mode écriture et CSS plus anciens

  Tous les CSS n'ont pas totalement rattrapé ce mode de travail agnostique en mode écriture relatif au flux. Les endroits où cela ne semble pas inhabituel plus vous pensez aux choses en bloc et en ligne, au début et à la fin. Par exemple, dans une présentation multi-colonnes, nous spécifions colonne-largeur ce qui signifie en réalité colonne inline-size, car elle n'est pas mappée sur la largeur physique lorsque vous travaillez en mode d'écriture verticale.

  Voir le Stylo [Multicol and writing-mode] (https://codepen.io/rachelandrew/pen/pMWdLL) de Rachel Andrew .

  Comme vous pouvez le constater, 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 Il est incroyablement utile de penser à la mise en forme CSS de cette manière agnostique en mode écriture. Bien qu'il soit peut-être un peu tôt pour basculer toutes nos propriétés et valeurs vers des propriétés logiques, nous sommes déjà dans un monde relatif aux flux lorsque nous traitons de nouvelles méthodes de présentation. Avoir votre modèle mental en bloc et en ligne, début et fin, plutôt que d'être lié aux quatre coins de votre écran, clarifie beaucoup de choses que nous rencontrons en utilisant flexbox et grid.

  )