Propriété CSS writing-mode
Utilisez la propriété CSS writing-mode pour définir la direction du flux de texte. Découvrez les valeurs et essayez des exemples.
La propriété CSS writing-mode définit si les lignes de texte sont disposées horizontalement ou verticalement, et dans quelle direction progressent les blocs et les lignes.
Cette page explique ce que fait la propriété, les valeurs qu'elle accepte, quand l'utiliser, et comment elle interagit avec des propriétés associées comme text-orientation et direction.
Ce que contrôle writing-mode
writing-mode modifie la direction de flux des blocs — la direction dans laquelle les boîtes de niveau bloc (paragraphes, titres, etc.) s'empilent — et la direction de base en ligne dans laquelle les caractères s'écoulent au sein d'une ligne. Sur une page en anglais classique, les blocs s'empilent de haut en bas et le texte dans une ligne s'écoule de gauche à droite (horizontal-tb). Passer à une valeur verticale fait pivoter tout ce modèle : les lignes s'écoulent de haut en bas et s'empilent soit de droite à gauche, soit de gauche à droite.
Parce qu'elle redéfinit le sens de « début », « fin », « bloc » et « en ligne », writing-mode fonctionne main dans la main avec les propriétés logiques CSS (margin-block, padding-inline, inset-block, etc.), qui suivent automatiquement le mode d'écriture actif au lieu d'être liées aux côtés physiques.
Quand l'utiliser ?
- Les scripts est-asiatiques verticaux (chinois traditionnel, japonais, coréen) écrits de haut en bas, avec des colonnes allant de droite à gauche — utilisez
vertical-rl. - Les étiquettes d'interface pivotées, comme un en-tête de colonne latéral dans un tableau ou une étiquette d'axe vertical sur un graphique.
- Les mises en page éditoriales ou « magazine » qui font intentionnellement pivoter un titre ou un encadré sur le côté.
Pour les modes verticaux, vous associez presque toujours writing-mode avec text-orientation pour décider si les caractères latins individuels restent droits ou sont pivotés de 90°.
Les navigateurs modernes prennent entièrement en charge la propriété writing-mode sans préfixes vendeur.
| Valeur initiale | horizontal-tb |
|---|---|
| S'applique à | Tous les éléments sauf les groupes de lignes de tableau, les groupes de colonnes de tableau, les lignes de tableau, les colonnes de tableau, le conteneur de base ruby, le conteneur d'annotation ruby. |
| Hérité | Oui. |
| Animatable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.writingMode = "vertical-lr"; |
Syntaxe
Valeurs CSS de writing-mode
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;La valeur par défaut est horizontal-tb. La propriété est héritée, donc la définir sur un conteneur s'applique à tous ses descendants, sauf s'ils la remplacent.
Exemple de la propriété writing-mode avec la valeur horizontal-tb :
Exemple de code CSS writing-mode
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: horizontal-tb;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Résultat
Un autre exemple où le contenu s'écoule verticalement de haut en bas et de droite à gauche.
Exemple de la propriété writing-mode avec la valeur vertical-rl :
Exemple CSS writing-mode vertical-rl
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: vertical-rl;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Dans l'exemple suivant, le contenu s'écoule verticalement de haut en bas et de gauche à droite.
Exemple de la propriété writing-mode avec la valeur vertical-lr :
Exemple CSS writing-mode vertical-lr
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: vertical-lr;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Association avec text-orientation
Dans un mode d'écriture vertical, text-orientation détermine comment chaque glyphe est pivoté. La combinaison la plus courante maintient les caractères CJK droits tout en faisant s'écouler la ligne verticalement :
.vertical {
writing-mode: vertical-rl;
text-orientation: upright; /* keep characters upright instead of rotated 90° */
}Sans text-orientation: upright, les lettres latines et les chiffres sont pivotés de 90° dans le sens des aiguilles d'une montre par défaut dans un mode vertical.
Valeurs
horizontal-tb est la seule valeur horizontale. Les valeurs restantes sont toutes verticales et diffèrent par la direction d'empilement des lignes et l'orientation des glyphes.
| Valeur | Description |
|---|---|
| horizontal-tb | Par défaut. Le contenu s'écoule horizontalement de gauche à droite, et les lignes s'empilent de haut en bas. |
| vertical-rl | Le contenu s'écoule verticalement de haut en bas, et les lignes s'empilent de droite à gauche. |
| vertical-lr | Le contenu s'écoule verticalement de haut en bas et horizontalement de gauche à droite. |
| sideways-rl | Déprécié dans CSS Writing Modes Level 3. Le contenu s'écoule verticalement de haut en bas et tous les glyphes sont orientés latéralement vers la droite. |
| sideways-lr | Déprécié dans CSS Writing Modes Level 3. Le contenu s'écoule verticalement de haut en bas et tous les glyphes sont orientés latéralement vers la gauche. |
| initial | Applique la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |
Propriétés associées
text-orientation— contrôle la façon dont les glyphes individuels sont pivotés dans un mode d'écriture vertical.direction— définit la direction de base en ligne (LTR ou RTL) pour le texte.text-align— aligne le contenu en ligne ; ses mots-clésstart/endrespectent le mode d'écriture.transform— une autre façon de faire pivoter des éléments visuellement, sans modifier le modèle de mise en page.