bdi标签不是设方向，而是对不可预知方向的文本强制启用Unicode双向隔离；必须用于混排RTL与LTR内容时切断父容器方向污染，如父级dir="rtl"中显示user-2024或مجلد/file.txt，且不可显式加dir属性或嵌套。

bdi 标签不是用来“设方向”的，而是让浏览器对一段不可预知方向的文本自动做双向隔离——它只在混排阿拉伯语、希伯来语等 RTL 内容与英文/数字时才真正起作用，纯中文或纯英文页面加了也没反应。

什么时候必须用 bdi 而不是 dir="auto"

关键区别是：是否切断父容器方向污染。dir="auto" 会看首字符推断方向，但依然受父级 dir="rtl" 影响；bdi 强制创建 Unicode 双向隔离段（Bidi Isolation），完全无视外部 dir 设置。

• 父容器是
  ，里面要显示 user-2024 → 必须用 user-2024，否则连字符和数字可能被拉到左边
• API 返回路径如 مجلد/file.txt → 直接包 مجلد/file.txt，防止 .txt 被卷入 RTL 上下文错位
• 旧 Safari（13.0 及更早）不支持 dir="auto"，但 bdi 从 Safari 13.1+ 开始稳定可用
• 内容以空格或标点开头（如 " (ahmed123)"）→ dir="auto" 会 fallback 到父方向，bdi 仍能跳过前导空白正确识别

bdi 的正确写法和常见错误

bdi 默认已内置 dir="auto" 和 unicode-bidi: isolate，显式加 dir 属性或嵌套都会破坏行为。


HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载
• ✅ 正确：أحمد123、user-2024
• ❌ 冗余：أحمد123 —— W3C 明确规定默认就是 dir="auto"
• ❌ 错误：123 —— 显式指定方向会关闭自动探测，纯数字反而可能渲染成 321
• ❌ 危险：أحمد —— 嵌套导致隔离边界重叠，部分 WebView 中折叠失效
• ❌ 无效：أحمد —— CSS direction 会覆盖原生隔离逻辑

哪些地方绝对不能用 bdi

bdi 是原子级隔离方案，只适用于短文本片段。滥用反而引发新问题。

• 静态中文页面里给「张三」加 张三 —— 中文无强方向字符，bdi 完全冗余，还多一个 DOM 节点
• 表单控件内部： 或 不能套 bdi —— 它们自身管理光标与方向，应改用 dir="auto" 属性
• 整段评论或新闻正文包裹成一个 bdi —— 这会让内部混合语言相互干扰，加剧错乱
• 已明确设了 dir="ltr" 的容器内再套一层 bdi —— 方向已确定，隔离无意义

真正容易被忽略的是：bdi 的隔离能力只在它自身 DOM 节点生效，一旦外层用了 direction: rtl 且没配 unicode-bidi: isolate，它就失效——所以不要指望 CSS direction 替代 HTML dir 或 bdi。