vertical-rl 是古诗词垂直排版唯一正确方案，因其原生支持“从上到下、从右到左”传统阅读顺序，配合 text-orientation: mixed 保证中英文混排可读性，并需显式设置 direction: rtl 以确保列序与布局逻辑正确。
writing-mode: vertical-rl 是实现古诗词垂直排版最直接、最语义正确的方式，无需 transform 旋转或 JS 拼接，浏览器原生支持文本流方向切换。
为什么必须用 vertical-rl 而不是 vertical-lr
古诗词竖排遵循“从上到下、从右到左”的阅读顺序，这正是 vertical-rl 的行为：第一列在最右侧，后续列依次向左排列。若误用 vertical-lr，第一列会出现在最左侧，视觉上像镜像翻转，完全违背传统排版逻辑。
-
vertical-rl：适合中文、日文古籍，对应实际印刷与竹简逻辑 -
vertical-lr：仅用于蒙古文等极少数语言，日常项目中基本不用 - 绝对不要用
horizontal-tb+transform: rotate(90deg)模拟——会破坏语义、影响可访问性、导致文字无法被屏幕阅读器正确识别
text-orientation: mixed 是让英文和数字可读的关键
只设 writing-mode: vertical-rl，汉字会直立，但英文字母、阿拉伯数字、标点（如逗号、句号）默认顺时针旋转 90°，变成横向躺倒状态，阅读困难甚至无法识别。
-
text-orientation: mixed：汉字/假名直立，拉丁字母和数字自动旋转 90° 后仍保持可读方向（即“字头朝右”），这是古籍混排中最自然的方案 -
text-orientation: upright：所有字符强制直立，适合纯书法题跋或印章式标题，但英文会变成“横着站”，需确认设计是否接受 - 省略该属性 = 放任英文段落不可读，尤其在作者名、朝代、注释中含英文时极易踩坑
对齐、方向与容器尺寸必须同步调整
竖排后，text-align 和 direction 的含义已改变：text-align: left 实际是对齐容器顶部（首行顶对齐），text-align: right 反而贴底；而 direction: rtl 才真正控制列序（从右向左）。
- 务必显式声明
direction: rtl，否则嵌套的span、图标或按钮可能错位 -
height在竖排中实际是“每列最大高度”，需根据行数预估（例如 20 行 × 1.5em line-height ≈ 30em），不能依赖min-height自适应 -
white-space: nowrap常需配合使用，防止诗句内因空格或短词意外换行，破坏单列完整性 - 溢出方向变了：
overflow-y控制垂直滚动（即上下滑动），overflow-x控制水平滚动（即左右滑动列），别反了
兼容性与真实项目中的 fallback 策略
现代浏览器（Chrome 48+、Firefox 41+、Safari 12.1+、Edge 79+）已稳定支持 writing-mode 和 text-orientation，但 iOS Safari 旧版本（如 iOS 12）偶有渲染抖动，IE 则完全不支持。
立即学习“前端免费学习笔记（深入）”；
- 不要用
@supports降级为transform方案——它无法解决语义缺失、选中文本错乱、复制粘贴顺序颠倒等问题 - 若必须兼容 IE，应放弃纯 CSS 方案，改用服务端生成 SVG 或 Canvas 渲染，或直接提供横排备用视图
- 避免在
table单元格或flex直接子元素上应用writing-mode：某些浏览器会破坏布局流，优先包裹一层<div class="poem-column"> - 响应式场景下，小屏建议用
@media (max-width: 480px)切回writing-mode: horizontal-tb，否则竖排会撑宽页面导致横向滚动
direction: rtl 的必要性——它不光影响文字，更决定整个布局子树的方向继承关系。 
