Writing-mode - Propriété CSS

Schéma de la syntaxe de writing-mode.

Description de la propriété writing-mode.

writing-mode définit l'orientation du texte (horizontal, vertical) afin de l'adapter à la langue utilisée. Plus précisément, writing-mode définit quel est l'axe des blocs (horizontal ou vertical) et en conséquence l'axe des lignes.

• Les langues latines s'écrivent horizontalement, de gauche à droite, et les lignes s'enchaînent du haut vers le bas.
• Les langues arabes ou l'hébreu s'écrivent également horizontalement mais de droite à gauche. Les lignes se suivent du haut vers le bas.
• Les langages CJK (Chinois, Japonais, Coréen) s'écrivent verticalement, et les lignes se suivent de la droite vers la gauche.
• Enfin, certains langages comme le mongolien, s'écrivent verticalement, avec des lignes qui s'enchaînent de gauche à droite.

Reportez-vous également à la propriété direction pour une information plus complète.

Valeurs pour writing-mode.

• writing-mode: horizontal-tb;

  La valeur horizontal-tb correspondant aux langues européennes et arabes : les lignes de texte s'écrivent de la gauche vers la droite, et du haut vers le bas. Ce qui correspond aux langues latines. Pour les langues arabes, il sera nécessaire de préciser que le sens d'écriture est de droite à gauche avec la propriété direction, ou de faire confiance à l'algorithme bidi.

  Effet sur le texte.

  Ce texte est écrit avec writing-mode:horizontal-tb; C'est à dire que les lignes s'écrivent de gauche à droite et du haut vers le bas.

  Effet sur un tableau.

  1	2	3
  4	5	6

  Effet sur un conteneur flex.

  1

  2

  3

  4

  5
• writing-mode: vertical-rl;

  Le texte s'écrit verticalement du haut vers le bas, puis de la droite vers la gauche. Ceci correspond aux langages CJK : chinois, japonais, coréen.

  Effet sur le texte.

  Ce texte est écrit avec writing-mode:vertical-rl;. C'est à dire que les lignes s'écrivent du haut vers le bas, et de la droite vers la gauche.

  Effet sur un tableau.

  1	2	3
  4	5	6

  Effet sur un conteneur flex.

  1

  2

  3

  4

  5
• writing-mode: vertical-lr;

  Le texte s'écrit verticalement du haut vers le bas, puis de la gauche vers la droite. Cette présentation est adaptée à des langages comme le mongolien.

  Effet sur le texte.

  Ce texte est écrit avec writing-mode:vertical-lr;. C'est à dire que les lignes s'écrivent du haut vers le bas, et de la gauche vers la droite.

  Effet sur un tableau.

  1	2	3
  4	5	6

  Effet sur un conteneur flex.

  1

  2

  3

  4

  5
• writing-mode: sideways-rl; ⚠

  Le texte s'écrit verticalement de haut en bas, puis de droite à gauche. Tous les glyphes, même ceux prévus pour une écriture verticale, sont disposés dans le sens de l'écriture.

  Effet sur le texte.

  Ce texte est écrit avec writing-mode:sideways-rl.

  Effet sur un tableau.

  1	2	3
  4	5	6

  Effet sur un conteneur flex.

  1

  2

  3

  4

  5
• writing-mode: sideways-lr; ⚠

  Le texte s'écrit verticalement de haut en bas, puis de gauche à droite. Tous les glyphes, même ceux prévus pour une écriture verticale, sont disposés dans le sens de l'écriture.

  Effet sur le texte.

  Ce texte est écrit avec writing-mode:sideways-lr.

  Effet sur un tableau

  1	2	3
  4	5	6

  Effet sur un conteneur flex

  1

  2

  3

  4

  5
• writing-mode: lr; ✗ writing-mode: lr-tb; ✗ writing-mode: rl; ✗ writing-mode: rl-tb; ✗ writing-mode: tb; ✗ writing-mode: tb-rl; ✗

  Ces valeurs sont obsolètes bien que encore reconnues par de nombreux navigateurs. Voici leur équivalence avec les valeurs standardisées :

  lr lr-tb rl rl-tb	horizontal-tb
  tb tb-rl	vertical-rl

• writing-mode: initial; (horizontal-tb) writing-mode: inherit; writing-mode: revert; writing-mode: revertLayer; writing-mode: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Présentation générale des modes d'écriture (langues non latines).

La restitution correcte de l'ensemble des langues écrites dans le monde présente une difficulté majeure qui est la direction et le sens d'écriture. En effet la plupart des langues européennes s'écrivent de gauche à droite, puis du haut vers le bas, tandis que la langue arabe s'écrit de la droite vers la gauche, puis du haut vers le bas. Quant aux langues chinoise, japonaise et coréenne (souvent abrégé par CJK), elles s'écrivent verticalement.

A cela vient s'ajouter la possibilité de mixer dans le même paragraphe des directions d'écriture différentes, par exemple insérer un mot arabe dans un texte écrit pour le reste en anglais.

Les directions block et inline.

La première chose à faire est de définir et distinguer les directions block et inline :

• inline : c'est la direction des lignes de texte. Pour les langues européennes, ce sera donc la direction horizontale, de la gauche vers la droite.
• block : c'est la direction suivant laquelle les blocs se disposent. Les blocs sont des éléments tels que les paragraphes p, les titres h1, h2, etc. Pour les langues européennes, cette direction est verticale, du haut vers le bas.

block et inline sont deux directions qui sont toujours perpendiculaires l'une par rapport à l'autre.

