1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
|
---
title: writing-mode
slug: Web/CSS/writing-mode
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/writing-mode
---
<div>{{CSSRef}}</div>
<p>La propriété CSS <strong><code>writing-mode</code></strong> définit si les lignes d'un texte sont écrites horizontalement ou verticalement et la direction selon laquelle le bloc grandit. Lorsque cette propriété est définie pour un document entier, elle devrait être appliquée à la racine (soit l'élément {{HTMLElement("html")}} pour les documents HTML).</p>
<div>{{EmbedInteractiveExample("pages/css/writing-mode.html")}}</div>
<p class="hidden">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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<p>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é <code>writing-mode</code> détermine également l'ordre du contenu de niveau bloc.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>horizontal-tb</code></dt>
<dd>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.</dd>
<dt><code>vertical-rl</code></dt>
<dd>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.</dd>
<dt><code>vertical-lr</code></dt>
<dd>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.</dd>
<dt><code>sideways-rl</code>{{experimental_inline}}</dt>
<dd>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.</dd>
</dl>
<dl>
<dt><code>sideways-lr</code>{{experimental_inline}}</dt>
<dd>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.</dd>
<dt><code>lr</code> {{deprecated_inline}}</dt>
<dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>horizontal-tb</code>.</dd>
<dt><code>lr-tb</code> {{deprecated_inline}}</dt>
<dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>horizontal-tb</code>.</dd>
<dt><code>rl</code> {{deprecated_inline}}</dt>
<dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>horizontal-tb</code>.</dd>
<dt><code>tb</code> {{deprecated_inline}}</dt>
<dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>vertical-rl</code>.</dd>
<dt><code>tb-rl</code> {{deprecated_inline}}</dt>
<dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>vertical-rl</code>.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemple">Exemple</h2>
<h3 id="HTML">HTML</h3>
<p>Ce fragment de code HTML contient un tableau ({{HTMLElement("table")}}) dont chaque ligne indique le mode d'écriture et des exemples de scripts utilisés.</p>
<pre class="brush: html"><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>
</pre>
<h3 id="CSS">CSS</h3>
<p>Cette première partie permet uniquement de rendre les choses plus agréables à lire :</p>
<pre class="brush:css;">table {
border-collapse:collapse;
}
td, th {
border: 1px black solid; padding: 3px;
}
th {
background-color: lightgray;
}
</pre>
<p>Ensuite, on ajoute la direction du contenu pour chaque cellule du tableau :</p>
<pre class="brush:css;">.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;
}
</pre>
<p>{{EmbedLiveSample("Exemple", 400, 500)}}</p>
<h3 id="Résultat_statique">Résultat statique</h3>
<p>Voici un aperçu du résultat avec un navigateur qui prend en charge <code>writing-mode</code> :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/12201/writing-mode-actual-result.png" style="height: 430px; width: 351px;"></p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}</td>
<td>{{Spec2("CSS3 Writing Modes")}}</td>
<td>Définition initiale</td>
</tr>
<tr>
<td>{{SpecName("CSS4 Writing Modes", "#block-flow", "writing-mode")}}</td>
<td>{{Spec2("CSS4 Writing Modes")}}</td>
<td>Ajout des valeurs <code>sideways-lr</code> et <code>sideways-rl</code>.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.writing-mode")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>L'attribut SVG <code><a href="/fr/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code></li>
<li>{{cssxref("direction")}}</li>
<li>{{cssxref("unicode-bidi")}}</li>
<li>{{cssxref("text-orientation")}}</li>
<li>{{cssxref("text-combine-upright")}}</li>
<li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties">Les propriétés logiques en CSS</a></li>
<li><a href="https://www.w3.org/International/articles/vertical-text/">Mettre en forme du texte vertical (chinois, coréen, japonais, mongol)</a></li>
<li><a href="https://w3c.github.io/i18n-tests/results/writing-mode-vertical">Tests de prise en charge des navigateurs</a></li>
</ul>
|
