writing-mode: vertical-rl 是中文竖排首选，因其符合从右向左逐列向下的传统阅读顺序；需同步设置 text-orientation: upright 并谨慎处理盒模型、flex/grid 嵌套及浏览器兼容性问题。
writing-mode: vertical-rl 是实现中文网页竖排最直接、最可靠的方式，但设了它不等于排版就对了——必须同步处理字符方向、盒模型翻转和布局嵌套问题。
为什么 writing-mode: vertical-rl 是首选而非 vertical-lr
中文传统阅读顺序是从右向左逐列向下，vertical-rl 正好匹配这一逻辑：首列在最右侧，新列向左生成。而 vertical-lr 会把第一列放在左侧，后续列往右排，不符合古籍或出版物习惯。日文部分场景可用 vertical-lr，但中文项目基本不用。
-
vertical-rl在 Chrome/Firefox/Safari（17+）/Edge 中行为一致，IE11 需降级为-ms-writing-mode: tb-rl - 若误用
vertical-lr，配合direction: ltr仍可能出错，不如统一用vertical-rl+direction: rtl - 移动端 WebView（如微信小程序基础库 2.9.0+）已原生支持
vertical-rl，无需 transform 模拟
text-orientation: upright 必须显式声明
不加这句，API、v2.1、括号、数字等会自动顺时针旋转 90°，变成侧躺状态，阅读体验断裂。Chrome 和 Firefox 对 mixed（默认值）的标点处理也不一致：顿号、分号有时直立有时旋转，导致对齐错位。
- 含英文术语、版本号、代码片段的场景，一律用
text-orientation: upright -
text-orientation: mixed只适合纯古籍文本，且需实测各浏览器表现 -
text-orientation: sideways整行侧躺，无实际排版价值，别用
height / width / line-height / padding 全部“反直觉”
竖排后，CSS 盒模型坐标系旋转 90°，原来控制横向的属性现在控制纵向：
-
height变成“列高”（即整块内容能撑多高），设死height: 200px容易截断；建议改用min-height或不设 -
width变成“行长”（即每列最多容纳多少字），通常由字体大小和line-height决定 -
line-height: 1.4控制的是**字与字之间的纵向间距**，小字号下line-height: 1会导致粘连 -
padding: 0 1em的1em作用在左右（即列外侧留白），0是上下（首字顶/末字底不留白）
flex/grid 嵌套 writing-mode 极易出 bug
当 writing-mode: vertical-rl 应用于 display: flex 容器或 grid 项目时，主轴/交叉轴语义会被浏览器混淆，尤其在 Safari 和旧版 Firefox 中：
- Flex 子项的
align-items可能失效，文字垂直居中失灵 - Grid 的
grid-template-columns和grid-template-rows含义与竖排方向冲突，列数定义可能被忽略 - 解决方案：竖排容器本身不用 flex/grid；如需布局控制，把
writing-mode放在最内层文本容器上，外层用常规流布局
真正麻烦的不是写那行 writing-mode，而是它触发的连锁反应——盒模型翻转、字符方向歧义、布局系统错位，每个环节都得单独验证，尤其是 Safari 17+ 和 Firefox 120+ 的细微差异，光靠“设了就完事”会在线上突然崩掉一整页古籍展示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
