CSS方向属性与排版应用详解

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《CSS方向属性和排版模式应用解析》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

该用 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 结构。

今天关于《CSS方向属性与排版应用详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！