HTML怎么用writing-mode_html writing-mode书写模式设置【快速上手】

先明确一个核心概念：writing-mode 可不是什么简单的“文字竖排”视觉把戏。它动的是文本流的根本方向，属于布局机制的切换。很多开发者直接写个 writing-mode: vertical-rl 就以为大功告成，结果往往发现文字挤成一行、标点符号堆在右侧、行高完全失控。问题出在哪？其实不在于属性本身，而在于它一旦生效，整个盒模型和对齐逻辑都会跟着“翻转”，如果配套设置没跟上，混乱就在所难免。

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

两者确实都让文字垂直排列，但默认的书写顺序恰恰相反，这个区别至关重要：vertical-rl 是从右向左排竖列，这符合中文古籍的传统阅读习惯；而 vertical-lr 则是从左向右排，更接近蒙古文或者某些UI侧边标签的流向。所以，别只看属性名，关键要看内容流向是否匹配你的实际阅读场景。

• 在 vertical-rl 模式下，text-align: start 对应的是顶部对齐，text-align: end 则对应底部对齐，而传统的 left/right 值在这里会失效。
• 使用 vertical-lr 时，全角标点（比如句号“。”、逗号“，”）可能不会自动旋转，拉丁字符默认保持水平，这就容易产生一种割裂感——想象一下“Windows 11”这个词组横着卡在一列竖排文字中间。
• 如果内容里包含英文单词（例如“Ja vaScript”），强烈建议加上 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，那么那些带前缀的写法就不是可选项，而是必须项。

这里有一份“前端免费学习笔记（深入）”可供参考；

• -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) 来做渐进增强，可以避免在降级时样式彻底崩坏。

说到底，真正的麻烦从来不是怎么写那行 CSS 代码。而是当你改变了文字方向后，整个盒模型、对齐逻辑、尺寸计算全都跟着变了。你或许调好了文字方向，却忘了此时的 height 早已不是原来那个 height。这类隐性的、环环相扣的依赖关系，最容易在线上环境突然暴露，让人措手不及。