writing-mode

翻译不完整。 请帮助我们翻译这篇文章!

 

 writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置书时,应在根元素上设置它(对于 HTML 文档应该在 html 元素上设置)

此属性指定块流动方向,即块级容器堆叠的方向,以及行内内容在块级容器中的流动方向。因此,它也确定块级内容的顺序。

语法

/* 关键值 */ 
writing-mode: horizontal-tb; 
writing-mode: vertical-rl; 
writing-mode: vertical-lr; 

/* 全局值 */ 
writing-mode: inherit; 
writing-mode: initial; 
writing-mode: unset;

write-mode 属性指定为下面列出的值之一。水平流动方向也受脚本的方向影响,从左到右(ltr,类似于英语和大多数其他语言)或从右到左(rtl,类似于希伯来语或阿拉伯语)。

Values

horizontal-tb
对于左对齐(ltr)脚本,内容从左到右水平流动。对于右对齐(rtr)脚本,内容从右到左水平流动。下一水平行位于上一行下方。
vertical-rl
对于左对齐(ltr)脚本,内容从上到下垂直流动,下一垂直行位于上一行左侧。对于右对齐(rtr)脚本,内容从下到上垂直流动,下一垂直行位于上一行右侧。
vertical-lr
对于左对齐(ltr)脚本,内容从上到下垂直流动,下一垂直行位于上一行右侧。对于右对齐(rtr)脚本,内容从下到上垂直流动,下一垂直行位于上一行左侧。
sideways-rl
对于左对齐(ltr)脚本,内容从下到上垂直流动。对于右对齐(rtr)脚本,内容从上到下垂直流动。所有字形(即使是垂直脚本中的字形)都朝向右侧。
sideways-lr
对于左对齐(ltr)脚本,内容从上到下垂直流动。对于右对齐(rtr)脚本,内容从下到上垂直流动。所有字形(即使是垂直脚本中的字形)都朝向左侧。
lr
除 SVG1 文档外,已弃用。对于 CSS,请改用 horizo​​ntal-tb
lr-tb
除 SVG1 文档外,已弃用。对于 CSS,请改用 horizo​​ntal-tb
rl
除 SVG1 文档外,已弃用。对于 CSS,请改用 horizo​​ntal-tb
tb
除 SVG1 文档外,已弃用。对于 CSS,请改用 vertical-lr
tb-rl
除 SVG1 文档外,已弃用。对于 CSS,请改用 vertical-rl

正式语法

horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

示例

该例子展现了所有writing-mode语法,以及不同语言的展示情况。

HTML

以下 HTML 只是一个简单的  <table>,每个单元格展示了不同的 writing-mode 的文本。

<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>

CSS

The CSS that adjusts the directionality of the content looks like this:

.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;
}

显示效果

下图显示了在浏览器对 writing-mode 的支持不完整的情况下输出的外观:

Specification

Specification Status Comment
CSS Writing Modes Module Level 3
writing-mode
Proposed Recommendation Initial definition
CSS Writing Modes Level 4
writing-mode
Candidate Recommendation Add sideways-lr and sideways-rl

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
writing-modeChrome Full support 48
Full support 48
Full support 8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 41
Notes
Full support 41
Notes
Notes Firefox 42 added support for bidirectional and RTL scripts in vertical modes.
No support 36 — 51
Disabled
Disabled From version 36 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 9
Notes
Full support 9
Notes
Notes Internet Explorer's implementation differs from the specification.
Full support 9
Prefixed Notes
Prefixed Implemented with the vendor prefix: -ms-
Notes Internet Explorer's implementation differs from the specification.
Opera Full support 35
Full support 35
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 10.1
Full support 10.1
Full support 5.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 48
Full support 48
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 48
Full support 48
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 41
Notes
Full support 41
Notes
Notes Firefox 42 added support for bidirectional and RTL scripts in vertical modes.
No support 36 — 51
Disabled
Disabled From version 36 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 35
Full support 35
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 10.3
Full support 10.3
Full support 5.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 5.0
Full support 5.0
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
horizontal-tb, vertical-lr, and vertical-rlChrome Full support 48Edge Full support 79Firefox Full support 43IE No support NoOpera Full support 35Safari Full support 9WebView Android Full support 48Chrome Android Full support 48Firefox Android Full support 43Opera Android Full support 35Safari iOS Full support 9Samsung Internet Android Full support 5.0
sideways-lr and sideways-rlChrome No support NoEdge No support NoFirefox Full support 43IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 43Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
lr, lr-tb, rl, rl-tb, tb, and tb-rl
Deprecated
Chrome Full support 48Edge Full support 12Firefox Full support 43IE Full support 9Opera Full support 35Safari Full support 10.1WebView Android Full support 48Chrome Android Full support 48Firefox Android Full support 43Opera Android Full support 35Safari iOS Full support 10.3Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

请参阅