CSS text-orientation控制竖排文字字符方向

CSS 的 text-orientation 属性在竖排排版中扮演着关键角色，但许多开发者初次使用时常常遇到“写了却没生效”的困扰。首先需要明确：这个属性必须与 writing-mode 配合才能正常发挥作用。单独设置时浏览器会静默忽略——你可以在 DevTools 中看到该声明显示为灰色删除线，控制台也不报错，文字依然保持横排。这可以说是最常见的“写了没反应”的原因。

它并非独立的排版属性，而是当 writing-mode 进入垂直模式后的修饰开关。也就是说，只有以下两种值才能激活它：

• writing-mode: vertical-rl（中文竖排首选，文字从上到下、行从右向左排列）
• writing-mode: vertical-lr（例如蒙古文排版，文字从上到下、行从左向右排列）

如果使用了 writing-mode: horizontal-tb，再添加 text-orientation 也完全无效。

中英混排场景优先选用 mixed

对于现代中文网页的竖排需求，text-orientation: mixed 是默认且安全的选择。它的表现是：汉字保持直立，ASCII 字母和阿拉伯数字会顺时针旋转 90°，括号、句号、顿号等标点符号自动适配方向——这符合中文出版规范，可读性最佳。

常见的误区是以为 upright 更“整齐”，但实际效果往往非常糟糕："HTML" 会变成每个字母单独一行的 H T M L，语义完全丢失；2026 上下堆叠，数值感彻底崩塌；英文句号跑到行首，连字符和斜杠的方向也会出错。除非是纯中文标题或印章式设计，否则一律避免使用 upright。

vertical-rl + mixed 组合下，line-height 和 font-family 需要重新调整

竖排并非简单加两行 CSS 就能搞定。旋转后的英文字符高度略大于汉字，line-height: 1.2 很容易显得过于拥挤。建议初始值设为 line-height: 1.4，然后根据实际渲染效果进行微调。

letter-spacing 在竖排中实际控制的是“字与字之间的垂直偏移量”，而不是水平间距——这一细节容易被忽视，需要特别注意。

字体方面，必须选择明确支持竖排的字体：

• 推荐："Noto Serif CJK SC"、"Source Han Serif SC"
• 慎用："SimSun"（Windows 自带），在新版 Chrome 中开启 mixed 后可能触发字重异常

Safari 渲染差异必须通过真机验证

截至 2026 年 6 月，Safari 对 text-orientation 的支持仍存在细微偏差。断行位置、标点悬挂、基线对齐等方面，可能与 Chrome/Firefox 不一致。上线前务必在 iOS Safari 真机上检查，不能仅依赖模拟器或桌面 Safari。混合文本越复杂（例如包含数字编号、嵌套英文短语、破折号连接词），渲染差异就越明显。