vertical-rl是古诗词竖排唯一语义正确且浏览器原生支持的方案，必须配合text-orientation: mixed、direction: rtl、预设height及white-space: nowrap，禁用transform旋转。
writing-mode: vertical-rl 是古诗词竖排唯一语义正确、浏览器原生支持的方案，不是“能用”，而是“该用”
vertical-rl 才符合古籍阅读逻辑，vertical-lr 是镜像错误
古诗词竖排必须满足“从上到下、从右到左”的物理阅读顺序：第一列在最右侧，翻页向左。这正是 vertical-rl 的行为；而 vertical-lr 会让第一列出现在左侧，视觉上像照镜子，直接违背竹简、雕版、线装书的实际结构。蒙古文等极少数语言才用 vertical-lr，中文项目中基本不用。
text-orientation: mixed 是混排可读性的生死线
只设 writing-mode: vertical-rl，汉字会直立，但英文字母、阿拉伯数字、半角标点（如 ,、.、(）默认顺时针旋转 90°，变成横躺状态，无法识别。必须加 text-orientation: mixed：汉字/日文假名保持 upright，拉丁字母和数字自动旋转后字头朝右，这才是作者名、朝代、注释里含英文时真正可用的方案。省略它，等于默认放弃混排。
direction: rtl 和 height 不是可选项，而是布局前提
竖排后，direction 控制列序，text-align 控制行内对齐方式，含义已翻转：
立即学习“前端免费学习笔记（深入）”；
-
direction: rtl必须显式声明，否则嵌套的span、图标或按钮可能列序错乱 -
height在竖排中实际是“每列最大高度”，需按行数预估（例如 20 行 × 1.5em line-height ≈ 30em），不能依赖min-height自适应 -
white-space: nowrap常需配合，防止诗句内因空格或短词意外换行，破坏单列完整性
别用 transform: rotate 模拟——它看起来像，但根本不是
transform: rotate(90deg) 只是视觉旋转盒子，不改变文本流：
- 文字无法被屏幕阅读器正确识别，无障碍失效
- 选中文本、复制粘贴会出错（顺序颠倒、换行混乱）
- 影响布局计算，与 flex/grid 等现代布局难以协同
- 性能比原生
writing-mode低约 40%，尤其在长列表或动态更新场景
真正难的不是写对那行 CSS，而是理解竖排后整个盒模型、方向系统、字体渲染都已翻转——height 变成行长，text-align: left 实际是顶对齐，padding-top 变成“列首外边距”。这些细节一旦忽略，排出来就是形似神不似。
