vertical-rl是中文竖排唯一合理选择，需配text-orientation:mixed；vertical-lr仅适用于蒙古文，误用会导致标点错乱、阅读节奏破坏；writing-mode只控文本流方向，字符朝向由text-orientation决定。
vertical-rl 是中文竖排唯一合理选择，不是“可选之一”
中文、日文、繁体字场景下，writing-mode: vertical-rl 才让文本从上到下、行从右到左流动，符合传统印刷逻辑。浏览器渲染时，vertical-rl 的 block-start 对应顶部，inline-start 对应右侧，所以第一行自然出现在容器最右边。
vertical-lr 只适用于蒙古文等极少数语言，强行用于中文会破坏阅读节奏：文字堆在左上角、换行后向左延伸、标点位置错乱 → 这不是 bug，是规范行为。
别被 “lr” 缩写误导：它指 inline direction（行方向），不是“看起来从左开始”。检查错误现象，基本能快速定位是否误用了 vertical-lr。
text-orientation 必须显式设置，否则中英文混排基线错乱
writing-mode 只管块级流向，字符怎么“站”由 text-orientation 决定。默认 mixed 会让英文字母顺时针转 90°，汉字保持直立，结果就是字母“躺平”、汉字“立正”，基线对不齐。
立即学习“前端免费学习笔记（深入）”；
-
text-orientation: mixed：推荐，多数中文竖排网站用这个，接近印刷效果 -
text-orientation: upright：所有字符都直立，适合按钮、标签等需保证英文可读性的场景 - 绝对不要用
text-orientation: sideways—— 它会让汉字也躺倒，彻底违背中文竖排意图
注意：text-orientation 只在 writing-mode 非 horizontal-tb 时生效。
Grid 容器里设 writing-mode 会翻转对齐语义，别直接套在父容器上
给 display: grid 的父容器加 writing-mode: vertical-rl，不会让子项自动竖排，反而会反转 justify-items 和 align-items 的左右/上下含义：
-
justify-items: center原本控制列内水平居中，现在变成“控制行内居中”，视觉上偏右 -
grid-template-columns定义不受影响，但内容在轨道中的对齐逻辑已变 - 子项若本身是文本块，仍需单独加
writing-mode和text-orientation
正确做法：只对纯文本子元素（如 <div class="poem-line">）应用 <code>writing-mode；Grid 仅负责布局结构，不接管文本流方向。
尺寸属性含义对调，width/height 行为完全反直觉
设了 writing-mode: vertical-rl 后，CSS 中的“宽高概念对调”：
- 原来设的
width实际控制的是列高（即每行多高） -
height控制的是行数（即总共几列） -
height: auto失效，文字极易塌成一条细线，必须显式设height或max-height
容易被忽略的一点：Grid 轨道尺寸（如 grid-template-rows: 1fr 2fr）仍按物理方向计算，但其内部文本块的 width/height 已逻辑翻转 —— 这个错位是调试中最常卡住的地方。
