惊鸿一瞥：CSS属性text-orientation的垂直文本艺术

一、属性本质与历史沿革

CSS的text-orientation属性诞生于CSS Writing Modes Module Level 3规范，旨在解决垂直文本排版中的字符方向控制难题。在传统垂直排版中（如中文古籍、日文竖排），汉字需保持正立，而拉丁字母和数字需旋转90度以适应阅读习惯。该属性通过精确控制字符方向，实现了垂直文本排版的自动化处理。

属性值体系包含五个核心选项：

1. mixed（默认值）：保持直立字符正立，侧立字符旋转90度
2. upright：强制所有字符正立排列
3. sideways：使所有字符侧向排列（类似传统横排）
4. sideways-right：字符向右旋转90度
5. use-glyph-orientation：遵循字体内部的方向定义（已废弃）

二、核心应用场景解析

1. 复杂文本排版

在中文、日文、韩文等CJK垂直排版中，mixed模式可自动处理混合文本：

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

此配置下，”ABC中文123”会呈现为：中→A→文→B→C→1→2→3（字符旋转符合语言规范）

2. 艺术化排版设计

通过upright值可创造独特的视觉效果：

.artistic-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform: rotate(180deg); /* 结合旋转创造特殊效果 */
}

适用于海报标题、书籍封面等需要强调文字形态的场景。

3. 多语言支持

在同时包含CJK和拉丁字符的页面中：

.multilingual {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-feature-settings: "vert"; /* 激活垂直排版特性 */
}

确保”English日本語”中的英文自动旋转，日文保持正立。

三、技术实现细节

1. 浏览器兼容性策略

浏览器	支持版本	备注
Chrome	48+	完整支持
Firefox	41+	需前缀
Safari	10.1+	部分支持
Edge	79+	完整支持

渐进增强方案：

.vertical-box {
  writing-mode: vertical-rl;
  /* 基础样式 */
}
@supports (text-orientation: mixed) {
  .vertical-box {
    text-orientation: mixed;
  }
}

2. 性能优化技巧

• 避免在动画中使用该属性，可能引发重排
• 对长文本段落，建议配合text-combine-upright使用
• 优先使用mixed而非upright，减少不必要的重绘

四、典型问题解决方案

1. 数字旋转异常

现象：数字未按预期旋转90度
解决：

.number-fix {
  text-combine-upright: all; /* 合并数字为竖排单位 */
  text-orientation: mixed;
}

2. 自定义字体兼容

问题：某些字体未定义垂直排版特性
方案：

@font-face {
  font-family: 'CustomVert';
  src: url('vert.woff2') format('woff2');
  unicode-range: U+4E00-9FFF; /* 仅对CJK字符生效 */
}

3. 移动端适配

策略：

@media (max-width: 768px) {
  .vertical-nav {
    writing-mode: horizontal-tb;
    text-orientation: initial;
  }
}

五、高级应用案例

1. 动态方向切换

function toggleOrientation() {
  const element = document.querySelector('.dynamic-text');
  const current = getComputedStyle(element).textOrientation;
  const next = current === 'mixed' ? 'upright' : 'mixed';
  element.style.textOrientation = next;
}

2. 3D文本效果

结合CSS Transform：

.three-d-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotateY(30deg) translateZ(20px);
  transform-style: preserve-3d;
}

六、未来发展趋势

1. 子属性细化：规范正在讨论text-orientation-vertical等子属性
2. 变量支持：CSS Custom Properties的集成方案
3. VR适配：3D空间中的垂直文本渲染标准

开发者建议：

• 优先在CJK项目中使用，其他语言谨慎应用
• 配合font-variant-east-asian使用效果更佳
• 定期测试目标平台的渲染效果

通过系统掌握text-orientation属性，开发者能够精准控制垂直文本的显示方式，在保持代码简洁的同时实现复杂的排版需求。这一属性不仅是技术实现，更是跨文化设计的桥梁，为全球化的网页设计提供了重要支持。