bdo标签用于强制覆盖浏览器双向文本算法，按指定方向逐字符重排视觉顺序；仅在调试、教学或纯视觉镜像等特定场景不可替代，日常方向控制应优先使用dir属性。
用 bdo 标签实现强制镜像显示，不依赖语言方向
bdo（Bi-Directional Override）的作用是**完全覆盖浏览器默认的双向文本算法**，直接按你指定的方向渲染字符序列。它和 dir 属性配合使用时，dir="rtl" 表示“从右到左排布”，但注意：这本身不会让字母“左右翻转”，只是改变书写顺序；真正实现视觉上的“镜像”（即每个字符水平翻转），需要额外加 CSS。
常见误区是以为 <bdo dir="rtl">abc</bdo> 就能显示为 “cba” 的镜像效果——其实它只把字符串当作 RTL 文本处理，结果仍是 “abc”，只是对齐靠右、连字行为可能变化。要看到字符级翻转，必须叠加 transform: scaleX(-1)。
-
bdo是语义标签，适合标记明确需要人工干预方向的片段（如嵌入的 LTR 代码在 RTL 页面中） - 纯视觉镜像（如艺术字、倒影效果）不是
bdo的设计目标，别只靠它 - 若内容含中文、数字、标点，
dir="rtl"可能引发意外重排序，建议仅用于已知为纯 ASCII 字母的场景
dir="rtl" 在 bdo 中的实际表现与限制
当写 <bdo dir="rtl">Hello</bdo>，浏览器会把 “H-e-l-l-o” 当作一个 RTL 单元，从右往左排列字符，结果视觉上仍是 “Hello”，因为拉丁字母本身是强 LTR 类型，bdo 不改变其固有方向性，只改变布局顺序。只有在混合方向文本中（比如阿拉伯文字里夹英文），dir="rtl" 才会明显影响位置。
- 单独使用
dir="rtl"对纯英文/数字串无可见变化，不要指望它“反转字符串” - 若想得到 “olleH”，得用 JavaScript 的
split('').reverse().join('')，或 CSS +unicode-bidi: bidi-override配合direction: rtl（但仍有兼容性问题） -
bdo[dir="rtl"]的 CSS 选择器写法无效，dir是 HTML 属性，不是 CSS 属性，不能用属性选择器直接控制渲染逻辑
真正实现字符级镜像的最小可行方案
要让 “Text” 显示成左右翻转的镜像（类似照镜子），必须用 CSS 的 transform: scaleX(-1)，再配合 bdo 或普通元素包裹以避免继承干扰。关键点：翻转后文字不可读，所以仅适用于装饰性场景。
<div style="transform: scaleX(-1); direction: ltr; unicode-bidi: bidi-override;">Mirror</div>
或者更稳妥地用 bdo 包裹：
<bdo dir="ltr" style="transform: scaleX(-1);">Mirror</bdo>
- 必须显式设
dir="ltr"或direction: ltr，否则transform翻转后光标、选中方向会混乱 -
unicode-bidi: bidi-override可防止父容器方向影响，但不是所有浏览器都严格支持 - 该方案在 Firefox、Chrome、Edge 均有效；Safari 对
bdo+transform组合偶有光标偏移，建议用div替代bdo避免语义干扰
为什么不用 JavaScript 反转字符串代替 CSS 翻转？
因为目的不同：split().reverse().join() 得到的是逻辑反转（“abc” → “cba”），而镜像显示是视觉反转（“abc” 看起来像从镜子里看 “abc”）。前者可复制、可搜索、无障碍友好；后者只是像素翻转，复制出来仍是原字符串，屏幕阅读器也读原内容。
- 做 UI 装饰（比如 logo 倒影、按钮悬停镜像）→ 用
transform: scaleX(-1) - 做文本处理（比如回文检测、密码提示翻转）→ 用 JS 字符串操作
- 混用两者易导致维护困惑：比如用 JS 反转后再加
transform，结果翻转两次，看起来又正常了
镜像显示的本质是视觉欺骗，不是文本变换。一旦涉及可访问性、SEO 或用户交互（如双击选中），就得回归语义化 DOM 和真实字符串操作，而不是靠 CSS 掩盖。
