必须用bdi隔离用户生成内容方向，否则RTL/LTR混排时标点错位、数字倒序、复制失真几乎必然；bdi强制创建BIDI隔离段，无视父容器dir，仅依内部首字符独立运行UBA，而bdo是字符级硬翻转，仅适用于调试或镜像场景。
必须用 bdi 隔离用户生成内容的方向，否则 RTL/LTR 混排时标点错位、数字倒序、复制粘贴失真几乎是必然的；bdo 只在极少数调试或镜像展示场景下才该出现，拿它包昵称或 URL 就是埋可访问性雷。
什么时候非得用 bdi 而不是 dir="auto"
关键不在“能不能猜方向”，而在“会不会被父容器拖偏”。dir="auto" 会继承父元素的 dir 属性，一旦外层是 dir="rtl"，哪怕你写 Hello，浏览器也可能把它卷进 RTL 上下文，导致末尾句号跑到左边、括号反向、省略号错位。
bdi 不继承、不妥协：它强制创建一个 BIDI 隔离段，让 Unicode 双向算法只看内部首字符（比如 أ 是强 RTL，H 是强 LTR），完全无视外部 dir 设置。
- 用户昵称来自 API，你无法提前判断是
أحمد还是Ahmad123→ 必须用bdi - 表格中一列混排阿拉伯语用户名 + 英文 ID + 数字 →
dir="auto"在旧 Safari 或 Android WebView 中常失效，bdi稳定支持（Chrome 21+、Firefox 12+、Safari 13.1+、Edge 79+） - 后端模板直接包裹字段：
{{ user.name }}，零 JS 成本，无障碍友好
bdi 不能加 dir 属性，也不能嵌套
bdi 的行为由规范锁定：它默认等价于 dir="auto" + unicode-bidi: isolate。显式写 أحمد 不但多余，还会误导团队成员以为你在手动控制方向——其实浏览器直接忽略这个 dir，只按内容自动推断。
嵌套更危险： 在部分浏览器中会导致隔离边界重叠，RTL 内再包 RTL 可能意外折叠，标点归位失败。
- 正确做法：每个需隔离的片段单独一层
bdi，如评论者:إيانuser-2024
- 错误写法：
أحمد或Hello - 特别注意：表单控件（
input、textarea）里不能用bdi—— 它们自身处理光标和选区方向，bdi无效；应改用dir="auto"属性
为什么 bdo 绝对不该用来包用户昵称或邮箱
bdo 是字符级硬翻转，不是方向隔离。写 أحمد123 的结果是视觉上变成 321أحمد，屏幕阅读器仍按源顺序读 "Ahmad one two three"，可访问性直接断裂。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
典型错误现象：123@example.com 在 RTL 页面中显示为 moc.elpmaxe@321 —— 这不是 CSS direction 没生效，而是 Unicode 双向算法（UBA）把 @ 和 . 当作弱类型字符重新归类了。bdo 是唯一能绕过 UBA 的手段，但它只适用于：
- 调试双向算法时做字面顺序锁定（例如验证 UBA 行为）
- 展示镜像效果（如艺术设计中的倒字）
- 包裹纯 ASCII URL（如
https://example.com），防止 RTL 环境下斜杠和点号错位
bdo 必须显式写 dir="ltr" 或 dir="rtl"，不支持 dir="auto"；漏写 dir 属性则完全无效。
真正难处理的不是阿拉伯语本身，而是它和数字、ASCII 符号混排时的判定边界
浏览器对“强方向性字符”的识别有明确规则，但数字（U+0030–U+0039）、ASCII 标点（@、.、-）、空格、emoji 都属于中性或弱类型字符。它们自身无方向，全靠上下文“带节奏”。
比如 file.txt + مجلد 渲染成 مجلد.txtfile，问题出在 U+002E（英文点号）被误判为 RTL 上下文的一部分。bdi 能切断这种污染，但它不插任何 Unicode 控制符（如 \u2066），而是靠规范定义的隔离环境工作。
所以别手贱往 bdi 里塞 … 或 —— 多余且可能触发嵌套隔离的意外截断；也别指望它修复 CSS text-align 或盒模型问题 —— 它只管双向算法那一层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
