bdi用于自动隔离不可控混排文本，bdo用于强制逐字符翻转视觉顺序；二者不可互换，误用会导致数字倒序、标点错位、复制内容与显示不一致。
bdi 用于自动隔离不可控混排文本，bdo 用于强制逐字符翻转视觉顺序——两者不能互换，选错就导致数字倒序、标点错位、复制内容与显示不一致。
什么时候必须用 bdi 而不是 dir="auto"
关键看父容器是否已设 dir="rtl" 或 direction: rtl。如果设了，而你又要插入用户名、文件名、错误消息这类动态内容，dir="auto" 会继承父级方向，依然被拖偏；bdi 则强制切断继承，单独跑一遍 Unicode 双向算法（UBA）。
- ❌ 错误：
<div dir="rtl">Error: file.txt</div>→ 点号.被卷入 RTL 流，渲染成file.txt的.跑到左边 - ✅ 正确：
<div dir="rtl">Error: <bdi>file.txt</bdi></div>→file.txt保持 LTR 逻辑，“.” 始终在右边 -
bdi不接受dir属性，加了会关闭自动探测，行为失控 - 旧版 Safari（13.0 及更早）对
dir="auto"支持差，但bdi从 13.1+ 起稳定
bdo dir="rtl" 渲染出的不是 RTL 语言效果，而是字符反转
bdo 绕过 UBA，不做语言识别，只按 dir 值机械重排每个字符的视觉位置。写 <bdo dir="rtl">abc123</bdo>，结果是 321cba，不是“abc123 右对齐”。
- 复制粘贴得到的是原始字符串
abc123，和看到的不一致 - 屏幕阅读器照读 DOM 文本节点，不会按视觉顺序朗读
-
dir="auto"在bdo中无效，规范只认"ltr"和"rtl" - 嵌套
bdo时，内层完全覆盖外层方向，但极易造成逻辑混乱，不建议多层使用
动态插入文本时，textContent 比 innerHTML 更安全
浏览器的双向算法在 DOM 构建阶段运行。innerHTML 插入纯字符串时，没有上下文触发隔离；textContent 创建的文本节点无方向属性，完全由包裹它的 bdi 控制。
立即学习“前端免费学习笔记（深入）”；
- ❌ 危险：
el.innerHTML = "مرحبا 123"→ 整串按父容器方向解析，易错位 - ✅ 安全：
const bdi = document.createElement('bdi'); bdi.textContent = "مرحبا 123"; el.appendChild(bdi); - 表单控件（
input、textarea）里不能用bdi，应改用dir="auto"属性 - 静态中文页面给「张三」加
<bdi>张三</bdi>是冗余 DOM 节点，毫无意义
真正难处理的不是纯阿拉伯语，而是它和数字、ASCII 符号、emoji 混排时的方向污染。bdi 是防止标点跑偏、链接错位、屏幕阅读器误读的最小语义化防线——但它只在动态、不可信、混排的子串上起效，别把它当全局样式补丁。
