bdo标签是唯一能真正镜像反转文本视觉显示顺序的HTML元素，需显式设置dir属性：dir="rtl"使拉丁字母倒序显示，dir="ltr"对RTL语言起反向作用，且不改变原始字符内容。
用 bdo 标签强制反转文本流向，不依赖语言方向
bdo（Bi-Directional Override）是唯一能真正“镜像反转”视觉显示顺序的 HTML 元素。它不改变文本内容本身，也不受父容器 dir 属性影响，而是直接覆盖双向算法——比如把 "hello" 显示为 "olleh"，把阿拉伯数字串 "12345" 从左到右强行变成从右到左排列。
关键点：bdo 必须显式声明 dir 属性，否则无效。只写 <bdo>abc</bdo> 不会做任何事。
-
dir="ltr"：强制按从左到右顺序渲染（对拉丁字母无感，但对 RTL 文本如阿拉伯语是“反向”效果） -
dir="rtl"：强制从右到左渲染（对拉丁字母就是真正的字符级镜像反转）
示例：<bdo dir="rtl">Hello</bdo> 渲染结果视觉上是 olleH（注意：不是 Unicode 镜像字符，只是显示顺序翻转）。
dir 属性单独用在普通元素上 ≠ 镜像，只是设置基线方向
给 div、p 或 span 加 dir="rtl"，只是告诉浏览器“这段文字按 RTL 语言规则排版”，不会反转字母顺序。它影响的是标点位置、连字行为、内联元素顺序（比如图标在文字左侧还是右侧），但 "abc" 还是显示为 "abc"，不是 "cba"。
常见误用场景：
- 想让英文标题倒着显示，却只加了
<div dir="rtl">TITLE</div>→ 毫无变化 - 混用
dir="rtl"和 CSStransform: scaleX(-1)→ 视觉翻转但光标定位、选中文本、屏幕阅读器行为全乱
记住：dir 是语义性方向控制，不是视觉特效开关。
镜像反转 ≠ Unicode 反转，别混淆字符编码和渲染逻辑
HTML 的 bdo 不生成新字符，也不调用 Unicode BIDI 算法中的 RLM/LRM 控制符。它只是绕过浏览器默认的双向解析流程，直接按指定方向逐字符绘制。
这意味着：
- 复制
<bdo dir="rtl">abc</bdo>显示出的"cba"，粘贴出来仍是"abc"（原始字符串没变） - 不能靠它实现“汉字镜像字形”（如把“中”画成左右翻转图形），那得用 CSS
transform或 SVG - 嵌套
bdo时，内层dir会覆盖外层，比如<bdo dir="rtl">a<bdo dir="ltr">bcd</bdo>e</bdo>渲染为e dcb a
移动端和屏幕阅读器对 bdo 的支持很真实，但要小心可访问性
所有现代浏览器（包括 iOS Safari、Android Chrome）都支持 bdo，但它会影响 AT（辅助技术）的行为：VoiceOver 和 TalkBack 会按 dir 指定的方向朗读，而不是视觉顺序。例如 <bdo dir="rtl">123</bdo> 会被读作“3 2 1”。
所以：
- 纯装饰性镜像（比如 logo 文字特效）建议改用
transform: scaleX(-1)+direction: rtl+unicode-bidi: bidi-override组合，并加aria-hidden="true" - 若必须用
bdo，且内容有语义（比如倒序提示码），应补充aria-label提供正序文本 - 避免在表单控件、按钮文字中使用
bdo，会导致焦点顺序与视觉错位
真正需要字符级显示反转时，bdo 是唯一语义正确、无需 hack 的方案；但只要不是为了满足双向文本排版规范，多数所谓“镜像需求”其实该交给 CSS 或 Canvas 处理。
