中文竖排必须用writing-mode: vertical-rl，因其严格对应“从上到下、从右到左”的传统阅读流，确保语义正确、布局稳定与可访问性达标；vertical-lr会导致镜像翻转，transform: rotate(90deg)破坏DOM流和屏幕阅读器解析。
中文竖排必须用 writing-mode: vertical-rl，其他值不是错就是反直觉——尤其别碰 vertical-lr 和 transform: rotate(90deg)。
为什么只能选 vertical-rl？
它对应“从上到下、从右到左”的真实阅读流：第一列在最右边，新列向左推进。浏览器据此确定 block-start 是顶部、inline-end 是右侧，语义和渲染才一致。
-
vertical-lr会让第一列出现在最左边，整段文字镜像翻转，用户得从左往右逐列读——这不是竖排，是误配 -
transform: rotate(90deg)只是视觉旋转，DOM 流、焦点顺序、屏幕阅读器解析全乱，可访问性直接失效 -
sideways-rl会让每个汉字也躺倒，Firefox 不支持，小字号下根本没法认字
writing-mode 会彻底翻转宽高逻辑
设了 vertical-rl 后，CSS 中的 width 实际控制的是“列高”（即每列能写多高），height 控制的是“列宽”（即总共能排几列）。不调就容易文字截断或大片留白。
- 想限制单列显示高度？改
width，比如width: 2em - 想控制总列数？改
height，比如height: 20em - 容器本身是
flex或grid？别直接加writing-mode——justify-content和grid-template-columns的左右语义会反转，极易出错
text-orientation 必须显式设置
默认 mixed 会让英文字母和数字顺时针转 90°，导致基线不齐、高低错落；但设成 upright 又会让所有字符直立，英文可读性变好，只是标点可能略显生硬。
立即学习“前端免费学习笔记（深入）”；
- 纯中文内容：用
text-orientation: upright最稳 - 中英文混排且需保留英文可读性（如按钮、标签）：统一
upright - 真要模拟古籍效果？
mixed+ 局部包裹英文并设writing-mode: horizontal-tb - 绝对不要设
sideways——汉字躺倒就失去竖排意义了
兼容性与字体细节容易被跳过
现代浏览器（Chrome 48+、Firefox 41+、Edge 12+）原生支持 writing-mode，但旧版 IE 需前缀：-ms-writing-mode: tb-rl；Safari 旧版要 -webkit-writing-mode: vertical-rl。
- 字体本身是否支持竖排？思源黑体、Noto Sans CJK 等开源字体内置
vert特性，可用font-feature-settings: "vert"激活 - 标点符号自动旋转是浏览器行为，不是 bug——但若发现顿号、逗号方向异常，优先检查
text-orientation是否遗漏 - 别在
display: flex容器上直接设writing-mode：主轴方向、对齐方式全变，子元素大概率堆叠溢出
真正难的不是写那行 writing-mode: vertical-rl，而是意识到它不只是“让字转个向”，而是一整套坐标系重定义——尺寸、布局、语义、可访问性，全跟着动。漏掉任意一环，页面看着像，用起来就卡壳。
