writing-mode

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

* Some parts of this feature may have varying levels of support.

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

尝试一下

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

语法

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

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

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

horizontal-tb

对于左对齐(ltr)文本,内容从左到右水平流动。对于右对齐(rtl)文本,内容从右到左水平流动。下一水平行位于上一行下方。

vertical-rl

对于左对齐(ltr)文本,内容从上到下垂直流动,下一垂直行位于上一行左侧。对于右对齐(rtl)文本,内容从下到上垂直流动,下一垂直行位于上一行右侧。

vertical-lr

对于左对齐(ltr)文本,内容从上到下垂直流动,下一垂直行位于上一行右侧。对于右对齐(rtl)文本,内容从下到上垂直流动,下一垂直行位于上一行左侧。

sideways-rl 实验性

对于左对齐(ltr)文本,内容从下到上垂直流动。对于右对齐(rtl)文本,内容从上到下垂直流动。所有字形(即使是垂直文本中的字形)都朝向右侧。

sideways-lr 实验性

对于左对齐(ltr)文本,内容从上到下垂直流动。对于右对齐(rtl)文本,内容从下到上垂直流动。所有字形(即使是垂直文本中的字形)都朝向左侧。

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
适用元素all elements except table row groups, table column groups, table rows, and table columns
是否是继承属性
计算值as specified
动画类型Not animatable

形式语法

writing-mode = 
horizontal-tb |
vertical-rl |
vertical-lr |
sideways-rl |
sideways-lr

示例

使用多种 writing mode

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

HTML

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

html
<table>
  <tr>
    <th></th>
    <th>竖排文本</th>
    <th>横排文本(从左到右)</th>
    <th>横排文本(从右到左)</th>
    <th>混合文本</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>מלל ארוך לדוגמא</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>מלל ארוך לדוגמא</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>מלל ארוך לדוגמא</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>מלל ארוך לדוגמא</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>מלל ארוך לדוגמא</span></td>
    <td class="example Text5"><span>1994 年に至っては</span></td>
  </tr>
</table>

CSS

调整内容方向的 CSS 代码是这样的:

css
.example.Text1 span,
.example.Text1 {
  writing-mode: horizontal-tb;
}

.example.Text2 span,
.example.Text2 {
  writing-mode: vertical-lr;
}

.example.Text3 span,
.example.Text3 {
  writing-mode: vertical-rl;
}

.example.Text4 span,
.example.Text4 {
  writing-mode: sideways-lr;
}

.example.Text5 span,
.example.Text5 {
  writing-mode: sideways-rl;
}

结果

以下图片为不完整支持 writing-mode 的浏览器提供了应当看到的输出:

A 6 rows by 5 columns table showing the various directional flow of text and number adjusted using the vertical-lr or rl, horizontal-lr or rl, sideways-lr or rl horizontal-tb CSS properties. The flow is applied to different languages

规范

Specification
CSS Writing Modes Level 4
# block-flow
Scalable Vector Graphics (SVG) 2
# WritingModeProperty

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
writing-mode
horizontal-tb
lr
Deprecated
lr-tb
Deprecated
rl
Deprecated
rl-tb
Deprecated
sideways-lr
sideways-rl
tb
Deprecated
tb-rl
Deprecated
vertical-lr
vertical-rl
Vertically-oriented form controls

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Deprecated. Not for use in new websites.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见