HTML中必须用dir属性和unicode-bidi: isolate组合控制双向文本，因direction仅影响视觉对齐而不改变逻辑顺序；dir="rtl"触发完整Bidi重排，影响光标、选区及数字分组，而unicode-bidi: isolate提供安全隔离，防止方向污染。
别用 direction 单独控制双向文本显示——它只改对齐，不改逻辑顺序；真正起效的是 dir 属性和 unicode-bidi: isolate 的组合。
为什么 direction: rtl 有时让数字或标点“跑偏”
因为 direction 是纯视觉层 CSS 属性，只影响块级对齐和行内盒排列，不参与 Unicode 双向算法（Bidi Algorithm）。浏览器仍按默认 LTR 逻辑解析混合文本，导致阿拉伯语后跟的英文点号 . 或数字被错误包裹进 RTL 上下文，出现 مجلد.txt 这类错序。
-
dir="rtl"才是语义化入口：它触发完整 Bidi 重排，影响光标行为、选区方向、数字分组（如 ١٢٣）、括号配对 -
direction: rtl在表单输入框中完全无效——<input dir="rtl">才能让光标从右开始 - 父元素设了
direction: rtl，子<span>不会继承 Bidi 环境，但dir="rtl"会继承
unicode-bidi: isolate 是最安全的隔离方案
当你有一段不可预知方向的文本（比如用户昵称、API 返回的文件名），又不能给整个容器加 dir（怕影响布局），就该用 unicode-bidi: isolate 配合 direction。
-
unicode-bidi: isolate告诉浏览器：“这段内容独立成一个 Bidi 段落，别让它和前后文本互相干扰” - 它等价于手动插入
（LRI）和（PDI），但更可靠、无编码污染 - 比
bdi标签更可控：可动态设置、支持伪类、能配合 JS 切换 - 不要用
unicode-bidi: bidi-override—— 它强制重排所有字符，会让 “Hello 123” 变成 “321 olleH”
什么时候必须用 <bdi> 而不是 div + style
当文本方向与父容器不一致，且内容来自外部（用户输入、日志、URL、错误信息），就必须用 <bdi>。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
<bdi>是 HTML5 原生语义标签，隐式等价于dir="auto" unicode-bidi: isolate - 它自动探测首字符方向：遇到阿拉伯字母就进 RTL，遇到拉丁字母就保持 LTR，无需你判断语言
-
<div dir="auto">不够——它只设方向，不建隔离边界；<div style="unicode-bidi: isolate">缺少dir，无法触发自动探测 - 典型误用：
<span class="rtl">مجلد/file.txt</span>→ 错乱；应改为<bdi>مجلد/file.txt</bdi>
dir="auto" 和 unicode-bidi: isolate 能混用吗
可以，但没必要。二者目标一致，只是层级不同：dir="auto" 是 HTML 层语义，unicode-bidi: isolate 是 CSS 层控制。实际项目中优先选其一即可。
-
<p dir="auto">...</p>：适合整段内容方向不确定，且你信任浏览器自动探测（现代浏览器支持良好） -
<span style="unicode-bidi: isolate; direction: rtl">...</span>：适合已知内容为 RTL，但需防止外溢干扰（比如在 LTR 表格中嵌入阿拉伯语单元格） - 避免同时写：
<span dir="auto" style="unicode-bidi: isolate">—— 多余，且在旧版 Safari 中可能触发双重隔离异常
真正容易被忽略的点是：direction 和 unicode-bidi 不会改变 DOM 结构或文本节点顺序，它们只影响渲染时的视觉重排。如果你发现某段文本始终错乱，先检查是否漏了 dir 属性——而不是拼命调 unicode-bidi 的值。
