bdo不是“设方向”而是“翻字符”，因其绕过Unicode双向算法，强制逐字符视觉重排；如<bdo dir="rtl">abc123</bdo>显示为321cba，不改变DOM文本值，仅影响渲染，复制粘贴仍为源顺序。
为什么 bdo 不是“设方向”，而是“翻字符”
bdo 的作用不是设置语言方向或对齐方式，它直接绕过 Unicode 双向算法（UBA），对内部所有字符做**逐字符视觉重排**。写 <bdo dir="rtl">abc123</bdo> 渲染出来是 321cba，不是右对齐的 abc123，更不是按阿拉伯语逻辑排版——它只是把字符串从右往左“画”一遍。
常见错误现象：
- 把
bdo当<div dir="rtl">用，结果数字、标点全乱序 - 在用户昵称里硬套
<bdo dir="rtl">أحمد123</bdo>，看到的是321أحمد，复制粘贴却是أحمد123，前后不一致 - 以为
dir="auto"能智能识别，实际浏览器忽略或 fallback 到ltr，希伯来文直接显示为םולש
bdo 的 dir 属性只能是 "ltr" 或 "rtl"
必须显式声明，且只接受这两个值。大小写敏感，DIR="RTL" 在 XHTML 中可能被拒绝解析；dir=""、dir="auto"、省略 dir 都无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 正确写法只有两种：
<bdo dir="rtl">نص عربي</bdo>或<bdo dir="ltr">مرحبا</bdo> - 动态渲染时避免用
<bdo :dir="currentDir">（Vue）或类似绑定，属性更新易导致视觉跳变 - 检查真实属性值要用
bdoElement.getAttribute("dir")，而不是bdoElement.dir（后者可能返回旧缓存值）
嵌套 bdo 会导致不可预测的翻转叠加
外层 <bdo dir="rtl"> 包内层 <bdo dir="ltr">，浏览器会先对外层内容整体 RTL 排布，再对内层子内容单独 LTR 绘制——但两层顺序叠加后，视觉结果很难人工推演。
例如：<bdo dir="rtl">a1<bdo dir="ltr">b2</bdo>c3</bdo>
- Chrome 可能渲染为
3c2b1a - Firefox 可能渲染为
c3b2a1 - SSR 渲染与客户端 hydration 后方向可能不一致
除非你在写双向算法测试用例，否则不要嵌套。
什么场景真该用 bdo，什么场景必须停手
bdo 是极窄口径的工具，适用场景极少：
- 调试 UBA 异常：比如快速验证某段混合文本是否被意外 RTL 化，用
<bdo dir="rtl">Hello عالم</bdo>看是否变成ملعا olleH - 命令行模拟中控制光标走向（RTL 页面里让英文命令保持 LTR 输入习惯）
- 展示
U+202E（RLM）等 bidi 控制符效果的对比样本
以下情况请立刻改用其他方式：
- 整段阿拉伯语/希伯来语文本 → 直接给容器加
dir="rtl" - API 返回的用户名、评论、URL → 用
<bdi>自动隔离方向 - 想让数字在 RTL 文本中保持正常顺序 → Unicode 已处理，无需干预
- 单纯右对齐 → 用 CSS
text-align: right
最易被忽略的一点：bdo 只改显示，不改 DOM 文本值、不改复制粘贴内容、不改屏幕阅读器朗读顺序——前端若依赖剪贴板做校验，会出错。
