CSS中direction和writing-mode属性详解

CSS中 direction 和 writing-mode 是两个用于控制文本布局方向的重要属性，它们在实现多语言支持和特殊排版效果时非常有用。下面将深入解析这两个属性的用法、区别和实际应用场景。

一、direction 属性详解

1.1 基本概念

direction 属性用于控制文本的水平排列方向，主要影响从左到右或从右到左的文本流向。

1.2 取值

ltr：left-to-right，从左到右排列（默认值）。
rtl：right-to-left，从右到左排列。

1.3 影响范围

文本的水平排列方向。
行内元素的顺序。
表格列的排列顺序。
列表项的排列方向。
表单元素（如输入框）的文本方向。

1.4 代码示例

/* css */
div.ltr {
  direction: ltr;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}

div.rtl {
  direction: rtl;
  border: 1px solid #ccc;
  padding: 10px;
}

<!--html-->
<div class="ltr">
  <p>这是从左到右排列的文本 (默认方向)。</p>
  <ul>
    <li>项目 1</li>
    <li>项目 2</li>
    <li>项目 3</li>
  </ul>
  <table border="1">
    <tr>
      <td>列 1</td>
      <td>列 2</td>
      <td>列 3</td>
    </tr>
  </table>
</div>

<div class="rtl">
  <p>这是从右到左排列的文本。</p>
  <ul>
    <li>项目 1</li>
    <li>项目 2</li>
    <li>项目 3</li>
  </ul>
  <table border="1">
    <tr>
      <td>列 1</td>
      <td>列 2</td>
      <td>列 3</td>
    </tr>
  </table>
</div>

1.5 实际应用

direction: rtl 主要用于支持阿拉伯语、希伯来语等从右到左书写的语言。在这些语言中，不仅文本流动方向改变，整个页面布局也会相应调整。

二、writing-mode 属性详解

2.1 基本概念

writing-mode 属性控制文本的整体布局方向，包括文本块的排列方向和文本行内字符的流向。它可以改变文本是水平排列还是垂直排列。

2.2 取值

horizontal-tb：水平方向，从上到下（默认值）。
vertical-rl：垂直方向，从上到下，从右到左。
vertical-lr：垂直方向，从上到下，从左到右。
sideways-rl：文本垂直排列，字符向右旋转。
sideways-lr：文本垂直排列，字符向左旋转。

2.3 影响范围

文本块的排列方向（水平或垂直）。
行的方向和顺序。
字符的排列方式。
块级元素的布局。
文档的整体流动方向。

2.4 代码示例

/* css */
.container {
  display: flex;
  gap: 20px;
}

.box {
  border: 1px solid #ccc;
  padding: 10px;
  width: 200px;
  height: 300px;
}

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

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

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

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

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

<!-- html-->
<div class="container">
  <div class="box horizontal-tb">
    <h3>horizontal-tb</h3>
    <p>这是默认的水平文本布局，从上到下排列。</p>
  </div>
  
  <div class="box vertical-rl">
    <h3>vertical-rl</h3>
    <p>这是垂直文本布局，从上到下，从右到左排列。</p>
  </div>
  
  <div class="box vertical-lr">
    <h3>vertical-lr</h3>
    <p>这是垂直文本布局，从上到下，从左到右排列。</p>
  </div>
</div>

2.5 实际应用

中文、日文、朝鲜文等亚洲语言的垂直排版。
创建特殊的设计效果和排版样式。
制作垂直导航菜单。
实现多栏布局中的特殊排列需求。

三、direction 和 writing-mode 的区别

特性	direction	writing-mode
主要作用	控制水平方向的文本流向	控制文本块的整体布局方向（水平或垂直）
取值范围	ltr, rtl	horizontal-tb, vertical-rl, vertical-lr, sideways-rl, sideways-lr
影响范围	主要影响水平方向的排列	影响整个文本块的布局方向
应用场景	多语言支持（尤其是RTL语言）	特殊排版效果、垂直文本
与坐标轴关系	只影响水平轴(X轴)	同时影响水平轴(X轴)和垂直轴(Y轴)

3.1 组合使用示例

当 direction 和 writing-mode 组合使用时，可以实现更复杂的文本布局效果：

/* css */
.combo-box {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px;
  display: inline-block;
}

.combo1 {
  writing-mode: vertical-rl;
  direction: rtl;
}

.combo2 {
  writing-mode: vertical-lr;
  direction: rtl;
}

<!-- html -->
<div class="combo-box combo1">
  <h4>vertical-rl + direction: rtl</h4>
  <p>这是一个垂直排列且方向从右到左的文本示例。</p>
</div>

<div class="combo-box combo2">
  <h4>vertical-lr + direction: rtl</h4>
  <p>这是一个垂直排列但方向设置为从右到左的文本示例。</p>
</div>

四、浏览器兼容性

direction：所有现代浏览器都支持，IE6+也支持
writing-mode：现代浏览器(Chrome 48+, Firefox 41+, Safari 10+, Edge 12+)支持标准值，但旧版浏览器可能需要前缀或只支持部分值。

请点击 direction 和 writing-mode 来查看更多浏览器兼容性支持信息。

五、通俗理解

5.1 direction（方向） ：主要控制 水平方向 上文本的流动方向，就像决定文字是从左到右还是从右到左写。

ltr（left-to-right）：从左到右，适用于大多数语言如英文、中文。
rtl（right-to-left）：从右到左，适用于阿拉伯语、希伯来语等。
比喻：决定你写字时是从本子左边开始还是右边开始。

5.2 writing-mode（书写模式） ：控制文本块整体的布局方向，决定文本是水平排列还是垂直排列。

horizontal-tb：水平方向，从上到下排列（默认模式）
vertical-rl：垂直方向，从右到左排列（如日本古籍的排版）
vertical-lr：垂直方向，从左到右排列
比喻：决定你是把本子横过来写还是竖过来写。

5.3 区别总结：

direction 主要控制单个文本行内的流向（水平方向）。
writing-mode 控制整个文本块的布局方向（可以是水平或垂直）。
一个(direction)控制行内流动，一个(writing-mode)控制整体布局。

六、最佳实践

使用 direction 时，通常应 unicode-bidi 属性结合使用，以确保复杂文本的正确显示。
在RTL语言页面中，可在 <html> 元素上设置 dir="rtl" 属性。
使用 writing-mode 创建垂直文本时，注意调整元素的宽度和高度以适应内容。
对于需要同时支持LTR和RTL语言的网站，可以使用CSS变量或CSS框架来简化布局调整。

通过合理运用这两个属性，开发者可以创建更加灵活、符合不同语言和设计需求的网页布局，提升用户体验。

彩蛋

完整示例链接，请移步Cnb： Cnb中的完整示例