唯一作用是自动隔离不确定方向文本，根据首字符unicode属性独立运行uba并建隔离边界；它不可嵌套、不接受dir属性，必须用于api/用户输入等不可控混排场景，否则数字或标点易错位。
<bdi></bdi> 不是用来“写”方向的，它是用来**自动隔离不确定方向文本**的。你不需要猜语言、不手动设 dir、也不插 Unicode 控制符——浏览器会根据首字符自动判断并建隔离边界。
什么时候必须用 <bdi></bdi> 而不是 <span dir="auto"></span>
当内容来自不可信源（如 API 返回的用户名、文件路径、错误消息），且可能混入 RTL 字符（阿拉伯语、希伯来语）时，<bdi></bdi> 才不可替代：
-
<span dir="auto"></span>只设方向，不建隔离边界 → 外部 RTL 父容器会让内部数字 “123” 渲染成 “321” -
<bdi></bdi>隐式等价于dir="auto" unicode-bidi: isolate→ 数字始终按 LTR 逻辑显示，不受父级dir="rtl"污染 - 典型失败场景：
<div dir="rtl">Error: <span>file.txt</span> </div>中的.txt可能被拉到左边；加<bdi></bdi>就立刻正常
<bdi></bdi> 里能不能再写 dir 属性？
不能。显式加 dir="rtl" 或 dir="ltr" 会关闭自动探测机制，导致行为失控：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<bdi dir="rtl">مرحبا 123</bdi>→ “123” 被强制 RTL，显示为 “321” -
<bdi dir="auto">مرحبا 123</bdi>→ 冗余，<bdi></bdi>默认就是dir="auto" - 唯一合法写法：
<bdi>مرحبا 123</bdi>或<bdi>مجلد/file.txt</bdi>
为什么 textContent 比 innerHTML 更安全？
因为浏览器的双向算法在 DOM 构建阶段才运行，而 innerHTML 插入纯字符串时，没有上下文触发隔离：
-
el.innerHTML = "مرحبا 123"→ 浏览器按当前父容器方向解析整串，易错位 -
el.textContent = "مرحبا 123"→ 文本节点无方向属性，完全由包裹它的<bdi></bdi>控制 - 动态插入时，优先用
document.createElement('bdi')+textContent，别拼 HTML 字符串
真正容易被忽略的是：bdi 的隔离能力只在它自身 DOM 节点生效，一旦外层 CSS 用了 direction: rtl 且没配 unicode-bidi: isolate，它就失效——所以不要用 CSS direction 替代 HTML dir 或 <bdi></bdi>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
