writing-mode: vertical-rl 是竖排唯一合理起点，但必须搭配 text-orientation（推荐 upright）、显式设置 height/max-height、避免在 flex 容器上直接使用，并改用逻辑属性如 text-align: start 和 margin-block: auto。
直接说结论：用 writing-mode: vertical-rl 是唯一合理起点，但只写这一行必出错——文字歪、容器塌、中英文混排难看、对齐反直觉，全是默认行为“太诚实”导致的。
为什么 writing-mode: vertical-rl 必须搭配 text-orientation
单独设 writing-mode: vertical-rl 后，汉字能竖着，但英文字母、数字、半角标点会顺时针旋转 90° 躺倒，这不是 bug，是规范默认行为（text-orientation: mixed）。出版级效果要求汉字直立、西文可读，就得显式控制：
-
text-orientation: mixed：汉字直立，西文/数字躺倒（适合古籍类界面，但需接受视觉割裂） -
text-orientation: upright：所有字符强制直立（推荐用于现代电子书，尤其含术语、人名、URL 的场景） - 绝对别用
text-orientation: sideways——它会让汉字也躺倒，彻底失去中文竖排意义
容器高度塌成一条线？那是没设 height 或 max-height
writing-mode: vertical-rl 会把块级容器的「内联方向」变成垂直，此时 height: auto 失效，文字被压缩到极小高度，视觉上像挤在一起的一横条。必须手动干预：
- 给容器设明确
height（如height: 600px），此时该值实际控制的是“列宽”，不是传统高度 - 若内容长度不确定，用
max-height: 80vh+overflow-y: auto实现滚动 - 避免用
min-height或fit-content，它们在竖排下行为不可靠 - 注意：设了
writing-mode后，原先的width反而控制“行长”，别漏调
用 flex 布局做翻页按钮或目录栏？别在父容器上加 writing-mode
把 writing-mode: vertical-rl 直接加在 display: flex 的父元素上，会和 flex-direction 冲突——主轴定义被重载，justify-content 和 align-items 含义全反，按钮堆叠溢出或消失是常态。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：只对纯文本块（如
<p>、<div class="page-content">）应用writing-mode - 若要做竖排导航栏（如章节目录），优先用
flex-direction: column+text-orientation: upright，更可控 - 真要用
transform: rotate(90deg)模拟竖排，注意屏幕阅读器兼容性受损，且缩放时文字边缘易糊
text-align: right 突然变成顶部对齐？这是逻辑方向切换的必然结果
启用 writing-mode: vertical-rl 后，“物理方向”语义失效：text-align: right 实际变成「块起始端对齐」即顶部对齐，text-align: left 反而是底部对齐。这容易引发布局错位。
- 改用逻辑值：
text-align: start（对应顶部）、text-align: end（对应底部） - 垂直居中用
margin-block: auto，而不是margin-top/margin-bottom - 行高控制用
line-height，但注意其单位在竖排下影响的是“字距垂直间距”，非传统行高
真正麻烦的不是写几行 CSS，而是意识到 writing-mode 不是样式开关，而是重定义整个盒模型的方向语义——高度变宽度、top 变 block-start、right 变 start。漏掉任一配套项，页面就卡在“看起来差不多但总不对劲”的状态里。
