vertical-rl 是中文竖排唯一合理的选择，因其符合传统印刷逻辑，使文本从上到下、行从右到左流动，且 block-start 对应顶部、inline-start 对应右侧，确保第一行自然出现在容器最右边。
writing-mode: vertical-rl 是中文竖排唯一合理的选择，不是“可选之一”，而是语义与视觉双正确的起点。用 vertical-lr 会导致第一行出现在最左边，阅读动线反直觉——这不是浏览器 bug，是规范行为。
vertical-rl 还是 vertical-lr？看语言习惯，不是看“顺不顺眼”
中文、日文、繁体字场景下，vertical-rl 才让文本从上到下、行从右到左流动，符合传统印刷逻辑。浏览器渲染时，vertical-rl 的 block-start 对应顶部，inline-start 对应右侧，所以第一行自然出现在容器最右边。
-
vertical-lr只适用于蒙古文等极少数语言，强行用于中文会破坏阅读节奏 - 别被“lr”缩写误导：它指 inline direction（行方向），不是“看起来从左开始”
- 检查错误现象：文字堆在左上角、换行后向左延伸、标点位置错乱 → 很可能误用了
vertical-lr
中英文混排时字符歪斜、高低不齐？靠 text-orientation 控制单字朝向
writing-mode 只管块级流向，字符怎么“站”由 text-orientation 决定。默认 mixed 会让英文字母顺时针转 90°，汉字保持直立，结果就是字母“躺平”、汉字“立正”，基线对不齐。
- 要接近印刷效果：加
text-orientation: mixed（推荐，多数中文竖排网站用这个） - 要保证英文可读性（如按钮、标签）：用
text-orientation: upright，所有字符都直立 - 绝对不要用
text-orientation: sideways—— 它会让汉字也躺倒，彻底违背中文竖排意图 - 注意：该属性只在
writing-mode非horizontal-tb时生效
flex/grid 布局突然失效？主轴方向已被 writing-mode 翻转
writing-mode: vertical-rl 会让原本的水平主轴变成垂直主轴，justify-content 和 align-items 的含义随之翻转。你写的 justify-content: center 实际作用在 block 轴上，不再是“水平居中”。
立即学习“前端免费学习笔记（深入）”；
- 优先改用逻辑属性：
margin-block-start替代margin-top，text-align: end替代text-align: right - 如果必须用 flex：显式重设
flex-direction，例如flex-direction: column在vertical-rl下实际表现可能和预期相反，建议测试后改用flex-direction: column-reverse或直接放弃 flex 改用display: grid+grid-auto-flow: row - 别依赖父容器继承
writing-mode后子元素自动适配布局——物理属性（left、top、row）不会自适应，只有逻辑属性（block-start、inline-end）会跟随
真正容易被忽略的点是：direction 属性对 input 和 textarea 内部光标行为有决定性影响，而 writing-mode 不影响它们。若要在竖排容器里放可编辑文本，必须单独处理表单控件的 dir 属性或 CSS direction，否则光标移动、选区方向都会异常。
