应仅在动态混排rtl/ltr内容且需双向隔离时使用，如用户昵称、api返回的文件名或url；其他情况滥用会破坏可访问性与渲染。
必须用 <bdi></bdi> 的场景很窄：仅当内容方向不可预知（如用户昵称、API 返回的文件名、URL）且混排 RTL/LTR 时，才需要它；其他情况加了反而干扰可访问性或破坏渲染。
什么时候该用 <bdi></bdi> 而不是 dir="auto"
关键区别不在“能不能探测方向”，而在“是否隔离上下文”：dir="auto" 只设方向推断逻辑，但子元素仍会被父容器的 dir 拖进方向上下文；<bdi></bdi> 强制开启 Unicode 双向隔离（Bidi Isolation），完全切断父子方向污染。
- 父容器是
dir="rtl"，里面要显示英文用户名Ahmad123→ 必须用<bdi>Ahmad123</bdi>，否则123可能被拉到左边或倒序 - API 返回一个路径字符串
مجلد/file.txt→ 直接包<bdi>مجلد/file.txt</bdi>，避免点号.被当成 RTL 上下文的一部分而错位 -
dir="auto"在 Safari 13.0 及更早版本中不生效，<bdi></bdi>从 Safari 13.1+ 开始稳定支持 —— 若需兼容旧版 Safari，<bdi></bdi>是更鲁棒的选择
哪些地方绝对不能用 <bdi></bdi>
滥用 <bdi></bdi> 不是修 bug，是造 bug。它只解决双向算法溢出问题，不负责对齐、字体、盒模型。
- 静态中文页面里给「张三」加
<bdi>张三</bdi>—— 中文无强方向字符，<bdi></bdi>完全冗余，还多一个 DOM 节点 - 已明确设了
dir="ltr"的容器内，再套一层<bdi></bdi>—— 方向已确定，隔离无意义 - 表单控件内部：
<input>和<textarea></textarea>自身管理光标与方向，<bdi></bdi>无效；应改用dir="auto"属性 - 整段评论或新闻正文包裹成一个
<bdi></bdi>—— 这会让内部混合语言相互干扰，加剧错乱，应只包独立子串（如用户名、ID、URL）
<bdi></bdi> 和 <bdo></bdo> 别混，也别替代
<bdi></bdi> 是“让浏览器自己判断并隔离”，<bdo></bdo> 是“强制翻转视觉顺序”。二者语义和行为完全不同，混用会导致可访问性断裂。
-
<bdo dir="rtl">أحمد123</bdo>会把数字翻到最左变成321أحمد，屏幕阅读器仍按源码读أحمد123，视障用户听到的和看到的完全不一致 -
<bdi>user@مثال.com</bdi>让浏览器识别首字符م为 RTL，整体右对齐，标点归位，复制粘贴仍是原始顺序 - 嵌套
<bdi></bdi>或混用<bdi><bdo></bdo></bdi>—— 行为未标准化，旧版 Safari 可能异常折叠，应避免
真正难处理的不是纯阿拉伯语或希伯来语，而是它们和数字、ASCII 符号、emoji 混排时的方向污染。这时候 <bdi></bdi> 不是锦上添花，而是防止标点跑偏、链接错位、屏幕阅读器误读的最小语义化防线 —— 但它只在动态、不可信、混排的子串上起效，别把它当成全局样式开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
