bdo强制覆盖文本视觉方向，bdi自动隔离并推断方向；bdo用于绕过uba错误重排（如邮箱倒序），必须显式dir属性；bdi适用于用户生成内容的方向防护，不干预原始顺序。
bdo 和 bdi 解决的是完全不同的问题：前者强制翻转字符视觉顺序，后者让浏览器自动识别并隔离方向，不干预原始顺序。混用或误选会导致 RTL/LTR 内容错位、复制粘贴失真、屏幕阅读器读错，甚至表格列宽崩坏。
什么时候必须用 bdo 而不是 CSS 或 dir 属性
当 Unicode 双向算法（UBA）对中性字符（如数字、ASCII 符号、标点）做了你不想要的重排时，bdo 是唯一能绕过 UBA 的手段。
- 典型错误现象：
123@example.com在 RTL 页面中显示为moc.elpmaxe@321—— 这不是 CSSdirection没生效，而是 UBA 把@和.当作弱类型字符重新归类了 -
bdo必须显式写dir="ltr"或dir="rtl"，不支持dir="auto"；漏写dir属性则完全无效 - 它只影响视觉渲染顺序，DOM 文本节点值不变 → 用户 Ctrl+C 复制出来仍是源顺序，前端若依赖剪贴板内容做校验会出错
- 嵌套
bdo会逐层覆盖：外层dir="rtl"+ 内层dir="ltr"= 最内字符按 LTR 顺序画，但整体仍在 RTL 块中对齐
为什么 bdi 是用户生成内容的默认选择
bdi 不设方向，只做隔离：它让浏览器根据首字符的 Unicode 方向属性（如阿拉伯字母是 RTL 强字符）自动推断，并阻止该段文字被父容器方向“拖拽”错位。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 适用场景：用户名、评论、搜索结果、数据库字段等无法预知语言的内容，比如
<bdi>أحمد</bdi>和<bdi>Ahmad</bdi>混在同一个 LTR 列表中，各自保持正确对齐 -
bdi不接受dir属性；写<bdi dir="auto"></bdi>是冗余且易引发误解的，规范行为就是隐式dir="auto" - 它不影响空格、换行、CSS
text-align，但能防止 RTL 文本把后面的句号或图标拉到左边（即“方向溢出”） - 服务端模板中输出动态内容前加一层
<bdi>...</bdi>是低成本高收益的做法，IE10+ 和所有现代浏览器都支持
bdo 和 bdi 混用或替代方案的常见陷阱
二者语义不可互换，也极少需要同时出现。拿它们当“右对齐开关”或“样式补丁”是典型误用。
- 想让整块阿拉伯语文本右对齐 → 直接给容器加
dir="rtl"，不用bdo或bdi - 仅需控制对齐而非方向 → 用 CSS
text-align: right，和双向逻辑无关 - 用
span+dir属性看似等效，但缺乏语义：屏幕阅读器不感知span的方向意图，而bdi明确表达“此段方向需独立判断” -
bdo不改变可访问性树中的文本顺序 → 视觉翻转后，盲人用户仍按源码顺序听到 “olleH”，不是 “Hello”
真正要警惕的不是语法写错，而是没想清楚到底要“控制呈现”还是“保护语义”——bdo 是手术刀，只在 UBA 确实搞砸了才切一刀；bdi 是防护罩，所有不可信的动态文本都该默认套上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
