writing-mode · 竖排

书写模式：把文字竖起来

浏览器的默认书写模式是 horizontal-tb——字符横排、行从上往下叠。writing-mode: vertical-rl 把这套方向旋转 90°：字符沿纵轴排列，列从右往左推进，正是中文古籍、日文竖组版的排版方式。这套切换不只影响视觉方向，还把 CSS 的逻辑方向一并旋转——inline 方向从横变纵，block 方向从纵变横。

下面的文本块混入了英文和数字 2024，切换 writing-mode / text-orientation，观察 CJK、拉丁字母与数字各自的朝向变化；打开「縦中横」后，2024 会被挤进一个字位横排——这是竖排年份的常用排版手法。右侧实测读数来自真实 getBoundingClientRect()，证明列从右往左的方向性。

1 · 三个层次：书写模式、字符朝向、縦中横

writing-mode 决定行/列的排布方向:horizontal-tb 横排从上到下；vertical-rl 竖排、列从右往左（CJK 传统方向）;vertical-lr 竖排、列从左往右（蒙古文、某些现代竖排场景）。
text-orientation 在竖排下控制单字符的朝向:mixed 是默认值——CJK 字符直立，拉丁字母与数字顺时针旋转 90° 侧躺;upright——连拉丁字母也竖直堆叠，逐个字母朝上；sideways——把整行文字整体侧倒，CJK 也跟着躺，接近把横排旋转 90° 的效果。
text-combine-upright: all（縦中横 tate-chu-yoko）——竖排中把少数几个横排字符（通常是 2~4 位数字或缩写）压缩进一个字位横向排列，保持整列的视觉节奏。例如"2024年"竖排时常用此手法：年份紧凑地挤进与汉字等宽的格子里。

逻辑方向 inline / block 随 writing-mode 对调。 横排时 inline 方向是水平轴（一行字的流向）,block 方向是垂直轴（行与行叠加的方向）。切到 vertical-rl 后两者互换：inline 变成纵轴（inline-size ≈ 高度）,block 变成横轴（block-size ≈ 宽度）。这也是为什么给容器固定 height 能触发竖排折列——此时 height 就是 inline-size，文字填满一列后自动另起下一列。

vertical-rl 下列从右往左流动——这与 direction: rtl 不同。RTL 影响的是行内从右到左，而 vertical-rl 影响的是列与列之间从右往左推进。上方实测读数标注了第一列与第二列的水平 x 坐标：在 vertical-rl 下，第二列的 x 始终小于第一列——即第二列在第一列的左侧，证实块流动方向为自右向左。

CJK 竖排的历史背景。 汉字、日文、韩文的传统书写方向都是竖排、从右往左翻页——古籍、碑文、印章一脉相承。现代日文出版物仍大量使用竖排（縦組み），小说、报纸、漫画对话框是常见场景。随着 CSS Writing Modes Level 3 规范的完善，浏览器对竖排的支持已相当完整。