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.

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

/* 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.

Syntaxe formelle

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.

<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 class="exampleText1">我家没有电脑。</td>
        <td class="exampleText1">Example text</td>
        <td class="exampleText1">1994年に至っては</td>
    </tr>
    <tr>
        <td>vertical-lr</td>
        <td class="exampleText2">我家没有电脑。</td>
        <td class="exampleText2">Example text</td>
        <td class="exampleText2">1994年に至っては</td>
    </tr>
    <tr>
        <td>vertical-rl</td>
        <td class="exampleText3">我家没有电脑。</td>
        <td class="exampleText3">Example text</td>
        <td class="exampleText3">1994年に至っては</td>
    </tr>
    <tr>
        <td>sideways-lr</td>
        <td class="exampleText4">我家没有电脑。</td>
        <td class="exampleText4">Example text</td>
        <td class="exampleText4">1994年に至っては</td>
    </tr>
    <tr>
        <td>sideways-rl</td>
        <td class="exampleText5">我家没有电脑。</td>
        <td class="exampleText5">Example text</td>
        <td class="exampleText5">1994年に至っては</td>
    </tr>

CSS

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

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 :

.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 charge writing-mode :

Spécifications

Spécification État Commentaires
CSS Writing Modes Module Level 3
La définition de 'writing-mode' dans cette spécification.
Candidat au statut de recommandation Définition initiale
CSS Writing Modes Level 4
La définition de 'writing-mode' dans cette spécification.
Version de travail Ajout des valeurs sideways-lr et sideways-rl.

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
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

Oui

8 -webkit-

12

12 -webkit-

411

36 — 512

9 -ms- 315 -webkit- 5.1 -webkit-
lr, lr-tb, rl, rl-tb, tb, and tb-rl4812439 -ms- Oui ?
horizontal-tb, vertical-lr, and vertical-rl Oui Non43 Non Oui ?
sideways-lr and sideways-rl Non ?43 Non Non ?
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple

Oui

3 -webkit-

Oui

47 -webkit-

Oui

Oui -webkit-

411

36 — 512

?5.1 -webkit-

Oui

5.0 -webkit-

lr, lr-tb, rl, rl-tb, tb, and tb-rl4848 Oui43 ? ?5.0
horizontal-tb, vertical-lr, and vertical-rl Non Non Non ? ? ? Non
sideways-lr and sideways-rl Non Non ? ? ? ? Non

1. Firefox 42 added support for bidirectional and RTL scripts in vertical modes.

2. From version 36 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. Internet Explorer's implementation differs from the specification.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, L2o, teoli, FredB
 Dernière mise à jour par : SphinxKnight,