CSS中的text-orientation属性详解

描述
text-orientation属性控制竖向排版（vertical writing modes）时文本字符的方向。它专门用于解决在垂直书写模式下（如writing-mode: vertical-rl/lr），拉丁字符和表意文字的显示方向问题。这个属性在中文、日文等竖向排版场景中尤为重要。

属性值详解

• mixed（默认值）：竖向排列时，表意文字直立显示，拉丁文字顺时针旋转90度
• upright：所有字符都直立显示（包括拉丁文字）
• sideways：所有字符都顺时针旋转90度显示
• sideways-right（兼容性差）：同sideways
• use-glyph-orientation（已废弃）：使用SVG的glyph-orientation-vertical属性

解题过程

步骤1：理解竖向排版的基础
首先需要设置垂直书写模式：

.container {
  writing-mode: vertical-rl; /* 或vertical-lr */
}

• vertical-rl：从上到下，从右到左
• vertical-lr：从上到下，从左到右

步骤2：默认行为（mixed值）

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* 默认值 */
}

效果：

• 中文、日文等表意文字：直立显示
• 英文、数字等拉丁文字：顺时针旋转90度
• 这是最符合传统竖向排版习惯的方式

步骤3：所有文字直立显示（upright值）

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

效果：

• 所有字符都直立显示，包括拉丁文字
• 拉丁文字会逐个竖向排列，每个字母占一行
• 适合需要所有字符都保持直立的特殊场景

步骤4：所有文字旋转显示（sideways值）

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

效果：

• 所有字符都顺时针旋转90度显示
• 表意文字也会被强制旋转
• 创造特殊的排版效果时使用

步骤5：实际应用示例

<div class="traditional-vertical">
  <p>这是中文文本 English Text 123数字</p>
</div>

<div class="upright-vertical">
  <p>这是中文文本 English Text 123数字</p>
</div>

.traditional-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* 传统竖向排版 */
  height: 200px;
  border: 1px solid #ccc;
}

.upright-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright; /* 所有文字直立 */
  height: 200px;
  border: 1px solid #ccc;
  margin-top: 20px;
}

步骤6：浏览器兼容性考虑

• 现代浏览器基本都支持text-orientation属性
• 对于不支持的老版本浏览器，需要有降级方案
• 可以配合@supports规则进行特性检测：

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

@supports (text-orientation: mixed) {
  .vertical-text {
    text-orientation: mixed;
  }
}

步骤7：与其他属性的配合
text-orientation常与以下属性配合使用：

• text-combine-upright：将多个字符（如数字）组合成一个字符宽度显示
• text-align：在垂直方向上的对齐方式
• letter-spacing：在垂直方向上的字符间距

总结
text-orientation属性专门用于优化垂直排版时的文本显示效果，通过不同的取值可以控制混合文字（中文+英文）在垂直方向上的显示方式。在实际项目中，需要根据设计需求和阅读习惯选择合适的值，通常mixed值最能满足传统的竖向排版需求。