写入模型 | writing-mode (Writing Modes) – CSS 中文开发手册
写入模型 | writing-mode (Writing Modes) - CSS 中文开发手册
writing-modeCSS属性定义文本行是否水平或垂直布置以及块扩展的方向。
/* Keyword values */ writing-mode: horizontal-tb; writing-mode: vertical-rl; writing-mode: vertical-lr; /* Global values */ writing-mode: inherit; writing-mode: initial; writing-mode: unset;
语法
该属性指定块流向，即块级别容器堆叠的方向，以及内联级别内容在块容器内流动的方向。因此，writing-mode属性也决定了块级内容的排序。
|
Initial value |
horizontal-tb |
|---|---|
|
Applies to |
all elements except table row groups, table column groups, table rows, and table columns |
|
Inherited |
yes |
|
Media |
visual |
|
Computed value |
as specified |
|
Animation type |
discrete |
|
Canonical order |
the unique non-ambiguous order defined by the formal grammar |
可能值
horizontal-tb——内容按从左到右水平从上到下垂直流动。下一条水平线位于上一条线的下方。
vertical-rl——内容按从上到下垂直流动，水平从右到左。下一条垂直线位于前一行的左侧。
vertical-lr——内容按从上到下垂直流动，水平从左到右。下一条垂直线位于上一行的右侧。
sideways-rl——内容按从上到下垂直流动，所有的字形，甚至是垂直字形的字形都被设置在右侧。sideways-lr——内容按从上到下垂直流动，所有的字形，甚至垂直的字形，都被放在左侧。
lr——已弃用，但SVG1文档除外。对于CSS，使用horizontal-tb。
lr-tb——已弃用，但SVG1文档除外。对于CSS，使用horizontal-tb。
rl——已弃用，但SVG1文档除外。对于CSS，使用horizontal-tb。
tb——已弃用，但SVG1文档除外。对于CSS，使用vertical-lr。
tb-rl——已弃用，但SVG1文档除外。对于CSS，使用vertical-rl。
形式语法
horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
实例
实际结果
规范
|
Specification |
Status |
Comment |
|---|---|---|
|
CSS Writing Modes Module Level 3The definition of 'writing-mode' in that specification. |
Candidate Recommendation |
Initial definition |
|
UnknownThe definition of 'writing-mode' in that specification. |
Unknown |
Add sideways-lr and sideways-rl |
浏览器兼容性
|
Feature |
Chrome |
Edge |
Firefox |
Internet Explorer (defunct) |
Opera |
Safari |
|---|---|---|---|---|---|---|
|
Basic support |
8-webkit (Yes) |
(Yes)-webkit (Yes) |
41 (41)1 |
9-ms2 |
15-webkit |
5.1-webkit |
|
lr |
48 (uprefixed) |
(Yes) |
43 (43) |
9-ms2 |
(Yes) |
? |
|
Feature |
Android |
Android Webview |
Chrome for Android |
Edge |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
|
|---|---|---|---|---|---|---|---|---|---|
|
Basic support |
3-webkit |
(Yes) |
47-webkit (Yes) |
(Yes)-webkit (Yes) |
41.0 (41) 1 |
? |
? |
5.1 -webkit |
|
|
SVG 1.1 values lr, lr-tb, rl, tb, tb-rl |
? |
48.0 (uprefixed) |
48.0 (uprefixed) |
(Yes) |
43.0 (43) |
? |
? |
? |
|
|
sideways-rl,sideways-lr |
No support4 |
No support |
No support |
No support |
? |
? |
? |
? |
|
|
vertical-lr |
vertical-rl |
No support4 |
No support |
No support |
No support |
? |
? |
? |
? |
另见
SVG writing-mode attributedirectionunicode-biditext-orientationtext-combine-upright
CSS 中文开发手册
