writing-mode

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

* Some parts of this feature may have varying levels of support.

La propriété CSS writing-mode définit si les lignes d'un texte sont écrites horizontalement ou verticalement et la direction selon laquelle le bloc grandit. Lorsque cette propriété est définie pour un document entier, elle devrait être appliquée à la racine (soit l'élément pour les documents HTML).

Exemple interactif

writing-mode: horizontal-tb;

writing-mode: vertical-lr;

writing-mode: vertical-rl;

writing-mode: sideways-rl;

writing-mode: sideways-lr;


  

    
1

    
2

    
3

    
4

  




#example-element {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  width: 80%;
  max-height: 300px;
  display: flex;
}

#example-element > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex: 1;
}

La propriété définit la direction du flux du bloc. C'est dans cette direction que les conteneurs de bloc seront empilés et c'est dans cette direction que le contenu en flux « coule » dans un bloc contenur. Ainsi, la propriété writing-mode détermine également l'ordre du contenu de niveau bloc.

Syntaxe

css
/* Avec un mot-clé */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* Valeurs globales */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;

Valeurs

horizontal-tb

Le contenu coule horizontalement de gauche à droite puis de haut en bas. La ligne horizontale suivante est positionnée sous la ligne précédente.

vertical-rl

Le contenu coule verticalement de haut en bas puis horizontalement de droite à gauche. La ligne verticale suivante est positionnée à gauche de la ligne précédente.

vertical-lr

Le contenu coule verticalement de haut en bas puis horizontalement de gauche à droite. La ligne verticale suivante est positionnée à droite de la ligne précédente.

sideways-rl

Le contenu coule verticalement du haut vers le bas et tous les glyphes, y compris pour les systèmes d'écriture verticaux sont tournés sur le côté, vers la droite.

sideways-lr

Le contenu coule verticalement du haut vers le bas et tous les glyphes, y compris pour les systèmes d'écriture verticaux sont tournés sur le côté, vers la gauche.

lr

Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser horizontal-tb.

lr-tb

Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser horizontal-tb.

rl

Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser horizontal-tb.

tb

Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser vertical-rl.

tb-rl

Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser vertical-rl.

Définition formelle

Valeur initialehorizontal-tb
Applicabilitétous les éléments exceptés les groupes de lignes, les groupes de colonnes des tableaux et les colonnes de tableaux
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationNot animatable

Syntaxe formelle

writing-mode = 
  horizontal-tb  |
  vertical-rl    |
  vertical-lr    |
  sideways-rl    |
  sideways-lr

Exemple

HTML

Ce fragment de code HTML contient un tableau (

) dont chaque ligne indique le mode d'écriture et des exemples de scripts utilisés.

html
Valeur Système d'écriture vertical Système d'écriture horizontal Système d'écriture hybride
horizontal-tb 我家没有电脑。 Example text 1994年に至っては
vertical-lr 我家没有电脑。 Example text 1994年に至っては
vertical-rl 我家没有电脑。 Example text 1994年に至っては
sideways-lr 我家没有电脑。 Example text 1994年に至っては
sideways-rl 我家没有电脑。 Example text 1994年に至っては