dir="auto"仅在元素为纯文本且首字符为强方向字符时生效；遇空格、嵌套标签、数字或中性字符即fallback至LTR，不参与Bidi隔离，无法替代bdi。
dir="auto" 在 <span> 上确实能自动检测文本方向，但它的行为有明确前提——它只对**纯文本内容**生效，且依赖浏览器的 Unicode 双向算法（Bidi Algorithm）分析首字符的 Unicode 类别。
dir="auto" 什么时候真正起作用？
它只在元素内没有显式 dir 设置、且内容为非空纯文本时触发。一旦里面嵌套了其他元素（比如另一个 <span>、<b> 或空格/标点开头），检测就可能失效或退回到父级方向。
- ✅ 有效：
<span dir="auto">مرحبا</span>→ 检测到阿拉伯文/希伯来文/波斯文等 RTL 字符，渲染为右对齐 - ✅ 有效：
<span dir="auto">Hello</span>→ 检测到拉丁字母，按 LTR 渲染 - ❌ 无效：
<span dir="auto"> <b>Hello</b></span>→ 首字符是空格，算法不识别语义，常 fallback 到父dir - ❌ 无效：
<span dir="auto"><span>مرحبا</span></span>→ 首节点是元素，不是文本节点，跳过自动检测
和 CSS 的 direction: ltr / rtl 有什么区别？
dir="auto" 是 HTML 属性，影响的是** bidi 重排序逻辑**和**块级方向继承**；而 direction: ltr 等只是 CSS 布局属性，不参与 Unicode 双向解析，仅控制对齐与盒模型方向。
- 若只写
style="direction: rtl;"，但 HTML 未设dir，某些浏览器（如旧版 Safari）可能忽略 Bidi 重排，导致阿拉伯文字母顺序错乱 -
dir="auto"会同时设置方向语义 + 触发 Bidi 算法，更可靠；CSSdirection单独用无法替代它 - 二者可共存，但
dir属性优先级高于directionCSS，后者会被覆盖
常见误用：混用 dir="auto" 和 dir="ltr"/"rtl"
给同一元素同时写 dir="auto" 和 dir="rtl" 不合法；浏览器会取最后一个出现的 dir 属性值，前面的被忽略。动态切换时也容易出问题：
立即学习“前端免费学习笔记（深入）”；
- JS 修改
el.dir = "auto"后，若内容随后变成纯数字或标点（如"123"），方向可能意外变成 LTR（因 ASCII 数字属弱 LTR 类） - 服务端渲染时若内容含零宽连接符（
\u200D）或 RLO/LRO 控制符，dir="auto"仍按首字符判断，可能和实际视觉方向不一致 - 不要对多语言混合短语（如
"File 'ملف.txt'"）盲目依赖dir="auto"：首字符F是 LTR，整段按 LTR 渲染，但内部阿拉伯文字仍需正确重排——这其实没问题，因为 Bidi 算法本身就会处理内部段落，无需外层dir干预
真正要注意的，是那些看起来“应该自动识别”但其实被空格、标签、控制符或纯符号打断的边界情况——dir="auto" 不是魔法，它只看 DOM 文本节点的第一个强方向字符。
