bdo标签必须显式设置小写dir="rtl"或dir="ltr"才有效，其作用是字符级翻转而非右对齐，纯中文会变为“好你”，url等混合内容将被破坏，真实场景中99%应使用dir属性或bdi而非bdo。
直接写 dir="rtl" 或 dir="ltr"，不写就无效
bdo 标签本身不带方向行为，dir 属性必须显式写出，且只能是小写的 "ltr" 或 "rtl"。漏写、写成 DIR="RTL"、dir="auto" 或空值，浏览器都会忽略该 bdo 元素的方向控制，渲染结果等同于普通文本。
常见错误：
-
<bdo>abc</bdo>→ 完全没变化，不是 RTL 也不是倒序 -
<bdo dir="AUTO">abc</bdo>→ 规范禁止，多数浏览器 fallback 到ltr，阿拉伯语会乱成םולש -
<bdo dir="RTL">abc</bdo>→ XHTML 模式下可能被拒解析，HTML5 中部分引擎降级处理但不可靠
bdo dir="rtl" 是字符翻转，不是右对齐
它不改变文本语义或语言方向，而是强制把所有字符（包括字母、数字、空格、标点）按从右到左的顺序逐个绘制。所以 <bdo dir="rtl">Hello 123</bdo> 渲染出来是 "321 olleH"，不是“Hello 123”右对齐显示。
这意味着：
- 纯中文如
<bdo dir="rtl">你好</bdo>变成"好你"，毫无可读性 - URL、代码片段、用户昵称等含混合内容的字段，用它会直接破坏结构（比如
api/v2变成2v/ira） - 复制粘贴出来的仍是原始顺序（
"Hello 123"），视觉和 DOM 值不一致
别和 dir 属性混用，优先用 dir 而不是 bdo
想让一段阿拉伯语文本在英文页面中正常从右向左排版，应该用 <p dir="rtl">مرحبا</p>，而不是 <bdo dir="rtl">مرحبا</bdo>。前者告诉浏览器“这是 RTL 语言”，触发 Unicode 双向算法（UBA）做智能重排；后者是硬翻字符顺序，把 مرحبا 变成 ابحرم，彻底不可读。
真正需要 bdo 的场景极少，仅限：
- 调试 UBA 行为（比如验证某段 ASCII 是否被意外 RTL 化）
- 教学演示：对比
<bdi>Hello عالم</bdi>和<bdo dir="rtl">Hello عالم</bdo> - 装饰性动效（如倒计时数字镜像翻转），但必须叠加
transform: scaleX(-1)才算真正镜像
嵌套 bdo 会叠加翻转，极易出错
外层 <bdo dir="rtl"></bdo> 包内层 <bdo dir="ltr"></bdo>，浏览器先整体翻一次，再对内层内容再翻一次——两次抵消看似安全，但实际取决于字符类型和浏览器实现，尤其混入 Unicode 控制符（如 ）时结果完全不可预测。
更危险的是动态渲染场景：
- Vue/React 中写
<bdo :dir="direction"></bdo>，必须确保direction是严格小写的"ltr"或"rtl"，否则绑定失败 - 服务端模板拼接时，若
dir值来自用户输入且未校验，可能注入非法值导致整个区块渲染异常 - 屏幕阅读器仍按原始 DOM 顺序朗读，
bdo不改变可访问性逻辑
dir 属性、<bdi></bdi> 或 CSS direction 解决。bdo 是手术刀，不是剪刀——切错了，文本就废了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
