是强制启用 unicode 双向隔离的标签，仅用于方向不可预知的独立子串，防止父容器方向污染；错误使用会破坏可访问性或引发渲染错乱。
<bdi></bdi> 不是用来“美化”混排的，而是防止浏览器把标点、数字、斜杠等拉错位置的最后一道防线——它只在方向不可预知的子串上起效，用错地方反而会破坏可访问性。
什么时候必须用 <bdi></bdi>，而不是 dir="auto"
关键不是“能不能判断方向”，而是“会不会被父容器拖偏”。dir="auto" 只设方向值，不建隔离边界；<bdi></bdi> 强制开启 Unicode 双向隔离（BIDI Isolation），让 UBA 算法只作用于标签内部。
- 父容器是
dir="rtl"，里面要显示英文用户名Ahmad123→ 不包<bdi></bdi>，数字可能倒序或对齐错位 - API 返回路径
مجلد/file.txt→ 直接包<bdi>مجلد/file.txt</bdi>，否则点号.会被当成 RTL 上下文的一部分 - 用户输入以空格或数字开头（如
" 123@example.com"）→dir="auto"会因首个强方向字符缺失而误判为 LTR；<bdi></bdi>自动跳过前导弱字符，继续找第一个强方向字符
<bdi></bdi> 的正确包裹粒度
不是整段评论包一层，而是每个独立、方向不可控的子串单独包裹。它解决的是“污染扩散”，不是“全局重排”。
- ✅ 正确：
用户说：<bdi>أحمد</bdi>…、文件名：<bdi>(ahmed123)</bdi>、访问 <bdi>user@مثال.com</bdi> - ❌ 错误：
<bdi>Ali: مرحبا</bdi>—— 让两个方向相反的词相互干扰，加剧错乱 - ❌ 错误：
<bdi>张三</bdi>—— 中文无强方向字符，完全冗余，还多一个 DOM 节点
哪些地方绝对不能用 <bdi></bdi>
<bdi></bdi> 只隔离双向算法，不改字体、盒模型、也不接管光标逻辑。滥用等于引入新 bug。
- 表单控件内禁用：
<input>和<textarea></textarea>自身管理方向和选区，<bdi></bdi>无效；应改用dir="auto" - 禁止嵌套：
<bdi><bdi>...</bdi></bdi>行为未标准化，旧版 Safari 可能异常折叠 - 别混用
<bdo></bdo>：<bdo dir="rtl"></bdo>强制翻转视觉顺序，屏幕阅读器仍按源码读，视障用户听到的和看到的完全不一致 - 避免 CSS 干预：给
<bdi></bdi>直接设direction: rtl会覆盖其自动探测逻辑，退化为普通<span></span>
真正难处理的不是纯阿拉伯语，而是它和数字、ASCII 符号、emoji 混排时的方向污染。<bdi></bdi> 是语义级隔离，不是样式补丁——它只在动态、不可信、混排的子串上起效，其他地方加了就是多余 DOM 节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
