CSS3 高级特性 - text-orientation 属性

1. 什么是 text-orientation 属性？

text-orientation 属性用于控制垂直文本的方向，它定义了在垂直书写模式下（如使用 writing-mode: vertical-rl 或 vertical-lr）文本字符的排列方式。这对于支持多语言文本布局，特别是混合了水平书写语言（如英文）和垂直书写语言（如中文、日文、韩文）的场景非常重要。

2. text-orientation 的语法

text-orientation: mixed | upright | sideways;

2.1 取值说明

  • mixed：默认值，对于垂直书写模式，汉字、日文假名等保持 upright（直立）状态，而拉丁字母、数字等会旋转 90 度
  • upright：所有字符（包括拉丁字母、数字等）都保持直立状态，不旋转
  • sideways：所有字符都旋转 90 度，与 writing-mode: sideways-rl 或 sideways-lr 的效果类似

3. 核心知识点

3.1 text-orientation 的作用

text-orientation 属性主要用于控制垂直书写模式下文本字符的方向，解决以下问题：

  • 当混合使用垂直书写语言（如中文）和水平书写语言（如英文）时，如何处理不同语言字符的排列
  • 如何控制数字、符号等在垂直文本中的显示方式
  • 如何调整文本的可读性和视觉效果

3.2 不同取值的应用场景

  1. mixed：适用于大多数垂直排版场景，特别是混合了中文、日文、韩文与英文、数字的文本

  2. upright：适用于需要保持所有字符直立显示的场景，如标题、标签等，或者当你希望英文、数字等也保持垂直排列时

  3. sideways：适用于需要所有字符都旋转显示的场景，与 sideways-rl 或 sideways-lr 书写模式配合使用

3.3 与 writing-mode 的关系

text-orientation 属性通常与 writing-mode 属性配合使用，writing-mode 定义了文本的整体排列方向，而 text-orientation 则定义了垂直方向下字符的具体排列方式：

  • 当 writing-mode 为 horizontal-tb 时，text-orientation 不起作用
  • 当 writing-mode 为 vertical-rl 或 vertical-lr 时，text-orientation 控制字符的方向
  • 当 writing-mode 为 sideways-rl 或 sideways-lr 时，text-orientation 通常设置为 sideways

4. 实用案例

4.1 混合语言垂直排版

HTML 结构：

<div class="vertical-text mixed">
  <p>CSS3 教程：text-orientation 属性</p>
  <p>垂直排版中的英文和数字：CSS3 2024</p>
</div>

CSS 样式：

.vertical-text {
  writing-mode: vertical-rl;
  height: 400px;
  padding: 20px;
  font-size: 18px;
  line-height: 2;
  border: 1px solid #ddd;
  margin-bottom: 20px;
}

.mixed {
  text-orientation: mixed;
}

4.2 所有字符直立显示

HTML 结构：

<div class="vertical-text upright">
  <p>CSS3 教程：text-orientation 属性</p>
  <p>垂直排版中的英文和数字：CSS3 2024</p>
</div>

CSS 样式：

.upright {
  text-orientation: upright;
}

4.3 所有字符旋转显示

HTML 结构：

<div class="vertical-text sideways">
  <p>CSS3 教程：text-orientation 属性</p>
  <p>垂直排版中的英文和数字：CSS3 2024</p>
</div>

CSS 样式：

.sideways {
  text-orientation: sideways;
}

4.4 标题与正文的不同处理

HTML 结构：

<div class="article">
  <h2 class="article-title">CSS3 高级特性</h2>
  <div class="article-content">
    <p>CSS3 引入了许多新特性，包括 text-orientation 属性，它可以控制垂直文本的方向。</p>
    <p>通过合理使用 text-orientation，你可以创建更加美观、易读的垂直排版效果。</p>
  </div>
</div>

CSS 样式：

.article {
  writing-mode: vertical-rl;
  height: 500px;
  padding: 20px;
  border: 1px solid #ddd;
}

.article-title {
  text-orientation: upright;
  font-size: 24px;
  margin: 0 0 20px 0;
  color: #333;
}

.article-content {
  text-orientation: mixed;
  font-size: 16px;
  line-height: 1.8;
}

4.5 表格中的垂直文本

HTML 结构：

<table class="vertical-table">
  <thead>
    <tr>
      <th>产品</th>
      <th>价格</th>
      <th>库存</th>
      <th>销量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>产品 A</td>
      <td>¥100</td>
      <td>50</td>
      <td>200</td>
    </tr>
    <tr>
      <td>产品 B</td>
      <td>¥200</td>
      <td>30</td>
      <td>150</td>
    </tr>
  </tbody>
</table>

CSS 样式：

.vertical-table {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border-collapse: collapse;
  margin: 20px 0;
}

.vertical-table th,
.vertical-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.vertical-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

5. 浏览器兼容性

浏览器 支持情况
Chrome 48+
Firefox 41+
Safari 10+
Edge 79+

6. 最佳实践

  1. 根据内容选择合适的取值：

    • 对于混合了中文、日文、韩文与英文、数字的文本，使用 mixed
    • 对于需要所有字符都直立显示的场景，如标题、标签等，使用 upright
    • 对于需要所有字符都旋转显示的场景，使用 sideways

  2. 与 writing-mode 配合使用：text-orientation 通常与 writing-mode 配合使用，根据 writing-mode 的取值选择合适的 text-orientation 值

  3. 考虑可读性：不同的 text-orientation 取值会影响文本的可读性，特别是对于英文和数字，需要根据实际情况选择最合适的方式

  4. 测试不同浏览器：不同浏览器对 text-orientation 的支持可能存在差异，特别是在处理复杂混合语言文本时，需要进行充分测试

  5. 响应式设计：在不同屏幕尺寸下，可能需要调整 text-orientation，例如在移动设备上使用更简洁的排版方式

7. 代码优化建议

  1. 避免过度使用：text-orientation 主要用于垂直书写模式，在水平书写模式下不起作用，因此不要在所有文本上都使用

  2. 合理组合属性：当使用垂直书写模式时，建议同时设置 writing-mode 和 text-orientation，以获得最佳效果

  3. 考虑性能：虽然 text-orientation 对性能影响很小，但在大量文本的情况下，特别是使用复杂的混合语言排版时，需要注意优化

  4. 使用简写形式：如果需要同时设置 writing-mode 和 text-orientation，可以考虑使用 CSS 变量或预处理器来简化代码

8. 总结

text-orientation 属性是 CSS3 中一个非常实用的高级特性，它可以帮助开发者控制垂直文本的方向，解决混合语言排版中的问题，提升文本的可读性和视觉效果。通过合理使用 text-orientation，你可以创建更加美观、专业的垂直排版效果，特别是在处理包含中文、日文、韩文与英文、数字混合的文本时。

9. 练习

  1. 练习 1：创建一个包含中文、英文和数字的垂直排版文本，分别使用 text-orientation 的三个取值（mixed、upright、sideways），观察它们的不同效果

  2. 练习 2：创建一个垂直排版的标题和正文，标题使用 text-orientation: upright，正文使用 text-orientation: mixed

  3. 练习 3：创建一个垂直排版的表格，使用 text-orientation 优化表格内容的显示效果

  4. 练习 4：创建一个响应式布局，在大屏幕上使用垂直排版和 text-orientation，在移动设备上使用水平排版

10. 相关资源

« 上一篇 CSS3 高级特性 - writing-mode 属性 下一篇 » CSS3 高级特性 - counter-reset 属性
↑