css3文本排序对齐：从混乱到有序的排版思路
做多语言页面时，常遇到阿拉伯语从右往左读、数字和符号混排后顺序错乱、表格里的文字怎么都对不齐。这些问题的根源往往不在字体，而在文本排序与对齐的规则。css3文本排序对齐涉及书写方向、逻辑属性、对齐方式等多个层面，理解它们能帮你少走弯路。
方向不对，对齐白费
很多人调对齐时只盯着 text-align，结果在从右往左书写的语言里怎么调都别扭。其实文本的排列方向由 direction 和 unicode-bidi 共同决定，前者设定基础方向，后者处理行内元素的混排。比如一段阿拉伯语里嵌入英文品牌名，如果不设置 unicode-bidi: isolate，英文的标点可能跑到错误的一侧。
更省心的做法是直接用 HTML 的 dir 属性配合 CSS 逻辑属性。逻辑属性把 left/right 换成 inline-start/inline-end，方向一变，对齐自动跟着翻转，不用写两套样式。
书写模式改变的不只是方向
writing-mode 能把文本从横排变成竖排，但它的影响远不止视觉方向。一旦切到竖排，text-align 控制的是块轴方向的对齐，而行内轴的对齐要靠 text-combine-upright 之类的属性处理数字和标点。
有个容易忽略的点：竖排时 margin 和 padding 的物理方向没变，但逻辑方向变了。如果之前用 margin-left 控制缩进，竖排后缩进会跑到奇怪的位置。改用 margin-inline-start 就能避免这种错位。
对齐不只是左右，还有基线与两端
text-align: justify 在长段落里很常见，但遇到中英文混排时，单词间距可能被拉得过大。这时可以配合 text-justify: inter-character 让中文按字间距调整，英文仍按词间距处理。
另一个常被问的是垂直对齐。vertical-align 只对行内元素和表格单元格生效，块级元素之间的垂直对齐得靠 flex 或 grid。表格里数字列对不齐，往往是因为字体不是等宽，给数字单独设置 font-variant-numeric: tabular-nums 就能让它们按相同宽度排列。
排序的隐形规则：Unicode 与语言标签
文本排序有时不是视觉问题，而是字符本身的顺序。比如带变音符号的字母，在 Unicode 里可能是组合字符，直接比较会得到意外结果。CSS 本身不负责排序，但 lang 属性会影响断行和字体选择，间接影响排序后的呈现。
如果页面需要按字母排序列表，别指望 CSS 完成，得在数据层用 Intl.Collator 按语言规则处理。CSS 能做的是确保排序后的文本在视觉上对齐整齐，比如用 text-align: start 让不同长度的条目从同一边起排。
总结
css3文本排序对齐的难点往往不在单个属性，而在方向、书写模式和对齐方式的联动。优先使用逻辑属性和 dir 属性，让样式随语言方向自动适配；竖排场景留意 text-combine-upright 和逻辑间距；数字对齐则靠等宽数字字体和末端对齐。把这些规则理清，多语言排版会顺很多。
相关文章
- css滚动条样式：跨浏览器适配与设计取舍
从 Firefox 与 WebKit 两套机制出发，聊滚动条宽度、颜色、圆角与滑块细节的写法，以及常见踩坑与兼容取舍。
- css是什么？写给刚接触网页样式的你
解释 CSS 的含义、作用与基本写法，说明它与 HTML 的分工，并澄清初学者常见的误解。
- css控制滚动条样式：为什么你的自定义总不生效
聊聊css控制滚动条样式的思路与常见坑：标准属性与旧式写法怎么选、容器滚动怎么写、可访问性如何兼顾。
- css3选择器：从样式规则到代码处理的实用思路
围绕css3选择器展开，聊它在样式规则中的含义、与正则处理的交叉场景，以及开发者容易踩的坑和排查思路。
- css段落空行删除：样式表里的空行到底要不要清
从解析规则、版本对比和团队协作角度，说明CSS段落空行删除的实际影响，以及哪些空行值得保留。
常见问题
Q1为什么设置了 text-align: right 后，标点还是跑到了左边？
标点的位置受 `direction` 和 `unicode-bidi` 影响，单纯改 `text-align` 只改变行内内容的对齐，不改变字符的排列顺序。检查父元素的 `dir` 属性或 `direction` 值，必要时给混排片段加 `unicode-bidi: isolate`。
Q2竖排文本里数字总是倒着的，怎么处理？
竖排时数字默认按横向旋转，可以用 `text-orientation: upright` 让字符直立，但这样数字会逐个堆叠。更常见的做法是给数字片段加 `text-combine-upright: all`，让它们以横向组合的形式嵌入竖排流中。
Q3表格里的数字列怎么才能对齐？
先确认数字字体是否等宽，如果不是，用 `font-variant-numeric: tabular-nums` 启用表格数字。然后统一用 `text-align: end` 让数字右对齐，小数点自然成列。
Q4逻辑属性和物理属性可以混用吗？
可以，但混用容易在方向切换时出现意外。建议在一个组件内统一用逻辑属性，比如 `margin-inline`、`padding-block`，这样无论书写模式怎么变，间距都保持在预期的逻辑侧。