必须用 dir 属性而非 direction：dir 参与 Unicode 双向算法，影响文本逻辑顺序、标点处理、数字分组及光标行为；direction 仅控制视觉层对齐，无语义且不触发 Bidi 重排。
HTML 中设置文本方向，核心就靠 dir 属性和 direction CSS 属性，但它们作用层级、生效范围和优先级完全不同，混用容易出错。
什么时候该用 dir 属性而不是 direction？
dir 是 HTML 原生属性，直接参与 Unicode 双向算法（Bidi Algorithm）的文本渲染流程，对内联文本顺序、标点处理、数字分组等有底层影响；direction 只是 CSS 视觉层偏移，不改变逻辑顺序。
- 需要正确显示阿拉伯语、希伯来语混合英文/数字时，必须用
dir="rtl"，否则数字可能被错误包裹或标点翻转异常 - 表单输入框中用户输入内容的光标行为、选中文本方向，只响应
dir，direction: rtl无效 -
dir支持继承，父元素设dir="rtl"，子元素默认按 RTL 逻辑排布；而direction不会触发子元素的 Bidi 重排 - 服务端渲染或 SEO 场景下，
dir被搜索引擎和读屏软件识别为语义信息，direction纯属样式，无语义
dir="auto" 真的可靠吗？
dir="auto" 会让浏览器根据首字符 Unicode 类别自动判断方向，看似省事，但实际限制很多：
- 首字符是 ASCII 字母、数字或空格时，一律 fallback 到
ltr，哪怕后面全是阿拉伯字母 - 中文、日文、韩文等无方向性文字开头时，也默认
ltr，无法触发rtl - 动态插入内容（如 JS 拼接字符串后
innerHTML）不会重新触发dir="auto"推断 - Chrome 和 Firefox 行为基本一致，但 Safari 对某些组合字符支持不稳定，建议避免在关键文案中依赖它
CSS 的 direction 和 text-align 配合时的坑
direction 控制行内文本的起始侧（start/end），text-align 的 start/end 值才真正依赖它；但很多人误以为 text-align: right 就等于 RTL 效果。
立即学习“前端免费学习笔记（深入）”；
-
direction: rtl; text-align: right实际让文本右对齐，但“右”是视觉右，不是逻辑 end —— 这会导致在 RTL 语言中阅读体验割裂 - 正确写法是
direction: rtl; text-align: start，这样无论页面整体方向如何，文本都对齐到逻辑起点 -
direction不影响块级元素的margin-left/margin-right，这些仍按文档流物理方向计算，容易导致布局偏移预期之外 - Flexbox 中
flex-direction: row-reverse和direction: rtl效果不同：前者仅翻转布局顺序，后者影响文本内部双向行为
真正要支持多语言文本方向，dir 属性不能省，CSS 的 direction 仅适合微调局部视觉对齐；而任何依赖首字符自动判断的场景，都要预设 fallback 方向并做内容校验。
