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.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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
Ordinateur | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Support simple | Chrome
Support complet
Oui
| Edge
Support complet
12
| Firefox
Support complet
41
| IE
Support complet
9
| Opera
Support complet
15
| Safari
Support complet
5.1
| WebView Android
Support complet
Oui
| Chrome Android
Support complet
Oui
| Edge Mobile
Support complet
Oui
| Firefox Android
Support complet
41
| Opera Android ? | Safari iOS
Support complet
5.1
| Samsung Internet Android
Support complet
Oui
|
lr , lr-tb , rl , rl-tb , tb , and tb-rl | Chrome Support complet 48 | Edge Support complet 12 | Firefox Support complet 43 | IE
Support complet
9
| Opera Support complet Oui | Safari ? | WebView Android Support complet 48 | Chrome Android Support complet 48 | Edge Mobile Support complet Oui | Firefox Android Support complet 43 | Opera Android ? | Safari iOS ? | Samsung Internet Android Support complet 5.0 |
horizontal-tb , vertical-lr , and vertical-rl | Chrome Support complet Oui | Edge Aucun support Non | Firefox Support complet 43 | IE Aucun support Non | Opera Support complet Oui | Safari ? | WebView Android Aucun support Non | Chrome Android Aucun support Non | Edge Mobile Aucun support Non | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android Aucun support Non |
sideways-lr and sideways-rl | Chrome Aucun support Non | Edge ? | Firefox Support complet 43 | IE Aucun support Non | Opera Aucun support Non | Safari ? | WebView Android Aucun support Non | Chrome Android Aucun support Non | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android Aucun support Non |
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.
Voir aussi
- L'attribut SVG
writing-mode
direction
unicode-bidi
text-orientation
text-combine-upright