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
|
---
title: writing-mode
slug: Web/CSS/writing-mode
translation_of: Web/CSS/writing-mode
---
<p> {{CSSRef}}</p>
<p> <strong><code>writing-mode</code></strong> 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置书时，应在根元素上设置它（对于 HTML 文档应该在 <code>html</code> 元素上设置）</p>
<p>此属性指定块流动方向，即块级容器堆叠的方向，以及行内内容在块级容器中的流动方向。因此，它也确定块级内容的顺序。</p>
<h2 id="语法">语法</h2>
<pre class="brush: css">/* 关键值 */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
/* 全局值 */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;</pre>
<p>将 <code>write-mode</code> 属性指定为下面列出的值之一。水平流动方向也受<a href="https://www.w3.org/International/questions/qa-scripts.en">脚本的方向</a>影响，从左到右（ltr，类似于英语和大多数其他语言）或从右到左（rtl，类似于希伯来语或阿拉伯语）。</p>
<h3 id="Values">Values</h3>
<dl>
<dt><code>horizontal-tb</code></dt>
<dd>对于左对齐(ltr)脚本，内容从左到右水平流动。对于右对齐(rtr)脚本，内容从右到左水平流动。下一水平行位于上一行下方。</dd>
<dt><code>vertical-rl</code></dt>
<dd>对于左对齐(ltr)脚本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐(rtr)脚本，内容从下到上垂直流动，下一垂直行位于上一行右侧。</dd>
<dt><code>vertical-lr</code></dt>
<dd>对于左对齐(ltr)脚本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐(rtr)脚本，内容从下到上垂直流动，下一垂直行位于上一行左侧。</dd>
<dt><code>sideways-rl</code>{{experimental_inline}}</dt>
<dd>对于左对齐(ltr)脚本，内容从下到上垂直流动。对于右对齐(rtr)脚本，内容从上到下垂直流动。所有字形（即使是垂直脚本中的字形）都朝向右侧。</dd>
</dl>
<dl>
<dt><code>sideways-lr</code>{{experimental_inline}}</dt>
<dd>对于左对齐(ltr)脚本，内容从上到下垂直流动。对于右对齐(rtr)脚本，内容从下到上垂直流动。所有字形（即使是垂直脚本中的字形）都朝向左侧。</dd>
<dt><code>lr</code> {{deprecated_inline}}</dt>
<dd>除 SVG1 文档外，已弃用。对于 CSS，请改用 <code>horizontal-tb</code>。</dd>
<dt><code>lr-tb</code> {{deprecated_inline}}</dt>
<dd>除 SVG1 文档外，已弃用。对于 CSS，请改用 <code>horizontal-tb</code>。</dd>
<dt><code>rl</code> {{deprecated_inline}}</dt>
<dd>除 SVG1 文档外，已弃用。对于 CSS，请改用 <code>horizontal-tb</code>。</dd>
<dt><code>tb</code> {{deprecated_inline}}</dt>
<dd>除 SVG1 文档外，已弃用。对于 CSS，请改用 <code>vertical-lr</code>。</dd>
<dt><code>tb-rl</code> {{deprecated_inline}}</dt>
<dd>除 SVG1 文档外，已弃用。对于 CSS，请改用 <code>vertical-rl</code>。</dd>
</dl>
<h3 id="正式语法">正式语法</h3>
{{csssyntax}}
<h2 id="示例">示例</h2>
<p>该例子展现了所有writing-mode语法，以及不同语言的展示情况。</p>
<h3 id="HTML">HTML</h3>
<p>以下 HTML 只是一个简单的 {{HTMLElement("table")}}，每个单元格展示了不同的 <code>writing-mode</code> 的文本。</p>
<pre class="brush: html"><code><table>
<tr>
<th>Value</th>
<th>Vertical script</th>
<th>Horizontal script</th>
<th>Mixed script</th>
</tr>
<tr>
<td>horizontal-tb</td>
<td class="example Text1"><span>我家没有电脑。</span></td>
<td class="example Text1"><span>Example text</span></td>
<td class="example Text1"><span>1994年に至っては</span></td>
</tr>
<tr>
<td>vertical-lr</td>
<td class="example Text2"><span>我家没有电脑。</span></td>
<td class="example Text2"><span>Example text</span></td>
<td class="example Text2"><span>1994年に至っては</span></td>
</tr>
<tr>
<td>vertical-rl</td>
<td class="example Text3"><span>我家没有电脑。</span></td>
<td class="example Text3"><span>Example text</span></td>
<td class="example Text3"><span>1994年に至っては</span></td>
</tr>
<tr>
<td>sideways-lr</td>
<td class="example Text4"><span>我家没有电脑。</span></td>
<td class="example Text4"><span>Example text</span></td>
<td class="example Text4"><span>1994年に至っては</span></td>
</tr>
<tr>
<td>sideways-rl</td>
<td class="example Text5"><span>我家没有电脑。</span></td>
<td class="example Text5"><span>Example text</span></td>
<td class="example Text5"><span>1994年に至っては</span></td>
</tr>
</table></code></pre>
<h3 id="CSS">CSS</h3>
<div class="hidden">
<p>Some preparatory CSS just to make things look a little better:</p>
<pre class="brush: css">table {
border-collapse:collapse;
}
td, th {
border: 1px black solid; padding: 3px;
}
th {
background-color: lightgray;
}
.example {
height:75px;
width:75px;
}</pre>
</div>
<p>The CSS that adjusts the directionality of the content looks like this:</p>
<pre class="brush: css"><code>.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;
}</code></pre>
<p>{{EmbedLiveSample("示例", 400, 500)}}</p>
<h3 id="显示效果">显示效果</h3>
<p>下图显示了在浏览器对 <code>writing-mode</code> 的支持不完整的情况下输出的外观：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/17087/Screenshot_2020-02-05_21-04-30.png" style="height: 430px; width: 351px;"></p>
<h2 id="Specification">Specification</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}</td>
<td>{{Spec2("CSS3 Writing Modes")}}</td>
<td>Initial definition</td>
</tr>
<tr>
<td>{{SpecName("CSS4 Writing Modes", "#block-flow", "writing-mode")}}</td>
<td>{{Spec2("CSS4 Writing Modes")}}</td>
<td>Add <code>sideways-lr</code> and <code>sideways-rl</code></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.properties.writing-mode")}}</p>
<h2 id="请参阅">请参阅</h2>
<ul>
<li>SVG <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code> attribute</li>
<li>{{Cssxref("direction")}}</li>
<li>{{Cssxref("unicode-bidi")}}</li>
<li>{{Cssxref("text-orientation")}}</li>
<li>{{Cssxref("text-combine-upright")}}</li>
<li><a href="https://wiki.developer.mozilla.org/docs/Web/CSS/CSS_Logical_Properties">CSS Logical properties</a></li>
<li><a href="https://www.w3.org/International/articles/vertical-text/">Styling vertical text (Chinse, Japanese, Korean and Mongolian)</a></li>
<li>Extensive browsers support test results: <a href="https://w3c.github.io/i18n-tests/results/writing-mode-vertical">https://w3c.github.io/i18n-tests/results/writing-mode-vertical</a></li>
</ul>
<div id="gtx-trans" style="position: absolute; left: 206px; top: 4388px;">
<div class="gtx-trans-icon"></div>
</div>
|
