强制逐字符视觉重排，不设语言方向；自动隔离并独立判断文本方向。前者破坏语义，后者尊重内容本意，动态内容应优先用。
用 <bdo></bdo> 就是强行翻转渲染顺序，不是“设方向”而是“重排字符”
<bdo></bdo> 的核心作用不是设置语言方向，而是绕过浏览器的 Unicode 双向算法（UBA），对内部文本做**逐字符级的视觉顺序重排**。比如 dir="rtl" 不是让阿拉伯语“从右往左读”，而是把所有字符按 RTL 顺序从右到左打印出来——哪怕里面混着英文、数字、标点，也照翻不误。
常见错误现象：<bdo dir="rtl">abc123</bdo> 渲染为 321cba，而不是你预期的“从右对齐显示 abc123”。这是因为 <bdo></bdo> 不关心语义或语言，只按 dir 属性机械倒序（LTR/RTL）或镜像（auto）排列字形位置。
- 必须显式指定
dir属性，否则无效（<bdo></bdo>无默认行为） - 不推荐用于整段多语言混排内容——它会破坏链接、括号配对、数字顺序等语义逻辑
- 在 RTL 页面中想让某段 URL 保持 LTR 显示顺序？别用
<bdo dir="ltr"></bdo>，该用<bdi></bdi>
<bdo></bdo> 和 <bdi></bdi> 完全不是替代关系，选错就出方向错乱
<bdo></bdo> 是人工覆盖，<bdi></bdi> 是自动隔离。前者说“你给我按这个顺序画”，后者说“你别管外面，自己猜里面该往哪边走”。
典型误用场景：用户昵称含阿拉伯字母，开发者用 <bdo dir="rtl">{{name}}</bdo> 强制 RTL，结果当昵称为 أحمد123 时，数字被翻到左边变成 321أحمد，完全不可读。
- 动态插入、来源不可控的内容（如评论、用户名、API 返回字段）→ 一律用
<bdi></bdi> - 需要精确控制字符视觉顺序的极少数场景（如调试双向算法、展示 bidi 控制符效果）→ 才考虑
<bdo></bdo> -
<bdo></bdo>不继承父元素dir，<bdi></bdi>会自动推断并隔离
dir 属性值只有 "ltr"、"rtl"、"auto"，没有其他取值
<bdo dir="auto"></bdo> 并不是“智能识别”，而是让浏览器对子内容第一个强方向字符（如阿拉伯字母、拉丁字母）做简单判断后决定渲染方向——但它依然会强制重排，不是隔离。所以 auto 在 <bdo></bdo> 中极少有用，反而容易引发意外翻转。
-
dir="ltr"：把所有字符从左到右依次绘制（不管原文本是否含 RTL 字符） -
dir="rtl"：把所有字符从右到左依次绘制（包括 ASCII 字母、数字、ASCII 标点） -
dir="auto"：仅检查第一个强方向字符，然后按该方向重排全部字符；对纯数字或混合弱字符内容不可靠
真正需要 <bdo></bdo> 的场景非常窄，多数时候是误用了
实际项目中，95% 以上标榜“解决文字方向问题”的需求，本质是没分清「方向继承」「方向隔离」和「方向重排」。比如表单 label 需要和输入框对齐、表格列标题在 RTL 页面中保持 LTR 排版、富文本编辑器内嵌代码块方向稳定——这些都该靠 CSS direction + unicode-bidi 或 <bdi></bdi> 解决，而非 <bdo></bdo>。
一个容易被忽略的细节：<bdo></bdo> 不影响 DOM 结构或字符串值，只改变渲染层顺序。这意味着 element.textContent 仍是原始顺序，但 getBoundingClientRect() 坐标、光标位置、屏幕阅读器播报顺序都可能异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
