标签本质是逐字符视觉重排而非设置语言方向，它绕过unicode双向算法，强制按dir="ltr"或dir="rtl"机械翻转所有字符（含数字、标点），如abc123变为321cba；必须显式声明dir属性才生效，不继承父级方向，不改变dom文本值，仅影响渲染视觉顺序。
为什么不是“设方向”而是“翻字符”
标签根本不管语言、语义或上下文，它只做一件事：按 dir 属性指定的方向，把内部所有字符（包括 ASCII 字母、数字、标点）逐个重新排位。这不是 RTL 排版，是字面级视觉倒序。
常见错误现象：<bdo dir="rtl">abc123</bdo> 渲染结果是 321cba，不是 “abc123 右对齐显示”。这是因为 bdo 绕过了 Unicode 双向算法（UBA），直接强制重排——哪怕你只是想让一个 URL 在阿拉伯页面里保持可读，它也会把你整串翻过来。
- 必须显式写
dir="ltr"或dir="rtl"，漏掉就完全不生效 -
dir="auto"在bdo中极少有用，它只看首字符方向，然后机械翻转全部内容，对纯数字或混合弱字符极不可靠 - 它不改变 DOM 文本节点的原始值，
innerText和复制粘贴仍是源顺序，但视觉上已错乱
什么场景下非用不可
只有当 UBA 把中性字符（如 @、.、数字）错误归类并重排，且 CSS 的 direction 和 unicode-bidi 都无法修正时，bdo 才是唯一选择。
典型例子：123@example.com 在 dir="rtl" 页面中被渲染成 moc.elpmaxe@321。这不是样式没生效，是 UBA 把 @ 当作弱字符，根据前后 RTL 上下文把它“拖”到了左边。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 仅包裹最小必要片段，比如只包 URL、版本号、代码片段，不要包整段含中文/英文的句子
- 避免嵌套：外层
bdo dir="rtl"+ 内层bdo dir="ltr"会触发多层重排，行为难预测 - 别用它替代语义化控制——想让整块阿拉伯语文本右对齐，直接给容器加
dir="rtl"即可
和根本不是一回事，别混着用
bdo 是人工覆盖，bdi 是自动隔离。前者说“你给我照这个顺序画”，后者说“你别管外面，自己猜里面该往哪边走”。它们解决的是不同层级的问题。
误用高发区：用户昵称含阿拉伯字母，开发者用 <bdo dir="rtl">{{name}}</bdo>，结果 أحمد123 变成 321أحمد，数字全翻到左边，完全不可读。
- 动态内容（评论、用户名、API 返回字段）→ 一律用
bdi，不用dir属性，也不用bdo -
bdi不接受dir属性，<bdi dir="auto"></bdi>是冗余写法，规范行为就是隐式自动检测 -
bdo没有语义，屏幕阅读器仍按源码顺序读，但视觉已翻转，可访问性风险高
实操时最容易忽略的三个细节
bdo 看似简单，但上线后出问题往往卡在这些不起眼的地方：
- 服务端模板（如 SSR）可能过滤未知 HTML 标签，
bdo被静默删掉，前端看不到效果但控制台无报错 - 它不继承父元素的
dir，所以不能靠外层容器控制，必须每个bdo都显式声明dir - 与 CSS
text-align协同时要注意：先由bdo重排字符，再按该方向做对齐，不是先对齐再翻转
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
