bdo是HTML中唯一强制覆盖默认双向文本算法的元素，它无视上下文直接按指定方向逐字符翻转视觉顺序；而dir仅设置Unicode双向算法的初始基线方向。
什么是 bdo，它和 dir 属性有什么区别
bdo（Bi-Directional Override）是 HTML 中唯一能**强制覆盖默认双向文本算法**的元素，不是简单“设置方向”，而是“彻底重写渲染顺序”。它和 dir 属性有本质不同：dir 只影响 Unicode 双向算法的初始基线方向（ltr/rtl），而 bdo 会无视上下文、字体、Unicode 类型，直接按指定方向逐字符翻转视觉顺序。
常见误用是拿 bdo 当“加粗+换向”或“样式开关”——它不改变语义，也不影响可访问性树中的文本顺序，屏幕阅读器仍按源码读，仅视觉层翻转。
bdo 的正确写法和必须指定的属性
bdo 必须显式声明 dir 属性，否则无效。浏览器不会 fallback 到父元素的 dir 值，也不会继承。
-
<bdo dir="ltr">مرحبا</bdo>→ 强制从左到右显示阿拉伯文字（视觉上变成 “ابحرم”） -
<bdo dir="rtl">Hello</bdo>→ 强制从右到左显示英文（视觉上变成 “olleH”） -
<bdo dir="auto"></bdo>不合法 ——bdo不支持auto
注意：dir 值只能是 "ltr" 或 "rtl"，大小写敏感；写成 DIR="RTL" 在 XHTML 中可能被拒绝解析。
立即学习“前端免费学习笔记（深入）”；
哪些场景真该用 bdo，哪些其实不该用
真正需要 bdo 的情况极少，典型如：
- 嵌入一段已反转的字符串（比如调试输出、密码遮掩后的逆序展示）
- 在 RTL 页面中精确控制某段 LTR 代码片段的光标移动方向（如命令行模拟）
- 展示双向算法异常时的对比样本（教学/测试）
以下情况**不要用 bdo**：
- 单纯让中文/英文“右对齐” → 用
text-align: right - 整块内容是阿拉伯语或希伯来语 → 直接给容器设
dir="rtl"即可 - 想让数字在 RTL 文本中保持正常顺序 → Unicode 本身已处理（EN 字符天然 LTR 中性）
兼容性和容易被忽略的细节
bdo 在所有现代浏览器中支持良好，但有两个关键细节常被忽略：
- 它**不重排换行位置**：如果一行内既有 LTR 又有 RTL 内容，
bdo只翻转其内部字符顺序，不影响断行点 - 它**不改变空格行为**：U+0020 空格仍按原始方向起作用，可能导致视觉错位（尤其混排时）
- 嵌套
bdo会逐层覆盖：外层dir="rtl"+ 内层dir="ltr"= 最内层字符按 ltr 顺序渲染，但整体仍在 rtl 块中对齐
最易出问题的是复制粘贴：bdo 只改显示，不改 DOM 文本节点值，用户 Ctrl+C 复制出来仍是源顺序，前端若依赖剪贴板内容做校验，就会对不上。
