vertical-rl使文字从上到下、从右到左竖排，汉字直立、英文字母顺时针旋转90°；sideways-lr则让所有字符保持正立、从左到右垂直堆叠，仅高版本浏览器支持，适合混排标题。
vertical-rl 和 sideways-lr 的区别在哪
用 writing-mode 实现竖排，最常踩的坑是选错值。浏览器默认的 vertical-rl 是“从上到下、从右到左”，汉字会正常直排，但英文字母和数字会顺时针旋转90°；而 sideways-lr（仅 Chrome 117+、Firefox 119+ 支持）会让所有字符都保持正立、从左到右堆叠——也就是真正的“横字不转”，适合混排标题或表格表头。
实际使用中：
- 中文正文首选 vertical-rl，兼容性好（IE11 都支持）
- 需要英文/数字不旋转？必须检查浏览器版本，再决定是否用 sideways-lr
- vertical-lr（从上到下、从左到右）在中文场景极少用，会导致标点位置错乱，慎用
text-orientation 怎么配合 writing-mode 控制单字朝向
writing-mode 只管整体流向，单个字符是否旋转由 text-orientation 决定。默认值 mixed 就是“汉字直立、拉丁字母旋转”，这也是我们想要的；但如果设成 upright，连英文字母都会强行直立，导致可读性下降；设成 sideways 则全部横躺，基本不用。
典型组合：
- writing-mode: vertical-rl; text-orientation: mixed; → 推荐正文配置
- writing-mode: vertical-rl; text-orientation: upright; → 仅在需要统一字形朝向（如UI图标文字）时考虑
- 不要单独改 text-orientation 而忽略 writing-mode，它不会生效
line-height 和 padding 在竖排下为什么变“高”了
竖排时，line-height 的计算基准从水平方向的“行高”变成了垂直方向的“列宽”。比如 line-height: 2 在横排是两倍字号高度，在竖排就变成两倍字号宽度——视觉上文字间距突然拉得很开。
解决办法：
- 优先用固定值：如 line-height: 1.4em 比 line-height: 2 更可控
- padding 的上下左右在竖排后对应的是“右/左/上/下”，容易误判，建议用逻辑属性：padding-block（对应书写流的前后）和 padding-inline（对应左右）
- margin 同理，margin-block-start 在 vertical-rl 下实际作用于右侧
flex 布局嵌套竖排文字时常见错位
当把 writing-mode: vertical-rl 的文字放在 display: flex 容器里，flex 主轴方向会跟着文字流走——原本的 flex-direction: row 在竖排下实际变成“从右往左”，容易让图标、按钮顺序颠倒。
稳妥做法：
- 不要在竖排文本容器上直接套 flex，改用 display: grid 或普通块级布局
- 如果必须用 flex，显式指定 flex-direction: column 或 flex-direction: row-reverse 来对齐预期方向
- 注意 align-items 和 justify-content 的含义也会翻转：原来“居中”可能变成“靠右”
竖排不是简单加个 CSS 属性就完事，writing-mode 会牵动盒模型、排版逻辑、甚至 JS 获取的 offsetHeight 含义。上线前务必在真实设备上测滚动、截断、换行和输入框光标位置——这些地方最容易露馅。
