text-orientation控制竖排文字方向方法

本文深入解析了CSS中`text-orientation`属性在竖排文字排版中的关键作用与常见误区，强调它必须与`writing-mode`（如`vertical-rl`或`vertical-lr`）协同使用才生效，单独设置将被浏览器忽略；针对中英混排场景，明确推荐采用`text-orientation: mixed`——让汉字直立、ASCII字符顺时针旋转90°并智能适配标点，最契合传统出版规范；同时警示滥用`upright`（导致英文断行错乱、标点失位、数字不可读）和`sideways`（形同未排版）的风险，并指出字体选择、行高、字距等参数在竖排下的语义反转与跨浏览器兼容性挑战，为开发者提供兼具实用性与专业性的竖排排版实战指南。

text-orientation必须和writing-mode一起用

单独设 text-orientation 没有效果，浏览器会直接忽略。它只是个“辅助属性”，只在 writing-mode 为 vertical-rl 或 vertical-lr 时才起作用。如果你写了 text-orientation: mixed 但没配 writing-mode，控制台不会报错，但文字照样横着排。

mixed 是中文竖排的默认且推荐值

text-orientation: mixed 让汉字保持直立，ASCII 字母和数字顺时针旋转 90°，括号、句号等标点也会自动适配方向——这是最符合传统出版习惯的方案。常见错误是误以为 upright 更“整齐”，结果英文变成一列无法识别的竖线，比如 “HTML” 显示成：

H
T
M
L

这不是排版，是断字。

• 混合文本（中英混排、带数字标题）一律优先用 mixed
• upright 仅适合纯中文场景，或设计强制要求所有字符物理朝向一致（如印章效果）
• sideways 几乎不用：它会让所有字符横向堆叠，实际效果接近未竖排

vertical-lr + upright 组合容易出视觉陷阱

有人想让英文也“像汉字一样竖着读”，就写 writing-mode: vertical-lr; text-orientation: upright。表面看每个字母都占一行，但问题立刻暴露：

• 标点位置错乱：英文句号 . 会出现在行首而非行尾
• 连字符 - 和斜杠 / 方向异常，阅读节奏被打断
• 数字序列如 2026 变成上下排列，丧失数值可读性
• 某些字体（尤其非等宽字体）下字母宽度不均，导致左右错位

真正需要英文竖向对齐的场景，应优先考虑 SVG 文本或分字符 span + transform: rotate(90deg)，而不是依赖 text-orientation: upright。

别忽略 font-family 和 line-height 的连锁影响

竖排时，line-height 实际控制的是“行间距”，也就是字与字之间的垂直距离；而 letter-spacing 控制的是同一行内字符的水平偏移——但在竖排下，这个“水平”其实是垂直方向上的字距。所以：

• 中文字体必须支持竖排（如 "Noto Serif CJK SC"、"Source Han Serif SC"），Windows 默认的 "SimSun" 在部分 Chrome 版本中会出现字重异常
• line-height: 1.2 在竖排中可能显得过挤，建议从 1.4 起调
• 若开启 text-orientation: mixed，旋转后的英文高度会略大于汉字，此时 line-height 需兼顾两者基线对齐

复杂点在于：这些参数在不同浏览器渲染引擎里表现不一，尤其是 Safari 对 text-orientation 的支持仍存在细微偏差，上线前务必在真机上验证混合文本的断行与对齐。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《text-orientation控制竖排文字方向方法》文章吧，也可关注golang学习网公众号了解相关技术文章。