bdo标签必须显式设置dir="ltr"或dir="rtl"才生效，不支持dir="auto"、空值或省略；未写dir属性时完全无效，既不继承父级方向也不触发双向重排。
必须显式写 dir="ltr" 或 dir="rtl"
bdo 标签不支持 dir="auto"，也不接受空值或省略。不写 dir 属性时，bdo 完全无效——它不会继承父级方向，也不会触发任何双向重排行为。
常见错误是只写 <bdo>Hello</bdo>，结果和普通 span 没区别。真正生效的只有两种写法：
-
<bdo dir="ltr">Hello</bdo>：字符从左往右绘制，视觉顺序不变（但会强制覆盖 UBA，仅在混合 RTL 文本中才有可见影响） -
<bdo dir="rtl">Hello</bdo>：字符从右往左逐个排布，纯英文会显示为olleH（注意：不是镜像翻转，是字符串反转）
bdo dir="rtl" 不等于 div dir="rtl"
两者语义和效果完全不同：
-
<div dir="rtl">مرحبا 123</div>：告诉浏览器“这段内容语言方向是 RTL”，让 Unicode 双向算法（UBA）正确处理阿拉伯语词、英文单词、数字三者的相对位置 -
<bdo dir="rtl">مرحبا 123</bdo>：跳过 UBA，直接把每个字符（包括空格、标点）按 RTL 顺序重排，结果变成321 اجبهرم（空格也被翻转）
如果你要的是自然混排（比如阿拉伯语段落里嵌入正常顺序的英文 URL），用 div + dir；如果要调试 UBA 行为或实现倒序动效，才用 bdo。
立即学习“前端免费学习笔记（深入）”；
别用 bdo 实现视觉镜像
想让文字看起来像照镜子（每个字母左右翻转），只靠 bdo dir="rtl" 不行——它只改顺序，不改字形。
真正可行的最小方案是：
- 用 CSS
transform: scaleX(-1)翻转字形 - 必须同时设
dir="ltr"或direction: ltr，否则光标、选区、复制内容全乱 - 推荐写法：
<bdo dir="ltr" style="transform: scaleX(-1);">Text</bdo>
注意：transform 后文字不可读，仅限装饰性用途；复制出来仍是原字符串，屏幕阅读器也按原始顺序朗读。
表单控件、用户输入千万别套 bdo
input 和 textarea 内部方向由自身 dir 属性控制，bdo 会破坏光标定位、退格逻辑、粘贴行为。
正确做法是：
- 全局 RTL 页面中，英文输入框写
<input dir="ltr"> - 阿拉伯语输入框写
<input dir="rtl"> - 动态用户名等不确定方向的内联内容，用
<bdi>{{name}}</bdi>隔离，而不是bdo
bdo 是极窄场景工具，不是方向修复补丁。滥用它会让复制、可访问性、输入体验全面崩溃。
