text-orientation必须与writing-mode成对使用才生效，仅设text-orientation:mixed而未设vertical-rl或vertical-lr时无效；mixed适用于中英混排，upright仅限特殊艺术场景；Safari需真机测试，字体与行高须协同调优。
text-orientation 必须和 writing-mode 成对出现才生效
单独写 text-orientation: mixed 但没设 writing-mode，浏览器直接忽略——DevTools 里该行 CSS 显示灰色删除线，控制台也不报错，页面照常横排。这是“写了没反应”的最常见原因。
它只在以下两种流方向下起作用：
-
writing-mode: vertical-rl（中文竖排主流，从上到下、行从右向左） -
writing-mode: vertical-lr（如蒙古文，从上到下、行从左向右）
用 writing-mode: horizontal-tb 或压根不写 writing-mode，text-orientation 就是无效声明。
mixed 和 upright 在中英混排时的实际表现差异极大
选错值不是“不好看”，而是“读不懂”：
立即学习“前端免费学习笔记（深入）”；
-
text-orientation: mixed：汉字直立，“HTML”旋转 90° 成一列（H→T→M→L），数字和标点自动适配方向，符合出版规范 -
text-orientation: upright：所有字符强制直立，“HTML”变成每字母占一行，句号.跑到行首，连字符-和斜杠/方向错乱，纯视觉干扰
除非是纯中文标题或印章式设计，否则一律用 mixed；upright 仅适合极少数艺术化场景，且需配合 transform: rotate(180deg) 手动调整才可能可用。
Safari 真机验证不可跳过
截至 2026 年 8 月，Safari 对 text-orientation 的渲染仍有偏差：
- 断行位置可能和 Chrome/Firefox 不一致
- 顿号、括号等标点的悬挂基线对齐偏移
- 某些字体下
letter-spacing行为异常
模拟器不够，必须用 iOS 真机访问测试页；尤其涉及长段落或复杂标点（如引号嵌套、破折号、全角半角混用）时，差 1px 都可能影响阅读节奏。
字体与行高必须同步调优，不是加两行 CSS 就完事
竖排不是样式开关，而是排版系统：
- 旋转后的英文字符高度略大于汉字，
line-height: 1.2容易挤成糊状；建议起始值设为line-height: 1.4，再微调 -
letter-spacing在竖排中实际控制的是“字与字之间的垂直偏移量”，不是水平间距——这点极易被忽略 - 字体必须明确支持竖排：
"Noto Serif CJK SC"、"Source Han Serif SC"推荐；慎用"SimSun"（Windows 自带），新版 Chrome 中启用mixed可能触发字重异常
真正卡住人的，从来不是属性本身，而是 writing-mode 没配对、Safari 没真机测、字体没挑对这三件事。
