writing-mode: vertical-rl 是中文竖排唯一合理选择，因其符合“从上到下、从右到左”的传统阅读流，确保语义正确、布局稳定与可访问性达标。
中文竖排必须用 writing-mode: vertical-rl，不是 vertical-lr，也不是直接加 transform: rotate(90deg) —— 后两者会导致阅读顺序错乱、布局塌陷或可访问性失效。
为什么 writing-mode: vertical-rl 是中文竖排唯一合理选择
vertical-rl 表示“从上到下、从右到左”，这对应中文传统竖排的视觉流：第一列在最右边，文字自上而下书写，新列向左推进。设成 vertical-lr 会让第一列出现在最左边，整段文字“镜像翻转”，用户得从左往右逐列读，完全违背习惯。
- 浏览器按逻辑流渲染，
vertical-rl才让block-start对应顶部、inline-end对应右侧，符合中文排版语义 -
vertical-lr仅用于蒙古文等极少数语言，中文项目中使用属于方向误配 - 别被“lr”字面误导——它不表示“left-to-right 阅读”，而是指“新列生成方向”
text-orientation 必须显式设置，否则中英文混排会错位
默认 text-orientation: mixed 会让汉字直立、英文字母和数字顺时针旋转 90°，造成基线不齐、高度参差。这不是 bug，是规范行为，但实际效果难看。
- 要接近印刷效果：用
text-orientation: mixed+ 局部包裹<span class="en-inline">并设writing-mode: horizontal-tb - 要保证英文可读性（如按钮、标签）：统一用
text-orientation: upright，所有字符强制直立 - 绝对不要用
text-orientation: sideways，它会让汉字也躺倒，彻底失去竖排意义
别在 display: flex 或 display: grid 的父容器上直接设 writing-mode
一旦给 flex 容器加 writing-mode: vertical-rl，flex-direction: row 就不再表示“水平排列”，而是变成“垂直主轴”，justify-content 和 align-items 的含义全反了，子元素极易堆叠溢出或消失。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：只对纯文本块（如
<p>、<div>）应用writing-mode，让它内部文字流转向 - 若需竖排导航菜单，用
flex-direction: column+text-orientation: upright更可控 - grid 布局中，
writing-mode不影响grid-template-columns定义，但会反转justify-items的左右语义，容易误判
容器尺寸、标点与兼容性三个易漏细节
设了 writing-mode 后，CSS 中的“宽高概念对调”：原来设的 width 实际控制的是列高（行长），height 控制的是行数（列宽）。不调整就会文字截断或留大片空白。
- 中文标点必须用全角（如《》、。、，、！），半角标点（如 "、"、",") 在
mixed模式下会旋转 90°，视觉断裂 - IE 需加
-ms-writing-mode: vertical-rl，旧版 Safari 对vertical-rl支持不稳定，建议降级为transform: rotate(90deg)+white-space: nowrap保底 -
line-height在竖排中实际控制的是“字距”，不是行距，值建议设为1.5~2避免拥挤
