unicode-bidi: isolate 是当前最稳妥的解法，它必须配合 direction 使用以提供方向基准，从而隔离双向算法影响，避免阿拉伯语中英文或数字“逃逸”，等效于标签但更可控。
unicode-bidi: isolate 是当前最稳妥的解法，单独用 direction: rtl 无法阻止阿拉伯语段落里英文单词或数字“逃逸”到右侧——这不是样式没生效，而是浏览器根本没启动 Unicode 双向算法（UBA）来重排逻辑顺序。
为什么 direction: rtl 单独失效？
它只改视觉对齐，不参与 UBA 解析。浏览器仍把 ASCII 字符（如 files、2024、.）当作强 LTR 处理，哪怕父容器设了 direction: rtl，它们也会被推到行尾。典型表现：مجلد.txt 渲染成 .txtمجلد，或 ٢٠٢٤ files 显示为 files ٢٠٢٤。
-
direction是纯 CSS 视觉层属性，不影响光标位置、选区方向、括号配对、数字分组（如阿拉伯数字١٢٣） - 表单控件完全无视它：
<input style="direction: rtl">无效，必须写<input dir="rtl"> - 移动端（Safari iOS / Android WebView）尤其保守，对混合文本的自动推断能力弱
unicode-bidi: isolate 必须配合 direction 使用
单独写 unicode-bidi: isolate 不起作用——它需要一个明确的方向基准才能隔离计算。所以实际用法总是成对出现：
span.rtl-text {
direction: rtl;
unicode-bidi: isolate;
}
-
direction提供方向上下文（LTR/RTL），unicode-bidi: isolate告诉浏览器：“这段内容独立算方向，别让它和前后文本互相干扰” - 等效于 HTML 的
<bdi></bdi>标签，但更可控：支持伪类（如bdi:hover）、可 JS 动态切换、能嵌套在 Flex/Grid 容器中不破布局 - 不要用
unicode-bidi: bidi-override：它强制按内存顺序翻转所有字符，Hello 123会变成321 olleH，纯属自毁
动态内容（API 返回、用户输入）必须用 unicode-bidi: isolate
比如展示文件路径 مجلد/file.txt 或错误信息 Error: file not found，你不能给整个卡片加 dir="rtl"（怕破坏布局），也不能靠父容器的 direction 继承——因为 UBA 不继承，只靠解析阶段的语义入口。
- 推荐写法：
<span style="direction: rtl; unicode-bidi: isolate">مجلد/file.txt</span> - 若需自动探测首字符方向（阿拉伯字母→RTL，拉丁字母→LTR），直接用
<bdi></bdi>，而非dir="auto"+unicode-bidi: isolate的组合——后者冗余且无额外收益 -
dir="auto"和unicode-bidi: isolate能混用，但没必要；二者目标一致，只是层级不同：一个是 HTML 语义层，一个是 CSS 控制层
嵌套 LTR 内容必须显式重置，不能依赖继承
外层 dir="rtl" 下，一段英文 URL 或日志片段极易错位：冒号 :、斜杠 /、括号可能被错误包裹进 RTL 上下文。这不是 bug，是 UBA 在 RTL 基方向下对中性字符的自然推导结果。
- 正确做法是给这段内容加
dir="ltr"，而非仅靠direction: ltr—— 因为dir是语义入口，能确保从解析阶段就建立独立 LTR 上下文 - 若只能用 CSS（如 SSR 场景延迟注入），则必须同时写：
direction: ltr; unicode-bidi: isolate; - 避免滥用
<bdi></bdi>：它只应在动态插入不可信文本时用（防方向注入篡改），静态内容优先用dir="auto"
dir 属性决定解析起点，CSS 的 unicode-bidi 决定隔离边界，两者缺一不可；而绝大多数混乱，都源于只动了一边。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
