Directions des blocs et des éléments en ligne

La direction des blocs est la direction dans laquelle les boîtes de niveau bloc s’empilent. Dans les systèmes d’écriture horizontaux (LTR/RTL), la direction des blocs va du haut vers le bas. Dans les modes d’écriture verticaux, elle devient de gauche à droite ou de droite à gauche.

La direction des lignes est la direction dans laquelle le texte s’écoule sur une ligne. Dans les langues LTR, elle va de gauche à droite. En RTL, elle va de droite à gauche. Dans les modes d’écriture verticaux, elle devient verticale, du haut vers le bas.

writing-mode définit l’orientation fondamentale de l’écoulement du texte :

• horizontal-tb — texte horizontal, du haut vers le bas (par défaut)
• vertical-rl — texte vertical, colonnes de droite à gauche
• vertical-lr — texte vertical, colonnes de gauche à droite

Avec writing-mode: horizontal-tb (par défaut) :

• Direction des blocs = verticale (haut → bas)
• Direction des lignes = horizontale (gauche → droite en LTR, droite → gauche en RTL)
• Début des blocs = haut, fin des blocs = bas
• Début des lignes = gauche (LTR) ou droite (RTL)

Avec writing-mode: vertical-rl :

• Direction des blocs = horizontale (droite → gauche)
• Direction des lignes = verticale (haut → bas)
• Début des blocs = droite, fin des blocs = gauche
• Début des lignes = haut, fin des lignes = bas

Imaginez un système de coordonnées qui pivote avec le mode d’écriture. Les propriétés logiques décrivent des positions relatives à ce système orientable, et non à l’écran fixe.

Dans les modes d’écriture verticaux, text-orientation contrôle l’orientation des caractères individuels :

• mixed : faire pivoter les caractères latins et conserver les caractères CJK droits
• upright : conserver tous les caractères droits (pour le CJK vertical)
• sideways : faire pivoter tous les caractères sur le côté

Utilisation pratique : étiquettes de barre latérale ou d’axe de graphique pivotées dans des contextes d’écriture horizontale :

Un conteneur peut utiliser un mode d’écriture tandis que certains éléments de ligne en utilisent un autre. Cela sert à mélanger des caractères latins et CJK dans le même paragraphe.

Équivalents logiques de la largeur et de la hauteur :

• inline-size = largeur avec horizontal-tb (la dimension des lignes)
• block-size = hauteur avec horizontal-tb (la dimension des blocs)

Pour le texte vertical contenant des nombres ou des abréviations, text-combine-upright (tcy) conserve les courtes séquences de caractères à la verticale et les comprime dans une seule cellule de texte verticale.

Avec writing-mode: horizontal-tb dans une langue LTR, quel axe est l’axe des « blocs » ?

L’axe des blocs est la direction d’empilement des boîtes de bloc ; l’axe des lignes est la direction d’écoulement du texte. Dans les systèmes d’écriture horizontaux, l’axe des blocs est vertical et celui des lignes est horizontal. Dans l’écriture verticale, ces axes s’inversent. writing-mode contrôle l’orientation fondamentale des axes. Les propriétés logiques s’adaptent aux axes actuellement définis comme ceux des blocs et des lignes.