必须用bdi的唯一场景是：无法预判文本首字符方向且夹在方向相反上下文中；bdi强制启用Unicode双向隔离，而dir="auto"仅改方向值不建隔离边界。
必须用 bdi 的地方，只有一种：你无法预判某段文本首字符是 LTR 还是 RTL（比如用户昵称、API 返回的文件名、评论内容），且它夹在方向相反的上下文中——其他情况加 bdi 不但没用，还可能引入可访问性或渲染异常。
什么时候该用 bdi，而不是 dir="auto" 或 span？
关键区别不在“能不能检测方向”，而在“会不会隔离方向算法影响范围”。dir="auto" 只改方向值，不建隔离边界；bdi 强制启用 Unicode 双向隔离（BIDI Isolation），让 UBA 算法只作用于标签内部。
- 父容器是
dir="rtl"，子内容却是英文 URL：<span dir="auto">user@example.com</span>仍可能被整体拖进 RTL 上下文，导致.和/错位；而<bdi>user@example.com</bdi>能彻底隔开 - 后端返回字符串以空格或数字开头（如
" 123@example.com"），dir="auto"会因首个强方向字符缺失而误判为 LTR；bdi自动跳过前导空格和弱字符，继续找第一个强方向字符 - 表格中阿拉伯语单元格内嵌英文 ID：
<td dir="rtl">ملف <span dir="auto">report-2024.pdf</span></td>中的连字符和点号仍可能被 RTL “拉偏”；换成<bdi>report-2024.pdf</bdi>就能归位
bdi 内部不能写 dir 属性
bdi 的行为规范就是隐式等价于 dir="auto" + unicode-bidi: isolate。显式加 dir="rtl" 或 dir="ltr" 会关闭自动探测逻辑，直接退化为普通 span，数字照样倒序（比如 <bdi dir="rtl">123</bdi> 渲染出 321）。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确写法只有：
<bdi>أحمد</bdi>、<bdi>ahmed123</bdi>、<bdi>(user@مثال.com)</bdi> - 错误写法：
<bdi dir="auto">...（冗余）、<bdi dir="ltr">...（禁用探测）、<bdi dir="rtl">123</bdi>（数字翻转） - DevTools 中验证是否生效：选中元素 → 查看 computed style →
unicode-bidi必须是isolate，不是normal或embed
哪些地方绝对不能用 bdi？
bdi 是语义级隔离机制，不是万能排版补丁。它不改变盒模型、不重置字体、也不阻止外部 CSS 的 direction 继承干扰。
立即学习“前端免费学习笔记（深入）”；
- 不要嵌套
bdi：<bdi>أحمد <bdi>123</bdi></bdi>行为未标准化，旧版 Safari 可能异常折叠 - 表单控件里不能用：
<input>和<textarea>自身管理光标与方向逻辑，bdi无效；应改用dir="auto"属性 - 整段新闻正文、静态按钮文字、纯英文导航栏——这些方向明确的内容加
bdi没意义，反而增加 DOM 节点、干扰屏幕阅读器 - 别用
<bdo>替代：<bdo dir="rtl">أحمد</bdo>强制字符翻转，视觉和语义断裂，仅适用于极少数调试或镜像设计场景
真正难处理的不是阿拉伯语本身，而是它和数字、ASCII 符号、emoji 混排时，浏览器对“强类型字符”的判定边界——bdi 的价值，正在于它绕过了这个边界判断，直接切出一块独立的双向计算沙盒。
