writing-mode

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2017.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété CSSwriting-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<html> 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;

<section>  <div>    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>  </div></section>

#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-rlExpérimental: 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-lrExpérimental: 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.
lrObsolète: Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliserhorizontal-tb.
lr-tbObsolète: Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliserhorizontal-tb.
rlObsolète: Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliserhorizontal-tb.
tbObsolète: Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliservertical-rl.
tb-rlObsolète: Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliservertical-rl.

Définition formelle

Valeur initiale	`horizontal-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ée	oui
Valeur calculée	comme défini
Type d'animation	Non animable

Syntaxe formelle

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

Exemple

HTML

Ce fragment de code HTML contient un tableau (<table>) dont chaque ligne indique le mode d'écriture et des exemples de scripts utilisés.

html

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

CSS

Cette première partie permet uniquement de rendre les choses plus agréables à lire :

css

table {  border-collapse: collapse;}td,th {  border: 1px black solid;  padding: 3px;}th {  background-color: lightgray;}

Ensuite, on ajoute la direction du contenu pour chaque cellule du tableau :

css

.example.Text1 span,.example.Text1 {  writing-mode: horizontal-tb;  -webkit-writing-mode: horizontal-tb;  -ms-writing-mode: horizontal-tb;}.example.Text2 span,.example.Text2 {  writing-mode: vertical-lr;  -webkit-writing-mode: vertical-lr;  -ms-writing-mode: vertical-lr;}.example.Text3 span,.example.Text3 {  writing-mode: vertical-rl;  -webkit-writing-mode: vertical-rl;  -ms-writing-mode: vertical-rl;}.example.Text4 span,.example.Text4 {  writing-mode: sideways-lr;  -webkit-writing-mode: sideways-lr;  -ms-writing-mode: sideways-lr;}.example.Text5 span,.example.Text5 {  writing-mode: sideways-rl;  -webkit-writing-mode: sideways-rl;  -ms-writing-mode: sideways-rl;}

Résultat statique

Voici un aperçu du résultat avec un navigateur qui prend en chargewriting-mode :

Spécifications

Specification
CSS Writing Modes Level 4 # block-flow
Scalable Vector Graphics (SVG) 2 # WritingModeProperty

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le9 nov. 2025 par lescontributeurs du MDN.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換

writing-mode

Help improve MDN