标签用于强制逐字符翻转视觉渲染顺序，而非设置语言方向；必须显式声明dir="ltr"或dir="rtl"，绕过unicode双向算法，使"abc"显示为"cba"，不改变dom文本值、复制粘贴内容及屏幕阅读器朗读顺序。
用 <bdo></bdo> 强制覆盖默认文本方向，不是设置语言而是覆盖渲染
<bdo></bdo> 的作用非常明确：它不推断语言、不依赖 lang 属性，只做一件事——强制把内部文字按指定方向重绘。浏览器会忽略 Unicode 双向算法（BIDI）的自动判断，直接按 dir 属性值排布字符顺序。这意味着即使你写的是英文 "hello"，设成 dir="rtl"，它也会从右往左显示为 "olleh"（字符顺序翻转），而不是像阿拉伯语那样保持单词内左到右、整体 RTL 的自然行为。
常见误用是把它当 <div dir="rtl"> 用——后者只是设置块级容器的方向上下文，仍受 BIDI 算法影响；而 <code><bdo></bdo> 是“硬掰”，适合调试、展示反向效果或特殊 UI 动效。
dir="rtl" 和 dir="ltr" 的实际表现差异
两者唯一区别就是字符绘制起点和顺序：
-
dir="rtl"：光标起始在右边界，后续字符向左追加；视觉上第一个字符出现在最右边 -
dir="ltr"：光标起始在左边界，后续字符向右追加；视觉上第一个字符出现在最左边 - 注意：这和 CSS 的
text-align无关——text-align: right只是右对齐，不改变字符顺序；<bdo dir="rtl"></bdo>才真正翻转顺序
示例：
<bdo dir="rtl">ABC</bdo>
渲染结果视觉上是
CBA（不是右对齐的 ABC）。嵌套 <bdo></bdo> 时方向层层覆盖，但不推荐多层嵌套
内层 <bdo></bdo> 会完全覆盖外层设定的方向，比如：
<bdo dir="rtl">A<bdo dir="ltr">BC</bdo>D</bdo>
结果是：D（RTL 起点）→ C B（被内层 LTR 覆盖，顺序不变）→ A（RTL 继续向左），最终视觉顺序为 D C B A？不对——实际是 D、然后 BC（左到右）、再 A，但因为外层是 RTL，整个序列从右往左排布，所以真实渲染为：A（最右）、BC（中间，B 在左、C 在右）、D（最左）→ 视觉上是 D C B A？不，是 A B C D？等等——这里容易错。
正确理解：每个 <bdo></bdo> 只控制其子节点的**渲染顺序**，不改变字符串原始内容。上面例子中，外层 dir="rtl" 把三个“原子”（A、<bdo dir="ltr">BC</bdo>、D）从右往左排列，即：D → <bdo dir="ltr">BC</bdo> → A；而中间那个 <bdo></bdo> 内部保持 B 左 C 右。所以最终是：D + BC + A，从右往左排，即视觉上 A 最右，BC 居中（B 左 C 右），D 最左 → 显示为 D B C A？不对，是 A、BC、D 按 RTL 顺序水平摆放：A 在右，BC 在 A 左边（B 左 C 右），D 在 BC 左边 → 所以屏幕从左到右看到的是：D B C A。
实操建议：
- 单层 <bdo></bdo> 足够应对绝大多数方向翻转需求
- 多层嵌套极易引发方向混乱，尤其混入 Unicode RTL 字符（如阿拉伯字母）时，BIDI 算法可能和 <bdo></bdo> 冲突
- 如需组合不同方向文本，优先用 <span dir="rtl"></span> 或 CSS direction，更可控
替代方案：CSS direction 和 unicode-bidi 更灵活但需理解层级
如果目标是让一段文字“看起来从右向左读”，但又不想翻转字符顺序（比如展示阿拉伯语原文），应该用：
-
direction: rtl设置方向上下文 -
unicode-bidi: embed或isolate控制双向隔离级别（避免相邻文本干扰） - 配合
lang属性可提升可访问性与语音朗读准确性
<bdo></bdo> 是 HTML 级强制指令，无法用 CSS 覆盖；而 direction 是 CSS 层级控制，可被其他样式继承或覆盖。生产环境里，除非明确需要字符级翻转（如镜像文字、密码遮罩动画），否则优先走 CSS 方案。
容易被忽略的一点：<bdo></bdo> 不触发重排（reflow），只影响重绘（repaint），但它会破坏文本的语义流——屏幕阅读器通常会按 DOM 顺序朗读，而不是渲染顺序。所以纯视觉翻转场景下，务必测试无障碍支持。
