别让文字“跑偏”：深入理解 HTML dir 属性，搞定多语言排版

接手国际化项目时，最怕遇到的就是阿拉伯语或希伯来语页面。明明逻辑是对的，数字和标点却像脱缰的野马，跑到句子开头。单纯靠 CSS 调整布局往往治标不治本，屏幕阅读器读起来更是一团糟。这时候，被很多人忽略的 dir 属性就成了救星。

这个属性直接写在标签上，告诉浏览器文本的逻辑流向。最基础的三个值是 ltr（从左到右）、rtl（从右到左）和 auto。给容器加上 dir="rtl"，里面的段落、列表甚至混排的数字，都会自动按照 RTL 逻辑重新对齐。这不仅仅是视觉上的翻转，更是语义层面的定义。

很多开发者习惯用 CSS 的 direction 属性来控制方向。虽然视觉效果看起来一样，但在无障碍访问场景下差别巨大。CSS 只管皮肤，HTML dir 才管里子。当盲人辅助工具扫描页面时，它们读取的是 DOM 里的 dir 值，而不是渲染后的样式。如果只用 CSS 改了方向，却忘了改 dir，用户听到的语音导航可能依然是乱序的。所以，涉及多语言站点，优先使用原生 dir 属性，而非纯 CSS 控制。

还有一个常被忽视的实用场景是表单输入。在评论区或搜索框，用户可能输入任何语言的内容。这时候给 <input> 或 <textarea> 加上 dir="auto"，浏览器会智能检测输入内容的第一个字母，动态决定是从左开始还是从右开始。不用写复杂的 JS 判断，既省资源又保证了用户体验的一致性。比如用户在中文句子里夹杂英文缩写，浏览器能自动维持正确的阅读顺序，避免光标跳跃带来的挫败感。

需要注意的是作用域问题。dir 属性是可以继承的。如果在父级 div 设置了 rtl，内部的子元素默认都会跟着变。假如某个小模块需要保持左向显示，必须在子元素上显式覆盖为 ltr。这种嵌套层级有时候会导致意想不到的“局部翻转”，调试时要格外留意结构树的变化。遇到双向文本混排（如阿拉伯文中嵌入英文代码），光靠 dir 可能不够，必要时还得配合 <bdi> 标签实现隔离，防止上下文的干扰。

全球化开发不仅仅是翻译文字，更要适配文化的阅读习惯。把 dir 用好，能让你的网页在多语言环境下依然体面可靠。别为了省几行代码牺牲了可访问性，细节之处，才是专业度的体现。