writing-mode - Propriété CSS
Résumé des caractéristiques de la propriété writing-mode
horizontal-tb
| vertical-rl
| vertical-lr
| sideways-rl
| sideways-lr
horizontal-tb
writing-mode
ne peut pas être animée.Description.
writing-mode
définit l'orientation du texte (horizontal, vertical) afin de l'adapter à la langue utilisée. Plus précisément, writing-mode
définit quel est l'axe des blocs (horizontal ou vertical) et en conséquence l'axe des lignes.
- Les langues latines s'écrivent horizontalement, de gauche à droite, et les lignes s'enchaînent du haut vers le bas.
- Les langues arabes ou l'hébreu s'écrivent également horizontalement mais de droite à gauche. Les lignes se suivent du haut vers le bas.
- Les langages CJK (Chinois, Japonais, Coréen) s'écrivent verticalement, et les lignes se suivent de la droite vers la gauche.
- Enfin, certains langages comme le mongolien, s'écrivent verticalement, avec des lignes qui s'enchaînent de gauche à droite.
Reportez-vous également aux propriétés direction
et unicode-bidi
.
Syntaxes pour writing-mode
.
writing-mode:
;
- writing-mode: horizontal-tb;
La valeur
horizontal-tb
correspondant aux langues européennes et arabes : le texte s'écrit ligne par ligne, et du haut en bas. Pour les langues arabes, il sera nécessaire de préciser que le sens d'écriture est de droite à gauche. Ceci peut être fait en utilisant une balise bdo dans le code HTML.Effet sur le texte et les images.
Effet sur un tableau1 2 3 4 5 6
Effet sur un conteneur flex12345 - writing-mode: vertical-rl;
Le texte s'écrit verticalement de haut en bas, puis de droite à gauche. Ceci correspond aux langagesCJK : chinois, japonais, coréen.
Effet sur le texte et les images.
Effet sur un tableau1 2 3 4 5 6
Effet sur un conteneur flex12345 - writing-mode: vertical-lr;
Le texte s'écrit verticalement de haut en bas, puis de gauche à droite. Cette présentation est adaptée à des langages comme le mongolien.
Effet sur le texte et les images.
Effet sur un tableau1 2 3 4 5 6
Effet sur un conteneur flex12345 - writing-mode: sideways-rl; ⚠
Le texte s'écrit verticalement de haut en bas, puis de droite à gauche. La typographie est horizontale d'après la spécification du W3C.
Effet sur le texte et les images.
Effet sur un tableau1 2 3 4 5 6
Effet sur un conteneur flex12345 - writing-mode: sideways-lr; ⚠
Le texte s'écrit verticalement de haut en bas, puis de gauche à droite. La typographie est horizontale d'après la spécification du W3C.
Effet sur le texte et les images.
Effet sur un tableau1 2 3 4 5 6
Effet sur un conteneur flex12345 - writing-mode: lr; ✗ writing-mode: lr-tb; ✗ writing-mode: rl; ✗ writing-mode: rl-tb; ✗ writing-mode: tb; ✗ writing-mode: tb-rl; ✗
Ces valeurs sont obsolètes bien que encore reconnues par de nombreux navigateurs. Voici leur équivalence avec les valeurs standardisées :
lr
lr-tb
rl
rl-tbhorizontal-tb
tb
tb-rlvertical-rl
- writing-mode:
initial
; writing-mode:inherit
; writing-mode:revert
; writing-mode:revert-layer
; writing-mode:unset
;La valeur initiale est :
.horizontal-tb
Présentation générale des modes d'écriture (langues non latines).
La restitution correcte de l'ensemble des langues écrites dans le monde présente une difficulté majeure qui est la direction et le sens d'écriture. En effet la plupart des langues européennes s'écrivent de gauche à droite, puis du haut vers le bas, tandis que la langue arabe s'écrit de la droite vers la gauche, puis du haut vers le bas. Quant aux langues chinoise, japonaise et coréenne (souvent abrégé par CJK), elles s'écrivent verticalement.
A cela vient s'ajouter la possibilité de mixer dans le même paragraphe des directions d'écriture différentes, par exemple insérer un mot arabe dans un texte écrit pour le reste en anglais.
Les directions block
et inline
.
La première chose à faire est de définir et distinguer les directions block
et inline
:
inline
: c'est la direction des lignes de texte. Pour les langues européennes, ce sera donc la direction horizontale, de la gauche vers la droite.block
: c'est la direction suivant laquelle les blocs se disposent. Les blocs sont des éléments tels que les paragraphes p, les titres h1, h2, etc. Pour les langues européennes, cette direction est verticale, du haut vers le bas.
block
et inline
sont deux directions qui sont toujours perpendiculaires l'une
par rapport à l'autre.
Voici, pour les langues courantes, comment se positionnent les directions block
et inline
.
C'est la propriété writing-mode
qui pour l'essentiel, définit ces deux directions.
Premier bloc de texte dans une langue latine.
Deuxième bloc de texte dans une langue latine.
Troisième bloc de texte dans une langue latine.
Langues européennes
writing-mode:horizontal-tb;
Premier bloc de texte dans une langue arabe.
Deuxième bloc de texte dans une langue arabe.
Troisième bloc de texte dans une langue arabe.
Langues arabes
writing-mode:horizontal-tb;
direction:rtl;
Premier bloc de texte dans une langue CJK.
Deuxième bloc de texte dans une langue CJK.
Troisième bloc de texte dans une langue CJK.
Langues CJK
writing-mode:vertical-rl;
Premier bloc de texte dans la langue mongole.
Deuxième bloc de texte dans la langue mongole.
Troisième bloc de texte dans la langue mongole.
Langue mongole
writing-mode:vertical-lr;
Premier bloc de texte en hébreu.
Deuxième bloc de texte en hébreu.
Troisième bloc de texte en hébreu.
Hébreu
writing-mode:vertical-rl;
direction:rtl;
L'orientation des caractères.
Lorsque la direction inline
est verticale (langues CJK par exemple), il peut être nécessaire
de conserver l'orientation initiale des caractères.
Cette possibilité peut tout aussi bien être utilisée dans toutes les langues à écriture horizontale
par exemple pour afficher un titre verticalement.
L'orientation des caractères est gérée par la propriété text-orientation
.
Ce texte
est écrit
verticalement
writing-mode:vertical-rl;
text-orientation:sideways;
Ce texte
est écrit
verticalement
writing-mode:vertical-rl;
text-orientation:upright;
Le sens d'écriture.
Cette notion est surtout utile pour les langues arabes, qui s'écrivent de la droite vers la gauche.
HTML propose une balise spécialement destinée à la gestion du sens d'écriture : la balise bdo.
En CSS, les propriétés direction
et unicode-bidi
peuvent également être utilisées.
La règle direction:rtl;
par exemple demande une écriture de la droite vers la gauche
(rtl
= Right To Left).
Reportez-vous à la description de ces propriétés car il y a quelques subtilités quant à leur utilisation.
Il faut envisager également les changement de sens d'écriture à l'intérieur d'un même bloc. Par exemple un mot arabe inséré dans un texte en anglais.
Exemple : le mot arabe est écrit de droite à gauche, bien que le reste du texte de cet élément soit écrit de la gauche vers la droite.
Les propriétés logiques ou contextuelles (logical properties).
A partir du moment où la direction et le sens d'écriture sont dépendants de la langue, les termes
"gauche" et "droite" sont trop rigides. La propriété margin-left
par exemple définit
la marge à gauche, mais est-ce le début ou la fin de la ligne de texte ?
Pour résoudre cette imprécision CSS définit maintenant plusieurs catégories de propriétés :
- Les propriétés physiques. Ce sont celles qui sont les plus anciennes, et qui sont définies indépendamment
de la langue utilisée. Elles sont définies avec des mots tels que
top
(haut),right
(droite),bottom
(bas), etleft
(gauche). - Les propriétés logiques ou contextuelles. Elles sont relatives aux directions des flux, flux des blocs, ou
flux des lignes. Elles sont définies avec des mots tels que
block-start
,block-end
: début et fin du bloc, donc suivant la directionblock
,
inline-start
,inline-end
: début et fin de la ligne, donc suivant la directioninline
). - Les propriétés relatives à la direction des lignes. Moins courantes, ces propriétés sont définies avec
des mots tels que
over
,under
,line-left
etline-right
.
Voici les équivalences entre les propriétés physiques (en bleu) et les propriétés contextuelles (en vert) pour quelques uns des principaux modes d'écriture.
top
/ block-start
left
inine-start
right
inine-end
bottom
/ block-end
top
/ block-start
left
inine-end
right
inine-start
bottom
/ block-end
top
/ inline-start
left
block-end
CJK
right
block-start
bottom
/ inline-end
Les dimensions contextuelles.
Les dimensions des éléments peuvent également être définies de façon contextuelle, avec les propriétés :
inline-size
: dimension de l'élément dans la direction des lignes. Pour les langues européennes cela correspond à la largeur de l'élément.block-size
: dimension de l'élément dans la direction des blocs, autrement dit la hauteur pour les langues européennes.
Les valeurs start
et end
.
Suivant la même logique, les valeurs left
et right
pourront être remplacées
par les valeurs start
et end
dans de nombreuses syntaxes. Par exemple :
text-align:start;
justify-content:end;
Résumé des correspondances entre propriétés physiques et contextuelles.
Les navigateurs doivent considérer les valeurs de deux propriétés pour déterminer à quelle propriété physique
correspond une propriété contextuelle. Ces deux propriétés sont writing-mode
et direction
.
writing-mode→
horizontal-tb
vertical-rl
vertical-lr
direction→
ltr
rtl
ltr
rtl
ltr
rtl
inline-size
width
height
block-size
height
width
inline-start
left
right
top
bottom
top
bottom
inline-end
right
left
bottom
top
bottom
top
block-start
top
right
left
block-end
bottom
left
right
over
top
right
left
under
bottom
left
right
line-left
left
top
bottom
line-right
right
bottom
top
Références.
Les propriétés logiques et leur comportement sont définis dans le module CSS Logical Properties and Values de la norme CSS.
Animation de la propriété writing-mode
.
La propriété writing-mode
ne peut pas être animée.
On ne voit d'ailleurs pas trop l'intérêt d'animer cette propriété car, pour une langue donnée, une seule valeur est pertinente.
Simulateur.
Prise en charge par les navigateurs (compatibilité).
writing-mode
.
sideways-lr
et sideways-rl
dans la syntaxe de cette propriété.
lr
et tb
dans la syntaxe de cette propriété.
writing-mode
sideways-lr
sideways-rl
lr tb
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que writing-mode
.
Les spécifications CSS éditées par le W3C sont organisées en modules. writing-mode
fait partie du Module CSS - Modes d'écriture (CSS Writing Modes). Les définitions suivantes sont également décrites dans ce même module.