HTML设置writing-mode书写模式教程

本文深入解析了CSS中writing-mode属性的本质与实战要点，强调它并非简单的文字旋转技巧，而是彻底改变文本流方向的布局机制，会连带翻转盒模型、对齐逻辑和尺寸计算规则；文章系统对比vertical-rl与vertical-lr在书写顺序、标点处理、text-align行为上的关键差异，详解line-height与height在垂直模式下的语义反转、text-orientation对英文字母可读性的决定性影响，并直击兼容性痛点——明确指出-webkit-和-ms前缀在旧版Safari及IE中的不可替代性，最后提醒开发者：真正易出错的不是语法本身，而是忽视writing-mode引发的全局布局连锁反应，堪称一份兼顾原理深度与上线安全的垂直排版避坑指南。

vertical-rl 和 vertical-lr 的实际行为差异

两者都让文字垂直排列，但默认书写顺序相反：vertical-rl 从右向左排竖列（符合中文古籍习惯），vertical-lr 从左向右排（类似蒙古文或某些 UI 标签）。别只看名字，关键看内容流向是否匹配阅读习惯。

• vertical-rl 下，text-align: start 对应顶部对齐，text-align: end 对应底部对齐，left/right 失效
• vertical-lr 下，全角标点（如“。”“，”）可能不自动旋转，拉丁字符默认保持水平，容易出现“Windows 11”横在竖列中间的断裂感
• 若含英文单词（如“JavaScript”），建议加 word-break: keep-all，否则浏览器可能在字母间断行

line-height 和 height 必须显式设置

writing-mode 切换后，主轴变成垂直方向，line-height 不再控制“行间距”，而控制“列间距”；同时，元素的 width 表现为垂直方向高度，height 表现为水平方向宽度。浏览器不会自动按新方向推算尺寸。

• 不设 line-height：浏览器可能用块级容器高度作为默认行高，导致文字挤成一团或大片空白
• 不设 height 或 min-height：父容器若无明确高度，内容可能被截断或撑不开
• 推荐写法：line-height: 1.6 + height: auto（内容自适应）或 height: fit-content（需注意兼容性）

text-orientation 决定英文字母和数字怎么摆

默认情况下，数字和拉丁字母在 vertical-rl 中会顺时针旋转 90°，但“2024”或“API”这样读起来就费劲。这时靠 text-orientation 控制：

• text-orientation: mixed：汉字竖排，英数保持水平（最常用，可读性好）
• text-orientation: upright：所有字符都严格竖向，包括“W”“5”，适合纯装饰场景，但牺牲可读性
• text-orientation: sideways：所有字符统一旋转，基本不用
• 注意：text-orientation 在 Safari 中支持不稳定，iOS 16+ 才较可靠

兼容性和前缀不是“锦上添花”，而是上线前提

虽然现代 Chrome/Firefox/Edge 都支持标准 writing-mode，但如果你的项目仍需支持旧版 Safari（≤15.6）或部分安卓 WebView，-webkit-writing-mode 和 -ms-writing-mode 就不是可选项。

• -ms-writing-mode: tb-rl 是 IE 旧语法，等价于 vertical-rl，但仅 IE 10–11 支持
• -webkit-writing-mode: vertical-rl 在 Safari ≤15.4 中是必需的
• 不要只写一个值，推荐组合写法：writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl;
• 用 @supports (writing-mode: vertical-rl) 做渐进增强，避免降级时样式崩坏

今天关于《HTML设置writing-mode书写模式教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！