css文本纵向排序：从书写模式到布局实践

纵向排序与书写模式的关系

在 CSS 中，文本的排列方向由 writing-mode 属性控制。默认情况下，文本沿水平方向从左到右排列；当把 writing-mode 设为 vertical-rl 或 vertical-lr 时，文本就会沿垂直方向排列，形成纵向排序的效果。

vertical-rl 表示块级内容从右向左排列，行内内容从上到下排列，这是东亚传统竖排的常见形式。vertical-lr 则相反，块级内容从左向右排列，行内内容仍然从上到下。理解这两个值的方向差异，是掌握纵向排序的第一步。

需要注意的是，改变书写模式不仅影响文字方向，还会影响整个盒模型的逻辑方向。例如 margin、padding 的物理方向不变，但 margin-block、margin-inline 这类逻辑属性会跟随书写模式变化。因此，在纵向排序布局中，推荐优先使用逻辑属性，以减少方向切换带来的维护成本。

字符朝向与文本组合控制

纵向排列时，并非所有字符都适合旋转。拉丁字母、数字和部分符号如果直接竖排，阅读体验会变差。CSS 提供了 text-orientation 属性来调整字符的朝向。

text-orientation: mixed 是默认值，它让全角字符保持直立，而半角字符（如拉丁字母）旋转一定角度。text-orientation: upright 则强制所有字符直立显示，适合需要严格竖排的标题或标签。text-orientation: sideways 会让所有字符侧躺，通常用于需要整体旋转的装饰性文本。

此外，text-combine-upright 属性可以把连续的数字或字母组合成一个直立单元，在竖排中保持可读性。例如年份、短数字等，使用该属性后可以避免逐个字符旋转造成的断裂感。这些属性配合 writing-mode 使用，才能让纵向排序既符合排版规范，又兼顾可读性。

在布局中应用纵向排序的要点

将纵向排序应用到实际布局时，需要关注几个方面。

首先是容器尺寸。纵向排列后，文本的“宽度”和“高度”在视觉上发生互换，原本控制宽度的属性可能不再符合预期。建议使用 inline-size 和 block-size 这类逻辑尺寸属性，让布局随书写模式自动适配。

其次是溢出与换行。纵向文本在容器高度不足时，会沿着块级方向换行，形成多列。此时 overflow 和 text-overflow 的行为与水平排版不同，需要根据实际场景调整。

再次是对齐方式。text-align 在纵向模式下控制的是行内方向的对齐，而 align-items 等弹性布局属性则控制块级方向。理解这些映射关系，可以避免对齐结果与预期不符。

最后是交互元素。按钮、输入框等表单控件在纵向书写模式下，其内部文本方向也会改变，可能需要单独覆盖 writing-mode 以保持界面一致性。

常见问题与兼容性注意

纵向排序在不同浏览器和不同语言环境下的表现存在差异。

一方面，writing-mode 的浏览器支持已经比较广泛，但 text-orientation 和 text-combine-upright 的部分取值在旧版浏览器中可能不被识别。如果项目需要兼容较老的环境，建议提供降级方案，例如使用水平排版作为后备。

另一方面，标点符号在纵向模式下的位置可能不符合预期。中文标点通常有全角和半角之分，全角标点在竖排中会占据一个字符位置，而半角标点可能旋转或错位。可以通过 font-feature-settings 或字体选择来优化标点表现。

此外，纵向排序对屏幕阅读器和复制粘贴行为也有影响。部分辅助技术可能按照视觉顺序而非逻辑顺序读取内容，因此在语义结构上仍需保持合理的 DOM 顺序。

相关文章

• css滚动条样式：跨浏览器适配与设计取舍

  从 Firefox 与 WebKit 两套机制出发，聊滚动条宽度、颜色、圆角与滑块细节的写法，以及常见踩坑与兼容取舍。

• css是什么？写给刚接触网页样式的你

  解释 CSS 的含义、作用与基本写法，说明它与 HTML 的分工，并澄清初学者常见的误解。

• css控制滚动条样式：为什么你的自定义总不生效

  聊聊css控制滚动条样式的思路与常见坑：标准属性与旧式写法怎么选、容器滚动怎么写、可访问性如何兼顾。

• css3选择器：从样式规则到代码处理的实用思路

  围绕css3选择器展开，聊它在样式规则中的含义、与正则处理的交叉场景，以及开发者容易踩的坑和排查思路。

• css段落空行删除：样式表里的空行到底要不要清

  从解析规则、版本对比和团队协作角度，说明CSS段落空行删除的实际影响，以及哪些空行值得保留。

常见问题