writing-mode

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 <html> pour les documents HTML).

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="example Text1">我家没有电脑。</td>
        <td class="example Text1">Example text</td>
        <td class="example Text1">1994年に至っては</td>
    </tr>
    <tr>
        <td>vertical-lr</td>
        <td class="example Text2">我家没有电脑。</td>
        <td class="example Text2">Example text</td>
        <td class="example Text2">1994年に至っては</td>
    </tr>
    <tr>
        <td>vertical-rl</td>
        <td class="example Text3">我家没有电脑。</td>
        <td class="example Text3">Example text</td>
        <td class="example Text3">1994年に至っては</td>
    </tr>
    <tr>
        <td>sideways-lr</td>
        <td class="example Text4">我家没有电脑。</td>
        <td class="example Text4">Example text</td>
        <td class="example Text4">1994年に至っては</td>
    </tr>
    <tr>
        <td>sideways-rl</td>
        <td class="example Text5">我家没有电脑。</td>
        <td class="example Text5">Example text</td>
        <td class="example Text5">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.	Candidat au statut de recommandation	Ajout des valeurs `sideways-lr` et `sideways-rl`.

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
Média	visuel
Valeur calculée	comme spécifié
Type d'animation	discrète
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`writing-mode`	Chrome Support complet 48 Support complet 48 Support complet 8 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Edge Support complet 12 Support complet 12 Support complet 12 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Firefox Support complet 41 Notes Support complet 41 Notes Notes Firefox 42 added support for bidirectional and RTL scripts in vertical modes. Aucun support 36 — 51 Désactivée Désactivée 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.	IE Support complet 9 Préfixée Notes Support complet 9 Préfixée Notes Préfixée Nécessite l'utilisation d'un préfixe : -ms- Notes Internet Explorer's implementation differs from the specification.	Opera Support complet 35 Support complet 35 Support complet 15 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Safari Support complet 10.1 Support complet 10.1 Support complet 5.1 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	WebView Android Support complet 48 Support complet 48 Support complet 3 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Chrome Android Support complet 48 Support complet 48 Support complet 18 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Firefox Android Support complet 41 Notes Support complet 41 Notes Notes Firefox 42 added support for bidirectional and RTL scripts in vertical modes. Aucun support 36 — 51 Désactivée Désactivée 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.	Opera Android Support complet 35 Support complet 35 Support complet 14 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Safari iOS Support complet 10.3 Support complet 10.3 Support complet 5.1 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Samsung Internet Android Support complet 5.0 Support complet 5.0 Support complet 1.0 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
`horizontal-tb`, `vertical-lr`, and `vertical-rl`	Chrome Support complet 48	Edge Aucun support Non	Firefox Support complet 43	IE Aucun support Non	Opera Support complet Oui	Safari Support complet 9	WebView Android Support complet 48	Chrome Android Support complet 48	Firefox Android Support complet 43	Opera Android ?	Safari iOS Support complet 9	Samsung Internet Android Aucun support Non
`sideways-lr` and `sideways-rl` Expérimentale	Chrome Aucun support Non	Edge Aucun support Non	Firefox Support complet 43	IE Aucun support Non	Opera Aucun support Non	Safari Aucun support Non	WebView Android Aucun support Non	Chrome Android Aucun support Non	Firefox Android Support complet 43	Opera Android ?	Safari iOS Aucun support Non	Samsung Internet Android Aucun support Non
`lr`, `lr-tb`, `rl`, `rl-tb`, `tb`, and `tb-rl` Obsolète	Chrome Support complet 48	Edge Support complet 12	Firefox Support complet 43	IE Support complet 9 Préfixée Support complet 9 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -ms-	Opera Support complet Oui	Safari Support complet 10.1	WebView Android Support complet 48	Chrome Android Support complet 48	Firefox Android Support complet 43	Opera Android ?	Safari iOS Support complet 10.3	Samsung Internet Android Support complet 5.0

Légende

Support complet: Support complet
Aucun support: Aucun support
Compatibilité inconnue: Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.: Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.: Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Voir les notes d'implémentation.: Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.: Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.: Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.