writing-mode: vertical-rl 是中文竖排标准选择：文字从上到下，行从右到左；需配合 text-orientation: mixed 解决标点与数字方向问题，旧版 Safari 需用 @supports 降级。
writing-mode 属性值选哪个才真竖排
不是所有 writing-mode 值都能让中文竖排“从上到下、从右到左”自然阅读。常见误用是直接写 writing-mode: vertical-lr，结果文字倒着转、标点朝左、数字横着——根本没法读。
-
writing-mode: vertical-rl是中文竖排标准选择：文字从上到下，行从右到左（符合传统排版） -
vertical-lr适合蒙古文或日文部分场景，中文用它会导致句号、逗号贴左，且阿拉伯数字保持横排，视觉混乱 -
sideways-rl和sideways-lr是整行旋转90°，字形不变向，仅用于特殊装饰，别当正经竖排用
竖排后标点和数字为啥还是歪的
单纯设 writing-mode 不够，浏览器默认按 Unicode 方向规则处理标点与数字，导致顿号、引号、括号方向错乱，阿拉伯数字横躺。
- 必须加
text-orientation: mixed：让汉字竖排，标点自动旋转适配（如句号变“。”→“〇”式小圆点），全角标点正常，半角标点也尽量 upright - 若要强制所有数字/英文字母也竖着写（每个字母独立旋转90°），改用
text-orientation: upright，但注意这会让英文可读性暴跌，慎用 - 别依赖
unicode-bidi: plaintext来“修复”，它可能破坏嵌套文本方向逻辑，尤其含双向文字（如中英混排+数字）时更易出错
flex 或 grid 容器里竖排文字塌陷或错位
在 display: flex 或 display: grid 的父容器中直接对子元素设 writing-mode: vertical-rl，常出现高度归零、换行异常、对齐失效。
- flex 容器默认主轴是水平的，竖排文字会试图撑宽而非撑高；解决：给父容器加
flex-direction: column，再让子元素自己竖排 - grid 中若用
align-items: center垂直居中，竖排文字实际是“横向居中”，视觉上偏右；应改用justify-items: center（控制行内对齐） - 竖排元素的
height不再有意义，改用width控制“行长度”，用min-height或line-height控制单字间距
IE11 和 Safari 旧版本兼容性怎么兜底
writing-mode 在 IE11 支持 -ms-writing-mode: tb-rl（等价于 vertical-rl），但 Safari ≤ 12.1 对 text-orientation 支持极弱，标点几乎不旋转。
立即学习“前端免费学习笔记（深入）”；
- 必须写双前缀：
writing-mode: vertical-rl后紧跟-ms-writing-mode: tb-rl -
text-orientation: mixed在 Safari ≤ 12.1 下被忽略，此时建议用@supports检测并降级为纯 CSS transform 旋转（transform: rotate(90deg)），但注意这会让整个元素参与流式布局计算，需手动调width/height - 不要用
direction: rtl代替writing-mode，它只影响 inline 顺序，不改变文字方向，纯属误导
竖排真正难的不是属性本身，而是标点旋转逻辑、中西文混排时的 baseline 对齐、以及旧浏览器里不得不把 layout 当 hack 来凑。写完记得拿真实内容（带括号、数字、破折号的段落）预览三遍，别信 demo 里的纯汉字。
