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.

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

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

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

<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>

table { border-collapse:collapse; }
td, th {border: 1px black solid; padding: 3px; }
th {background-color: lightgray; }
.exampleText1 { width:75px; writing-mode: horizontal-tb;}
.exampleText2 { height:75px; writing-mode: vertical-lr; }
.exampleText3 { height:75px; writing-mode: vertical-rl; }
.exampleText4 { height:75px; writing-mode: sideways-lr; }
.exampleText5 { height:75px; writing-mode: sideways-rl; }

Spécifications

Compatibilité des navigateurs

[1] Une implémentation expérimentale est disponible depuis Gecko 36. Elle est gérée avec la préférence layout.css.vertical-text.enabled dont la valeur par défaut est false jusqu'à Firefox 38. À partir de Firefox 39 et Firefox 40, la préférence était mise à true pour les versions Nightly et Developer Edition. Il est à noter que tous les widgets CSS ne suivent pas tous cette implémentation. Cette préférence a été retirée avec Gecko 51 et la propriété ne peut plus être désactivée depuis cette version.

[2] L'implémentation d' Internet Explorer diffère de la spécification. À ce sujet, lire l'article du Dev Center d'Internet Explorer.

[3] Les systèmes d'écritures bidirectionnels et RTL (right to left pour « droite à gauche ») sont supportés pour les modes verticaux depuis Gecko 42.

Voir aussi

• L'attribut SVG writing-mode
• direction
• unicode-bidi