bdo强制逐字符视觉重排，如123@example.com显示为moc.elpmaxe@321；bdi则自动隔离并独立推断方向，确保用户生成内容正确对齐且不破坏语义与复制逻辑。
为什么会把123@example.com翻成moc.elpmaxe@321
这不是 bug，是 bdo 的设计目的：它绕过 Unicode 双向算法（UBA），对字符做纯视觉顺序重排。只要写了 dir="rtl"，浏览器就把所有字符——包括数字、ASCII 符号、拉丁字母——从右往左挨个画出来。
常见误判点：
- 以为
bdo是“设 RTL 对齐”，实际它是“逐字符倒序输出” - 在 RTL 页面里给 URL 包一层
<bdo dir="ltr">...</bdo>，结果发现显示还是错的——因为bdo不解决“隔离”，只做“翻转”，而 URL 里的@和.本身是弱方向字符，翻转后位置就乱了 -
bdo必须带dir属性，且只能是"ltr"或"rtl"；漏写或写成dir="auto"，标签完全失效
什么时候该用bdi而不是dir="auto"属性
bdi 的本质是创建一个方向隔离上下文，让浏览器对其中内容**独立运行 UBA**，不受父容器 dir 影响。而 dir="auto" 是依附于当前元素的属性，仍受祖先 dir 值干扰。
典型对比场景：
-
<div dir="rtl">Hello <bdi>user@مثال.com</bdi> </div>→user@مثال.com正确左对齐（LTR），مثال.com部分右对齐（RTL） -
<div dir="rtl">Hello <span dir="auto">user@مثال.com</span> </div>→ 整段可能被拉进 RTL 流，句点或空格错位 -
bdi不接受dir属性；写<bdi dir="auto"></bdi>是冗余且易误导的
bdo和bdi在用户生成内容中不能混用
动态插入的用户名、评论、API 返回字段，一律用 bdi。这是底线。
原因很直接：
-
bdo强制重排后，DOM 中文本节点值不变，但用户 Ctrl+C 复制出来的是源顺序（比如复制<bdo dir="rtl">أحمد123</bdo>得到的是أحمد123，不是视觉上看到的321أحمد），前端若靠剪贴板内容校验邮箱或用户名，会出错 -
bdo嵌套时方向逐层覆盖，逻辑不可控；而bdi是扁平隔离，多个并列互不干扰 - 屏幕阅读器读
bdo内容仍按 DOM 顺序，视觉与听觉割裂，可访问性受损
真正需要bdo的场景其实非常窄
日常开发中，95% 标榜“解决方向问题”的需求，本质是没分清「继承」「隔离」和「重排」。绝大多数时候，你想要的只是让一段内容别被父级拖偏，而不是把它每个字都翻过来。
必须用 bdo 的情况只有两类：
- 调试 UBA 行为，比如验证某个控制符是否生效
- 极少数 UI 文字需镜像效果（如图标旁固定方向的短提示文字），且内容完全静态、可控、无标点/数字混合
除此之外，所有用户输入、数据库字段、搜索结果、表格单元格文本，都应该无条件包裹 <bdi></bdi>——它不改变原始顺序，不破坏语义，也不影响复制粘贴逻辑，只是默默确保方向判断不被污染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
