必须用 bdi 而不是 dir="auto"，因为 bdi 强制切断父容器方向继承，仅依据内部首个强方向字符确定方向，避免混排时标点、数字错位；dir="auto" 则会受外层 dir 影响导致渲染异常。
什么时候必须用 bdi 而不是 dir="auto"
关键不是“能不能猜方向”，而是“会不会被父容器拖偏”。dir="auto" 会继承外层 dir 设置，比如父元素是 dir="rtl"，哪怕你写的是 Hello123，句号、点号或数字仍可能被卷进 RTL 流里错位；bdi 强制切断继承，只看自己内部第一个强方向字符（如 أ 或 H），完全无视外层方向。
常见失效场景：
- 阿拉伯语页面中显示英文用户名
ahmed123，不包bdi→ 数字倒序成321或点号跑左边 - 表格单元格里混排
مجلد/file.txt，不包bdi→.txt被拉进 RTL 流，渲染成مجلد.txtfile - API 返回的昵称开头是空格或数字（如
" 123user"），dir="auto"直接 fallback 到父方向，bdi仍能跳过前导空白正确识别
bdi 的正确包裹粒度和常见错误写法
bdi 是原子级隔离，不是段落级开关。它只对“单个方向不可预知的子串”起效，包大了反而加剧污染，包小了漏掉关键部分。
✅ 正确做法：
- 每个独立字段单独一层：
<p>作者：<bdi>أحمد</bdi><bdi>user-2024</bdi></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a> <p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p> </div> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - URL 或路径类混合内容：
<span>下载 <bdi>ملف.pdf</bdi></span> - 模板中直接套变量：
<bdi>{{ user.handle }}</bdi>，零 JS 成本
❌ 必须避免：
- 嵌套：
<bdi><bdi>أحمد</bdi></bdi>—— 多重隔离边界不一致，旧版 Safari 可能标点归位失败 - 显式加
dir属性：<bdi dir="ltr">Hello</bdi>—— 覆盖自动推断逻辑，纯数字仍按 LTR 渲染为123而非视觉上正确的顺序 - 整段评论或新闻正文套一层
bdi—— 内部 RTL 和 LTR 子串相互干扰，隔离失效
bdi 不解决什么问题，以及哪些地方绝对不能用
bdi 只干预 Unicode 双向算法（UBA）的分段步骤，不改变字体、不触发重排、不防 XSS、不处理编码乱码。
它不负责：
- 中文页面里给「张三」加
<bdi>张三</bdi>—— 中文无强方向字符，纯属冗余 DOM 节点 -
<input>或<textarea></textarea>里用bdi—— 表单控件自身管理光标与方向，bdi完全无效；应改用dir="auto"属性 - 修复 GBK 编码导致的中文乱码 ——
bdi对字符集错误毫无作用，必须确保<meta charset="UTF-8">和 HTTP 响应头一致 - 替代
<bdo></bdo>做镜像翻转 ——<bdo dir="rtl">Hello</bdo>显示为olleH，可访问性断裂，bdi保持原始逻辑顺序
兼容性与部署注意事项
现代浏览器（Chrome 21+、Firefox 12+、Safari 13.1+、Edge 79+）原生支持 bdi，无需 polyfill。但要注意：
- 老版本 iOS Safari（13.0 及更早）不支持，若需兼容，得降级用
<span dir="auto"></span>+ 后端 fallback 策略 - 服务端输出未做 HTML 转义时（如直接插入
<script></script>），bdi不提供任何安全防护 - 不要在
bdi上设unicode-bidi: plaintext—— 这会禁用其隔离能力 - 避免外层再套
dir="auto"—— 会覆盖bdi的自动推断逻辑
真正难处理的从来不是纯阿拉伯语，而是它和数字、ASCII 符号、emoji 混排时的方向污染。bdi 是防止标点跑偏、链接错位、屏幕阅读器误读的最小语义化防线——但它只在动态、不可信、混排的子串上起效，别把它当全局样式补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
