单独用direction: rtl或ltr无法可靠控制中英文混排方向，必须配合unicode-bidi: isolate才能隔离uba影响；direction仅控制视觉对齐，不参与双向算法解析，而unicode-bidi: isolate提供语义层隔离，需与direction协同生效。
单独用 direction: rtl 或 direction: ltr 无法可靠控制中英文混排方向；必须配合 unicode-bidi: isolate 才能隔离双向算法（UBA）影响，否则中文标点、英文括号、数字顺序大概率错位。
为什么 direction 单独失效？
浏览器默认按 Unicode 双向算法（UBA）推断文本方向，direction 只改视觉对齐和块级布局，不参与 UBA 解析。例如：文件夹 (folder) 在 direction: rtl 容器里可能渲染成 )folder( 文件夹——括号被拉到末尾，因为 UBA 把 ASCII 括号识别为中性字符，在 RTL 基方向下错误包裹。
这不是样式写错了，是浏览器根本没被明确告知：“这段混合文本要独立算方向”。
-
direction是呈现层开关，影响对齐、换行、盒排列 -
unicode-bidi是语义层开关，告诉浏览器“启动/隔离 UBA 计算” - 中英文混排本质是 LTR + 部分强 RTL 字符（如中文标点、阿拉伯数字），UBA 必须被显式干预
unicode-bidi: isolate 是当前最稳妥的选择
它等效于 HTML 的 <bdi></bdi> 标签，会严格隔离该元素内文本的双向计算，不干扰外部，也不被外部干扰。适用于动态内容、用户输入、API 返回字段等不可信文本。
- 必须和
direction配合使用：比如unicode-bidi: isolate; direction: rtl表示“这段内容以 RTL 为基方向独立解析” - 不能只写
unicode-bidi: isolate，否则无方向锚点，UBA 仍按全局默认（LTR）推断 - 在 Safari iOS 和 Android WebView 中支持良好（iOS 15.4+、Chrome 90+）
- 可安全嵌套在
display: flex或display: grid容器中，不破坏布局
embed 和 bidi-override 什么情况下能用？
unicode-bidi: embed 适合已知固定方向的轻量文案，比如阿拉伯语标题里嵌一个英文品牌名 Apple；unicode-bidi: bidi-override 则极危险，它强制按内存顺序翻转所有字符，Hello 123 会变成 321 olleH，仅限调试或纯单向文本场景。
-
embed创建嵌入层，但边界不隔离：前后文本仍可能“渗透”影响括号配对或空格处理 -
bidi-override绕过 UBA 全部逻辑，导致中文引号、英文冒号、斜杠/全部错位，生产环境禁用 - 表单控件（
<input>、<textarea></textarea>）必须用 HTMLdir属性，CSSdirection+unicode-bidi完全无效
容易被忽略的兼容性与物理属性陷阱
即使 unicode-bidi: isolate 写对了，也可能白忙一场——常见失效点不在 CSS 本身，而在配套缺失。
- 父容器未声明
direction（哪怕只是direction: ltr），unicode-bidi: isolate就失去方向锚点 - 字体缺失中文/英文混合字形支持，比如 iOS 上 San Francisco 对中文标点 fallback 弱，显示方块或错位
- 用了
margin-left或text-align: right代替逻辑属性，RTL 下依然往左推、对齐失效 - 服务端渲染（SSR）场景下，CSS 注入延迟会导致 FOUT（Flash of Unstyled Text），应优先在 HTML 根节点加
dir="rtl"或dir="ltr"
真正起效的不是某一行 CSS，而是 dir 属性触发的语义层重排 + unicode-bidi: isolate 提供的隔离边界 + 字体与逻辑属性的协同。少一环，混排就可能崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
