writing-mode: vertical-rl 会重定义盒模型坐标系，使 width 控制垂直方向（行长），height 控制水平方向（字列宽）；line-height 变为控制字间垂直距，text-align 语义反转，flex/grid 父容器禁用该属性。
writing-mode 不是“让文字转个身”，而是重定义整个盒模型的坐标系——width 和 height 的语义会互换，这是所有错乱的根源。
vertical-rl 下 width 和 height 的角色完全对调
设置 writing-mode: vertical-rl 后，块级容器的布局方向翻转：原本控制水平空间的 width，现在控制的是**垂直方向上的可用空间（即“行长”）**；而原本控制垂直空间的 height，反而变成控制**水平方向上的可用宽度（即“字列宽”）**。
- 若你写
width: 200px; height: 50px;，实际效果是：文字最多向下延伸 200px（相当于传统排版的“高度”），而每列最多占 50px 宽（相当于传统排版的“宽度”） - 省略
width会导致内容无限向下溢出（尤其在未设overflow时） - 省略
height则列宽塌缩为内容最小宽度（比如一个汉字约 14–18px），看起来像“挤成一竖条”
line-height 和 font-size 在竖排中不再“按行算”
line-height 的计算基准仍是字体的 font-size，但方向已变：它现在控制的是**相邻字之间的垂直间距**，而非传统“行高”。如果没同步调整 font-size，容易出现字距过密或断裂。
- 常见错误：保持
font-size: 16px; line-height: 1.5;→ 实际字间距仅 24px，竖排时视觉拥挤 - 建议显式写
line-height: 32px（固定值），比用无单位数值更可控 -
text-orientation: mixed能让英文横排，但它不改变line-height对汉字的作用范围
text-align 和 direction 的语义反转常被忽略
在 vertical-rl 下，text-align 的参照系不再是“水平行”，而是“垂直列”：text-align: right 实际对齐到列的**顶部**（block-start），text-align: left 对齐到底部（block-end）。
立即学习“前端免费学习笔记（深入）”；
-
text-align: center是以整列中线为基准居中，不是单字居中 -
direction: rtl或ltr在竖排中影响新列生成位置：默认vertical-rl+direction: ltr会让新段落在左侧追加（符合中文习惯） - 混用
direction和unicode-bidi可能导致标点悬挂异常，优先靠text-orientation控制字符朝向
flex/grid 容器里直接套 writing-mode 会破坏主轴逻辑
不要给 display: flex 或 display: grid 的父容器设 writing-mode。它会和 flex-direction、grid-template-rows 等属性产生坐标系冲突，子项定位彻底失序。
- 正确做法：只在文本容器内部使用
writing-mode，父容器保持默认流向 - 若需整体竖排布局（如侧边导航），改用
flex-direction: column+transform: rotate(90deg)，但注意transform不影响可访问性树和打印样式 - IE9 及以下必须用
-ms-writing-mode: tb-rl，且此时height完全失效，只能靠display: inline-block+ 显式width拉出尺寸
真正难的不是写对那行 writing-mode: vertical-rl，而是后续所有盒模型相关声明——margin、padding、max-width、甚至 scrollbar-gutter——都得按新坐标系重新理解一遍。稍有惯性思维，就掉坑里。
