Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

writing-mode

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété 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.

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é
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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

Spécifications

Spécification Statut 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

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 8-webkit 41 (41)[1][3] 9.0 -ms[2] 15-webkit 5.1-webkit
SVG 1.1 : lr, lr-tb, rl, tb, tb-rl 48.0 (sans préfixe) 43 (43) 9.0 -ms[2] (Oui) ?
sideways-rl,sideways-lr Pas de support 43 (43) ? ? ?
Fonctionnalité Android Webview Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 3-webkit (Oui) 47-webkit 41.0 (41) [1][3] ? ? 5.1 -webkit
SVG 1.1 values lr, lr-tb, rl, tb, tb-rl ? 48.0 (sans préfixe) 48.0 (sans préfixe) 43.0 (43) ? ? ?
sideways-rl,sideways-lr Pas de support Pas de support Pas de support ? ? ? ?

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

[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

Étiquettes et contributeurs liés au document

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