该用 writing-mode 而不是 direction，因 direction 是 IE5.5–8 已废弃私有属性，现代浏览器不支持；writing-mode 是标准属性，用于垂直排版（如竖排正文、表头旋转）、RTL 布局基础流向及配合 text-orientation 实现中日韩文字正立显示。
什么时候该用 writing-mode 而不是 _direction
_direction 是 IE5.5–8 的私有 hack 属性，早已被废弃，现代浏览器完全不支持。它曾试图控制行内元素的文本方向（比如让文字从右往左“堆叠”），但行为不可靠、无标准依据，且与 direction 和 unicode-bidi 冲突。现在只要遇到垂直排版或 RTL 布局需求，必须用标准的 writing-mode。
真正需要 writing-mode 的典型场景包括：
- 东亚出版物中的竖排正文（如古籍、日文漫画对话框）
- 表格表头旋转 90° 以节省水平空间
- 配合
text-orientation: mixed实现中日韩文字在竖排中保持正立 - 构建 RTL 布局的基础流向（如阿拉伯语网站需
writing-mode: horizontal-tb; direction: rtl，注意这里writing-mode本身不负责 RTL，direction才管这个）
writing-mode 的三个核心值怎么选
writing-mode 控制的是**块级内容的布局流方向**，即块如何换行、内联轴如何定义。它的三个常用值对应不同物理流向：
-
writing-mode: horizontal-tb：默认值，内容从上到下排列块，每块内文字从左到右（LTR）或右到左（RTL）——这是绝大多数网页的流向 -
writing-mode: vertical-rl：内容从右到左排列块（即新块出现在左边），每块内文字从上到下；适用于中文、日文竖排 -
writing-mode: vertical-lr：内容从左到右排列块（新块出现在右边），每块内文字从上到下；多用于蒙古文等少数语言
注意：vertical-rl 下，text-align: center 是沿“行内轴”居中，也就是垂直方向居中；而 margin: auto 在块级元素上可能失效，需改用 align-self 或 flex 布局。
立即学习“前端免费学习笔记（深入）”；
为什么 writing-mode 会改变 width/height 的含义
当设置 writing-mode: vertical-rl 后，CSS 的逻辑属性映射发生翻转：width 对应原本的“高度”，height 对应原本的“宽度”。这是因为块流方向变了，内联轴和块轴互换了。
这意味着：
- 给一个竖排段落设
width: 200px，实际限制的是它的“高度”（即文字能向下延伸多少） -
height: 100px反而控制它在水平方向占多宽（即整段文字从右往左铺开的跨度） -
max-width在竖排中常被误用，应优先考虑max-block-size或max-inline-size等逻辑属性，避免方向依赖
div.vertical {
writing-mode: vertical-rl;
text-orientation: mixed;
/* 这里 width 控制的是段落总高度 */
width: 300px;
/* height 控制的是段落在水平方向的宽度 */
height: 80px;
}兼容性与常见失效原因
writing-mode 在 Chrome 48+、Firefox 41+、Safari 12.1+、Edge 79+ 中原生支持，IE 完全不支持（IE11 仅支持旧语法 -webkit-writing-mode 等前缀，且行为异常）。移动端 iOS Safari 12.1+ 才稳定支持 vertical-rl。
容易被忽略的失效点：
- 父容器未设定明确尺寸时，竖排元素可能“塌陷”——尤其在 Flex/Grid 容器中，需显式设置
block-size或min-block-size -
white-space: nowrap在竖排下会让所有文字挤在同一“行”（即同一列），而非换列，效果反直觉 - 使用
transform: rotate()模拟竖排是常见替代方案，但它只改变视觉，不改变文档流和可访问性，搜索、复制、屏幕阅读器都会出错
真要支持老 IE，只能降级为横向布局 + 字符级旋转（glyph-orientation-vertical 已废弃，不推荐），或者服务端输出两套 DOM 结构。
