CSS中的text-orientation属性详解

描述
text-orientation属性用于控制垂直排版文本中字符的方向。它主要在与writing-mode属性结合使用时发挥作用，特别是在writing-mode设置为垂直方向（vertical-lr或vertical-rl）时，用于指定文本字符是直立显示还是侧向显示。这个属性对于中文、日文等垂直排版文字以及英文混合排版场景非常重要。

属性值详解

1. mixed（默认值）：在垂直排版中，平假名、片假名等表意字符直立显示，而拉丁字母等字符侧向旋转90度显示
2. upright：所有字符都直立显示，拉丁字母等字符也保持垂直方向（但每个字母单独直立）
3. sideways：所有字符都侧向显示，整体向右旋转90度

解题过程

步骤1：理解垂直排版的基础
首先需要设置writing-mode为垂直方向：

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

• vertical-lr：从左到右垂直排列，内容从上到下流动
• vertical-rl：从右到左垂直排列，内容从上到下流动

步骤2：默认mixed模式分析
当writing-mode设置为垂直方向，text-orientation为mixed时：

.example {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* 可省略，因为这是默认值 */
}

效果：

• 中文汉字：正常直立显示
• 英文字母：每个字母旋转90度侧向显示
• 数字：通常也侧向显示

步骤3：upright模式应用
当需要所有字符都直立显示时：

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

效果：

• 所有字符都保持直立方向
• 英文字母会像中文字符一样垂直排列
• 适合需要保持文字自然阅读方向的场景

步骤4：sideways模式应用
当需要所有字符侧向显示时：

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

效果：

• 所有字符统一向右旋转90度
• 创建一致的侧向文本效果
• 适合特定的设计需求

步骤5：实际应用示例

<div class="vertical-layout">
  <p class="mixed">Hello 你好 123</p>
  <p class="upright">Hello 你好 123</p>
  <p class="sideways">Hello 你好 123</p>
</div>

<style>
.vertical-layout p {
  writing-mode: vertical-rl;
  height: 200px;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

.mixed { text-orientation: mixed; }
.upright { text-orientation: upright; }
.sideways { text-orientation: sideways; }
</style>

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

• 现代浏览器基本都支持text-orientation属性
• 对于不支持的老版本浏览器，可以提供水平排版作为降级方案
• 可以使用@supports规则进行特性检测：

@supports (text-orientation: upright) {
  /* 支持时的样式 */
}

@supports not (text-orientation: upright) {
  /* 不支持时的备用样式 */
}

步骤7：最佳实践建议

1. 在中文、日文等垂直排版场景中，通常使用mixed或upright
2. 英文内容为主的垂直排版可考虑使用sideways获得一致效果
3. 结合text-combine-upright属性处理数字和缩写
4. 注意行高和字间距在垂直排版中的调整

这个属性在创建垂直导航、侧边栏标题、东亚语言排版等场景中非常实用。