bdi标签用于隔离动态混排文本免受父容器方向影响，必须对每个不确定方向的子串单独包裹，而非整体应用或滥用在静态内容中。
bdi 标签不是用来“控制方向”的，而是防止 Unicode 双向算法（UBA）把动态插入的文本跟周围内容错误绑定——它只做一件事：把那段文字从当前方向上下文中“拎出来”，单独跑一遍 UBA，再放回去。
什么时候必须用 bdi 而不是 dir="auto"
关键不在“能不能猜方向”，而在“会不会被父容器拖偏”。dir="auto" 会继承祖先的 dir 属性；而 bdi 强制切断继承，完全无视外层是 dir="rtl" 还是 dir="ltr"。
- 父容器设了
dir="rtl"，里面要显示英文用户名Ahmad123→ 不包bdi，数字可能被拉到左边，甚至倒序成321 - 表格中一列混排
مجلد/file.txt→ 不包bdi，点号.会被卷进 RTL 流，渲染成مجلد.txtfile - 旧版 Safari（13.0 及更早）和部分 Android WebView 中，
dir="auto"常 fallback 到 LTR，bdi从 Safari 13.1+ 起稳定支持
怎么包裹才有效：每个独立子串单独一层
bdi 不是给整段评论加，而是精准包住每一个方向不确定的子串。包得过大或过小都会失效。
- ✅ 正确：
<p>评论者:<bdi>أحمد</bdi><bdi>user-2024</bdi></p>—— 每个不可信字段各自隔离 - ✅ 正确：
<div>访问 <bdi>user@مثال.com</bdi></div>—— URL 是典型混合方向子串 - ❌ 错误：
<bdi>Ali: مرحبا</bdi>—— 把 LTR 名字和 RTL 问候捆在一起，反而加剧干扰 - ❌ 错误：
<bdi><bdi>أحمد</bdi></bdi>—— 嵌套未标准化，旧版 Safari 可能标点归位失败
哪些地方绝对不能用 bdi
滥用 bdi 不是修 bug，是造 bug。它只解决双向算法溢出问题，不负责对齐、字体或盒模型。
立即学习“前端免费学习笔记（深入）”；
- 静态中文页面里给「张三」加
<bdi>张三</bdi>—— 中文无强方向字符，纯属冗余 DOM 节点 - 已明确设了
dir="ltr"的容器内再套bdi—— 方向已确定，隔离无意义 -
<input>或<textarea>里用bdi—— 表单控件自身管理光标与方向，bdi完全无效；应改用dir="auto"属性 - 整段新闻正文或评论包裹成一个
bdi—— 内部混合语言会相互污染，必须拆解为最小粒度子串
真正难处理的不是纯阿拉伯语，而是它和数字、ASCII 符号、emoji 混排时的方向污染。bdi 是防止标点跑偏、链接错位、屏幕阅读器误读的最小语义化防线——但它只在动态、不可信、混排的子串上起效，别把它当全局样式补丁。
