text-orientation必须与writing-mode: vertical-rl或vertical-lr配合使用才生效，单独设置会被浏览器静默忽略；mixed是中英混排竖排推荐值，使汉字直立、ASCII字符顺时针旋转90°，符合出版规范。
text-orientation 不设就偏移，不是浏览器 bug 是默认规则
writing-mode: vertical-rl 只改文本流方向（从左到右 → 从上到下），不控制每个字符怎么转。浏览器按 Unicode 脚本规则自动处理：CJK 字符直立，拉丁字母和阿拉伯数字默认顺时针旋转 90°，但标点（如 ,、"、(）可能朝向错乱——比如句号「。」在 vertical-lr 下变横，在 vertical-rl 下才倾向直立，但不加 text-orientation 仍不可靠。
常见现象：vertical-rl 后中文正常，但 USD 123 横躺、英文引号变成「"」状、括号左右翻转。这不是渲染异常，是没覆盖默认行为。
-
text-orientation: mixed：最稳妥，CJK 字直立，英文字母/数字/常见标点（.、,、!）自动旋转适配，适合正文 -
text-orientation: upright：所有字符强制直立（含A、1），适合按钮或短标签，但英文可读性差 - 别用
text-orientation: sideways：汉字也躺倒，完全违背竖排意图
vertical-rl 下 text-orientation: mixed 为什么有时还是偏？
Safari ≤ 12.1 对 text-orientation 支持极弱，mixed 基本被忽略，导致标点不旋转、数字横躺、基线错位。Chrome 和 Firefox 行为一致，但 Safari 旧版本会把半角标点当“拉丁类”处理，而全角标点又因字体缺失显示为空格或方块。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须用
@supports (text-orientation: mixed)包裹竖排样式，对不支持的 Safari 降级为transform: rotate(90deg) - 降级时手动交换
width/height：原height: 200px要改成width: 200px，否则视觉高度塌陷 - 避免依赖
line-height控制字间距——竖排下它影响的是“列宽”，改用padding-block或margin-block
微信 X5 内核里 writing-mode 突然失效，其实是 text-orientation 缺失触发的连锁反应
微信 Android 客户端（尤其 8.0.30 之前）的 X5 内核会忽略整条 writing-mode 声明，但更隐蔽的问题是：即使 writing-mode 生效了，若没写 text-orientation: mixed，X5 会回退到极简渲染逻辑，把所有非汉字字符当“横向块”处理，造成文字堆叠、行距归零、右侧留白异常。
验证方式：在微信调试工具中检查 computed styles，看 text-orientation 是否为 inherit 或空值。
- 必须显式声明
text-orientation: mixed，不能靠继承 - 加
white-space: nowrap防窄容器内意外换行（X5 对vertical-rl的换行逻辑不稳定） - 避免在竖排元素内嵌套
display: inline-flex或display: grid，X5 对混合布局支持极差
IE 兼容兜底时，text-orientation 根本不存在，只能绕开
IE9 支持 -ms-writing-mode: tb-rl，但不认 text-orientation；IE8 连 -ms-writing-mode 都不支持，只能用 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1) 做图形旋转。这时 text-orientation 是无效字段，强行写进去也没用。
关键点：
- IE9 下只写
-ms-writing-mode: tb-rl，删掉所有text-orientation相关声明，否则整条 CSS 规则可能被跳过 - IE8 下用
filter+zoom: 1触发 hasLayout，再手动调margin-left和padding-top模拟对齐（因为margin-block-start等逻辑属性完全不识别） - 别试图在 IE8 中实现“标点直立”，它连基础 Unicode 方向都不解析，能保证文字不重叠就算成功
真正容易被忽略的不是怎么写对，而是不同浏览器对 text-orientation 的“支持程度”差异极大：Chrome/Firefox 把它当核心排版属性，Safari 当可选装饰，X5 当不存在，IE 当未定义。同一段 CSS 在五种环境里可能触发四种渲染路径。
