writing-mode

writing-mode CSS 属性设置文本行是水平排列还是垂直排列，以及块级元素的排列方向。当为整个文档设置时，应在根元素（HTML 文档的 html 元素）上设置。

试试看

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

语法

css

/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* Global values */
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-lr: 除 SVG1 文档外，已弃用。对于 CSS，请改用 vertical-lr。
tb-rl: 除 SVG1 文档外，已弃用。对于 CSS，请改用 vertical-rl。

正式定义

初始值	`horizontal-tb`
应用于	所有元素，除了表格行组、表格列组、表格行和表格列
继承	是
计算值	按指定
动画类型	不可动画

正式语法

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

示例

使用多种书写模式

此示例演示了所有书写模式，并使用各种语言的文本显示了每种模式。

HTML

HTML 是一个<table>，其中每种书写模式都在一行中，一列显示使用该书写模式的各种脚本中的文本。

html

<table>
  <caption>
    Using multiple writing modes
  </caption>
  <tr>
    <th>Value</th>
    <th>Vertical script</th>
    <th>Horizontal (LTR) script</th>
    <th>Horizontal (RTL) script</th>
    <th>Mixed script</th>
  </tr>
  <tr class="text1">
    <th>horizontal-tb</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="text2">
    <th>vertical-lr</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="text3">
    <th>vertical-rl</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="experimental text4">
    <th>sideways-lr</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="experimental text5">
    <th>sideways-rl</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
</table>
<p class="notice">
  Your browser does not support the <code>sideways-lr</code> or
  <code>sideways-rl</code> values.
</p>

CSS

table {
  border-collapse: collapse;
}
td,
th {
  border: 2px black solid;
  padding: 4px;
}
th {
  background-color: lightgray;
}

.experimental {
  display: none;
}

.notice {
  display: table-row;
  font-weight: bold;
  text-align: center;
}

@supports (writing-mode: sideways-lr) {
  .experimental {
    display: table-row;
  }
  .notice {
    display: none;
  }
}

调整内容方向性的 CSS 如下所示

css

.text1 td {
  writing-mode: horizontal-tb;
}

.text2 td {
  writing-mode: vertical-lr;
}

.text3 td {
  writing-mode: vertical-rl;
}

.text4 td {
  writing-mode: sideways-lr;
}

.text5 td {
  writing-mode: sideways-rl;
}

结果

使用 writing-mode 与转换

如果您的浏览器不支持 sideways-lr，则可以使用transform 来实现类似的效果，具体取决于脚本方向。vertical-rl 的效果与 sideways-lr 相同，因此对于从左到右的脚本不需要进行转换。在某些情况下，将文本旋转 180 度足以实现 sideways-lr 的效果，但字体字形可能不是为旋转而设计的，因此这可能会产生意外的定位或渲染。

HTML

html

<table>
  <caption>
    Using writing-mode with transforms
  </caption>
  <thead>
    <tr>
      <th>Vertical LR</th>
      <th>Vertical LR with transform</th>
      <th>Sideways LR</th>
      <th>Only rotate</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="vertical-lr">我家没有电脑。</span>
        <span class="vertical-lr">Example text</span>
      </td>
      <td>
        <span class="vertical-lr rotated">我家没有电脑。</span>
        <span class="vertical-lr rotated">Example text</span>
      </td>
      <td>
        <span class="sideways-lr">我家没有电脑。</span>
        <span class="sideways-lr">Example text</span>
      </td>
      <td>
        <span class="only-rotate">我家没有电脑。</span>
        <span class="only-rotate">Example text</span>
      </td>
    </tr>
  </tbody>
</table>

CSS

css

.vertical-lr {
  writing-mode: vertical-lr;
}

.rotated {
  transform: rotate(180deg);
}

.sideways-lr {
  writing-mode: sideways-lr;
}

.only-rotate {
  inline-size: fit-content;
  transform: rotate(-90deg);
}

table {
  border-collapse: collapse;
}
td,
th {
  border: 2px black solid;
  padding: 4px;
}
th {
  background-color: lightgray;
}
span {
  display: inline-block;
  width: 1.5em;
  text-align: center;
}

结果

规范

规范
CSS 书写模式级别 4 # block-flow

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参见

SVG writing-mode 属性
direction
unicode-bidi
text-orientation
text-combine-upright
CSS 逻辑属性
在 W3.org 上设置垂直文本（中文、日语、韩语和蒙古语）的样式 (2022)
CSS 书写模式模块
创建垂直表单控件