<bdi>唯一作用是自动隔离不确定方向文本，根据首字符Unicode属性独立运行UBA并建隔离边界；它不可嵌套、不接受dir属性，必须用于API/用户输入等不可控混排场景，否则数字或标点易错位。
<bdi> 不是用来“写”方向的，它是用来**自动隔离不确定方向文本**的。你不需要猜语言、不手动设 dir、也不插 Unicode 控制符——浏览器会根据首字符自动判断并建隔离边界。
什么时候必须用 <bdi> 而不是 <span dir="auto">
当内容来自不可信源（如 API 返回的用户名、文件路径、错误消息），且可能混入 RTL 字符（阿拉伯语、希伯来语）时，<bdi> 才不可替代：
-
<span dir="auto">只设方向，不建隔离边界 → 外部 RTL 父容器会让内部数字 “123” 渲染成 “321” -
<bdi>隐式等价于dir="auto" unicode-bidi: isolate→ 数字始终按 LTR 逻辑显示，不受父级dir="rtl"污染 - 典型失败场景：
<div dir="rtl">Error: <span>file.txt</span></div>中的.txt可能被拉到左边；加<bdi>就立刻正常
<bdi> 里能不能再写 dir 属性？
不能。显式加 dir="rtl" 或 dir="ltr" 会关闭自动探测机制，导致行为失控：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<bdi dir="rtl">مرحبا 123</bdi>→ “123” 被强制 RTL，显示为 “321” -
<bdi dir="auto">مرحبا 123</bdi>→ 冗余，<bdi>默认就是dir="auto" - 唯一合法写法：
<bdi>مرحبا 123</bdi>或<bdi>مجلد/file.txt</bdi>
为什么 textContent 比 innerHTML 更安全？
因为浏览器的双向算法在 DOM 构建阶段才运行，而 innerHTML 插入纯字符串时，没有上下文触发隔离：
立即学习“前端免费学习笔记（深入）”；
-
el.innerHTML = "مرحبا 123"→ 浏览器按当前父容器方向解析整串，易错位 -
el.textContent = "مرحبا 123"→ 文本节点无方向属性，完全由包裹它的<bdi>控制 - 动态插入时，优先用
document.createElement('bdi')+textContent，别拼 HTML 字符串
真正容易被忽略的是：bdi 的隔离能力只在它自身 DOM 节点生效，一旦外层 CSS 用了 direction: rtl 且没配 unicode-bidi: isolate，它就失效——所以不要用 CSS direction 替代 HTML dir 或 <bdi>。
