中文竖排应选 vertical-rl，因符合从上到下、行从右到左的传统阅读习惯；vertical-lr 仅适用于蒙古文等特殊场景。
writing-mode 值选 vertical-lr 还是 vertical-rl？
垂直排版默认从左到右（vertical-lr）还是从右到左（vertical-rl），取决于文字语言习惯和布局需求。中文、日文传统竖排用 vertical-rl，即文字从上到下、行从右到左排列；而蒙古文等少数语言才用 vertical-lr。
常见错误是直接写 writing-mode: vertical-lr，结果发现文字“歪了”——其实是方向对但阅读顺序反了：浏览器按逻辑流渲染，vertical-rl 才让第一行在最右边，符合中文竖排视觉预期。
-
vertical-rl：适用于简体中文、繁体中文、日文竖排 -
vertical-lr：仅用于蒙古文、部分古籍复刻等特殊场景 - 别混用
text-orientation和writing-mode：前者只控制单个字朝向（如是否旋转90°），后者定义整个块的文本流方向
vertical-rl 下汉字、数字、英文混排不齐怎么办？
启用 writing-mode: vertical-rl 后，英文字母和阿拉伯数字常“躺平”，汉字却“立正”，导致基线错乱、高度参差。这不是 bug，而是 CSS 规范对不同脚本的默认 text-orientation 处理差异所致。
解决方法是显式设置 text-orientation：
立即学习“前端免费学习笔记（深入）”；
-
text-orientation: mixed：英文字母/数字顺时针转90°（推荐，最接近印刷效果） -
text-orientation: upright：所有字符直立显示（适合需要保持英文可读性的界面，如标签、按钮） - 避免用
text-orientation: sideways：它会让汉字也躺倒，完全违背中文竖排意图
示例：
div.vertical-text {<br> writing-mode: vertical-rl;<br> text-orientation: mixed;<br>}
使用 writing-mode 后 flex 或 grid 布局失效？
writing-mode 会翻转主轴方向：原本水平的 flex-direction: row 在 vertical-rl 下变成“从上到下”，justify-content 和 align-items 的含义也随之变化。很多开发者没意识到这点，导致子元素堆叠错位或溢出。
关键判断依据是：CSS 逻辑属性（如 block-start、inline-end）始终跟随 writing-mode，而物理属性（top、left、flex-direction: row）不会自动适配。
- 优先用逻辑属性替代物理属性，例如用
margin-block-start代替margin-top - 若必须用 flex，记得重设
flex-direction：在vertical-rl容器内，flex-direction: column实际表现可能反直觉，建议改用flex-direction: column-reverse或直接切到display: grid - 检查父容器是否意外继承了
writing-mode：某些 UI 框架（如 Ant Design）全局设置了html { writing-mode: horizontal-tb; }，但局部覆盖时容易遗漏
IE11 兼容 vertical-rl？要不要加 -webkit- 前缀？
writing-mode 在 IE11 中只支持旧语法 -ms-writing-mode: tb-rl（对应现在的 vertical-rl），且不支持 vertical-lr。现代 Chrome/Firefox/Safari 已完全支持标准值，无需前缀。
真正要小心的是 Safari 12.1 之前的版本：它把 vertical-rl 解析成 tb-rl，但对 text-orientation 支持极差，混排时英文几乎必然错位。
- 兼容 IE11 必须写双声明：
writing-mode: vertical-rl; -ms-writing-mode: tb-rl; - 不要加
-webkit-writing-mode：WebKit 早已废弃该前缀，加了反而可能触发降级行为 - 如果项目需支持 Safari ≤12，建议避开
text-orientation: mixed，改用upright并手动调整英文字体大小或行高来对齐
垂直书写不是加个属性就完事的事——writing-mode 动的是整个盒模型的坐标系，字体渲染、布局计算、甚至事件坐标都会偏移。最容易被忽略的是：它会影响 getBoundingClientRect() 返回的 top/left 值，调试时别光看样式面板。