Voici, pour les langues courantes, comment se positionnent les directions block et inline. C'est la propriété writing-mode qui pour l'essentiel, définit ces deux directions.

Langues européennes

writing-mode:horizontal-tb;


Langues arabes

writing-mode:horizontal-tb;
direction:rtl;

Langues CJK

writing-mode:vertical-rl;


Langue mongole

writing-mode:vertical-lr;


Hébreu

writing-mode:vertical-rl;
direction:rtl;

L'orientation des caractères.

Lorsque la direction inline est verticale (langues CJK par exemple), il peut être nécessaire de conserver l'orientation initiale des caractères. Cette possibilité peut tout aussi bien être utilisée dans toutes les langues à écriture horizontale par exemple pour afficher un titre verticalement.

L'orientation des caractères est gérée par la propriété text-orientation.

Le sens d'écriture.

Cette notion est surtout utile pour les langues arabes, qui s'écrivent de la droite vers la gauche.

HTML propose une balise spécialement destinée à la gestion du sens d'écriture : la balise bdo. En CSS, les propriétés direction et unicode-bidi peuvent également être utilisées. La règle direction:rtl; par exemple demande une écriture de la droite vers la gauche (rtl = Right To Left). Reportez-vous à la description de ces propriétés car il y a quelques subtilités quant à leur utilisation.

Il faut envisager également les changement de sens d'écriture à l'intérieur d'un même bloc. Par exemple un mot arabe inséré dans un texte en anglais.

Exemple : le mot arabe est écrit de droite à gauche, bien que le reste du texte de cet élément soit écrit de la gauche vers la droite.

Les propriétés logiques ou contextuelles (logical properties).

A partir du moment où la direction et le sens d'écriture sont dépendants de la langue, les termes "gauche" et "droite" sont trop rigides. La propriété margin-left par exemple définit la marge à gauche, mais est-ce le début ou la fin de la ligne de texte ?

Pour résoudre cette imprécision CSS définit maintenant plusieurs catégories de propriétés :

• Les propriétés physiques. Ce sont celles qui sont les plus anciennes, et qui sont définies indépendamment de la langue utilisée. Elles sont définies avec des mots tels que top (haut), right (droite), bottom (bas), et left (gauche).
• Les propriétés logiques ou contextuelles. Elles sont relatives aux directions des flux, flux des blocs, ou flux des lignes. Elles sont définies avec des mots tels que
  block-start, block-end : début et fin du bloc, donc suivant la direction block,
  inline-start, inline-end : début et fin de la ligne, donc suivant la direction inline).
• Les propriétés relatives à la direction des lignes. Moins courantes, ces propriétés sont définies avec des mots tels que over, under, line-left et line-right.

Voici les équivalences entre les propriétés physiques (en bleu) et les propriétés contextuelles (en vert) pour quelques uns des principaux modes d'écriture.

Les dimensions contextuelles.

Les dimensions des éléments peuvent également être définies de façon contextuelle, avec les propriétés :

• inline-size : dimension de l'élément dans la direction des lignes. Pour les langues européennes cela correspond à la largeur de l'élément.
• block-size : dimension de l'élément dans la direction des blocs, autrement dit la hauteur pour les langues européennes.

Les valeurs start et end.

Suivant la même logique, les valeurs left et right pourront être remplacées par les valeurs start et end dans de nombreuses syntaxes. Par exemple :

text-align:start;
justify-content:end;

Résumé des correspondances entre propriétés physiques et contextuelles.

Les navigateurs doivent considérer les valeurs de deux propriétés pour déterminer à quelle propriété physique correspond une propriété contextuelle. Ces deux propriétés sont writing-mode et direction.

Références.

Les propriétés logiques et leur comportement sont définis dans le module CSS Logical Properties and Values de la norme CSS.

Exemple d'animation de writing-mode.

La propriété writing-mode ne peut pas être animée. On ne voit d'ailleurs pas trop l'intérêt d'animer cette propriété car, pour une langue donnée, une seule valeur est pertinente.

Exemple interactif avec la propriété writing-mode.

Avec ce simulateur, vous pouvez tester les différents valeurs pour writing-mode appliquées à un bloc de texte.

Compatibilité des navigateurs avec writing-mode.

Remarques :

(1) Internet Explorer supporte des valeurs issues d'une ancienne version de la spécification.

1

Propriété
writing-mode

2

Valeurs
sideways-lr
sideways-rl

3

Valeurs
lr tb

Estimation de la prise en charge globale.

96%

80%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

Opéra

Firefox

QQ Browser

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Histoire de la propriété writing-mode.

• Module CSS - Modes d'écriture - Niveau 3

  Première définition de la propriété writing-mode.
  

  02 Décembre 2010

  Document de travail.

  

  20 Mars 2014

  Candidat à la recommandation.

  

  24 Octobre 2019

  Proposé à la recommandation.

  

  10 Décembre 2019

  Recommandation.

• Module CSS - Modes d'écriture - Niveau 4

  Ajout des valeurs sideways-lr et sideways-rl.
  

  07 Décembre 2017

  Document de travail.

  

  24 Mai 2018

  Candidat à la recommandation.

  

  

Voir aussi, concernant les modes d'écriture.

La spécification concernant les modes d'écriture est dénommée CSS Writing Modes. Elle regroupe tout ce qui concerne l'écriture bidirectionnelle, et la gestion fine des écritures verticales (CJK). La propriété writing-mode est décrite dans ce module, ainsi que les propriétés ci-dessous :

Propriétés :