bdo标签通过dir属性强制字符级视觉重排，非镜像翻转；必须显式声明dir="ltr"或dir="rtl"才生效，否则无效；复制粘贴和屏幕阅读器读取原始顺序，不改变dom文本内容。
为什么会让"abc"变成"cba"
因为根本不是设置语言方向，而是绕过Unicode双向算法（UBA），直接按dir值做字符级视觉重排。写abc，浏览器就把"a"、"b"、"c"三个字符从右往左依次绘制，结果就是"cba"——这不是排版对齐，是机械翻转顺序。
-
dir必须显式声明，<bdo>abc</bdo>完全无效 -
dir只接受"ltr"或"rtl"，大小写敏感，"RTL"在严格解析下会被忽略 -
dir="auto"在<bdo></bdo>中不合法，规范禁止，浏览器会fallback到ltr - 所有字符（字母、数字、标点、空格）都参与翻转，
<bdo dir="rtl">a b c</bdo>渲染为"c b a"
什么时候必须用而不是
只有当Unicode双向算法把中性字符（比如@、.、数字）错误归类，导致混合文本顺序错乱时，才需要<bdo></bdo>。典型例子：123@example.com在RTL页面中被UBA翻成moc.elpmaxe@321，这时<bdo dir="ltr">123@example.com</bdo>能强制恢复原始顺序。
<div dir="rtl">只是告诉浏览器“这段内容逻辑上是RTL”，仍受UBA影响
<li>
<code><bdo dir="ltr"></bdo>是硬指令：不管上下文、不管字符类型，一律从左往右画- 纯中文或纯英文段落加
<bdo dir="rtl"></bdo>只会造成意外倒序，比如<bdo dir="rtl">你好</bdo>变成"好你"
- 表单输入框里用
<bdo></bdo>会导致光标跳动、选区错乱，绝对避免
嵌套和复制粘贴的坑怎么避
嵌套<bdo></bdo>会逐层翻转，外层dir="rtl" + 内层dir="ltr"不是抵消，而是先整体翻一次，再局部翻一次，结果不可预测。更麻烦的是：视觉上看到的是翻转后的顺序，但DOM里、剪贴板里、屏幕阅读器读出来的，全是原始字符串。
-
<bdo dir="rtl">A<bdo dir="ltr">BC</bdo>D</bdo>渲染顺序取决于浏览器实现，Chrome和Firefox可能不同
-
document.execCommand('copy')拿到的是源文本，不是视觉内容，前端校验时容易误判
- 用户Ctrl+C复制
<bdo dir="rtl">Hello</bdo>，粘贴出来仍是"Hello"，不是"olleH"
- 屏幕阅读器朗读顺序也按DOM原始顺序，不会跟着视觉走，对可访问性有实质影响
真正该用的场景其实非常少
绝大多数所谓“方向问题”都不该用<bdo></bdo>。动态内容一律用<bdi></bdi>，整块RTL语言内容直接设容器dir="rtl"，纯视觉镜像效果必须加transform: scaleX(-1)配合direction: ltr防光标错乱。
- 调试UBA行为、验证算法异常、教学演示——这是
<bdo></bdo>的合理用途
- 用户昵称、评论、API返回字段等来源不可控的内容，用
<bdi></bdi>自动隔离方向
- 想让阿拉伯语里的英文URL保持可读，
<bdo dir="ltr"></bdo>是最后手段，优先考虑<bdi></bdi>或Unicode控制符清理
- 任何依赖复制、朗读、正则匹配、服务端解析的场景，都要意识到
<bdo></bdo>只改渲染，不改数据
实际用的时候，最常被忽略的是：它不改变文本本质，只骗过眼睛。
只有当Unicode双向算法把中性字符（比如@、.、数字）错误归类，导致混合文本顺序错乱时，才需要<bdo></bdo>。典型例子：123@example.com在RTL页面中被UBA翻成moc.elpmaxe@321，这时<bdo dir="ltr">123@example.com</bdo>能强制恢复原始顺序。
<div dir="rtl">只是告诉浏览器“这段内容逻辑上是RTL”，仍受UBA影响 <li> <code><bdo dir="ltr"></bdo>是硬指令：不管上下文、不管字符类型，一律从左往右画- 纯中文或纯英文段落加
<bdo dir="rtl"></bdo>只会造成意外倒序，比如<bdo dir="rtl">你好</bdo>变成"好你" - 表单输入框里用
<bdo></bdo>会导致光标跳动、选区错乱，绝对避免 -
<bdo dir="rtl">A<bdo dir="ltr">BC</bdo>D</bdo>渲染顺序取决于浏览器实现，Chrome和Firefox可能不同 -
document.execCommand('copy')拿到的是源文本，不是视觉内容，前端校验时容易误判 - 用户Ctrl+C复制
<bdo dir="rtl">Hello</bdo>，粘贴出来仍是"Hello"，不是"olleH" - 屏幕阅读器朗读顺序也按DOM原始顺序，不会跟着视觉走，对可访问性有实质影响
- 调试UBA行为、验证算法异常、教学演示——这是
<bdo></bdo>的合理用途 - 用户昵称、评论、API返回字段等来源不可控的内容，用
<bdi></bdi>自动隔离方向 - 想让阿拉伯语里的英文URL保持可读，
<bdo dir="ltr"></bdo>是最后手段，优先考虑<bdi></bdi>或Unicode控制符清理 - 任何依赖复制、朗读、正则匹配、服务端解析的场景，都要意识到
<bdo></bdo>只改渲染，不改数据
嵌套和复制粘贴的坑怎么避
嵌套<bdo></bdo>会逐层翻转，外层dir="rtl" + 内层dir="ltr"不是抵消，而是先整体翻一次，再局部翻一次，结果不可预测。更麻烦的是：视觉上看到的是翻转后的顺序，但DOM里、剪贴板里、屏幕阅读器读出来的，全是原始字符串。
真正该用的场景其实非常少
绝大多数所谓“方向问题”都不该用<bdo></bdo>。动态内容一律用<bdi></bdi>，整块RTL语言内容直接设容器dir="rtl"，纯视觉镜像效果必须加transform: scaleX(-1)配合direction: ltr防光标错乱。
