direction: rtl 会改变 text-align 基准、margin-inline 映射、表单光标位置、text-indent 方向等；需配合 unicode-bidi: isolate 隔离混合文本，用 dir="ltr" 包裹数字/英文，并确保字体支持阿拉伯字符。
direction: rtl 会改变哪些元素的默认行为
direction: rtl 不只是让文字“看起来从右往左”，它会触发 CSS 的双向文本（Bidi）算法，影响：text-align 的基准线（text-align: start 变成右对齐）、margin-left/margin-right 的逻辑映射（在 RTL 上下文中，margin-inline-start 才是更安全的选择）、表单控件（如 input 和 textarea）的光标起始位置、以及某些布局方向（比如 flex-direction: row 在 RTL 根元素下仍保持左→右，但 text-indent 和首行缩进方向会翻转）。
直接设 body 或 html 的 direction 往往不够用
仅给 或 body { direction: rtl; } 无法覆盖所有场景：
- 内联元素（如
<span></span>）嵌套在 LTR 段落中时，需显式重置direction，否则继承父级 LTR 行为 - 第三方组件（如日期选择器、富文本编辑器）常自带内联
dir="ltr"，会覆盖外层设置 - 使用
unicode-bidi: embed或unicode-bidi: isolate才能隔离混合文本（如阿拉伯语中夹英文 URL），避免字符顺序错乱 - 某些框架（如 React）动态渲染内容时，若未透传
dir属性，子组件可能回退到浏览器默认 LTR
处理阿拉伯数字和嵌入英文时的典型错误
阿拉伯语文本中混用 ASCII 数字（0–9）或拉丁词（如 “iOS”、“API”）极易出问题，常见现象是数字被强制镜像或英文单词被拆散。关键应对方式：
- 避免依赖
direction单独控制——搭配unicode-bidi: plaintext或unicode-bidi: isolate使用，例如：.arabic-paragraph { direction: rtl; unicode-bidi: isolate; } - 对纯数字串（如电话号码、ID），用
dir="ltr"包一层：<span dir="ltr">+966555123456</span>，否则+966...可能在某些浏览器里显示为...64321555669+ - 不要用
transform: scaleX(-1)强制翻转——这会让点击坐标、光标定位、屏幕阅读器完全失效
font-family 和字体 fallback 必须显式声明支持阿拉伯字符
即使 direction 设对了，如果字体不包含阿拉伯字母形（glyph），浏览器会降级到系统默认字体，而很多中文字体或西文字体（如 Helvetica、system-ui）根本不支持 U+0600–U+06FF 区间，结果是方块或空格。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合写法：
font-family: 'Tajawal', 'Cairo', 'Segoe UI', 'Helvetica Neue', sans-serif;
其中Tajawal和Cairo是 Google Fonts 中专为阿拉伯语优化的开源字体 - 检查实际渲染：打开 DevTools → Elements → 选中文本节点 → Computed → Font → 看 “Rendered fonts” 是否列出阿拉伯语字体，而非 fallback 的
Times New Roman或SimSun - 避免只写
font-family: sans-serif——不同系统对sans-serif的映射差异极大，macOS 可能用Helvetica（无阿拉伯支持），Android 可能用Noto Sans Arabic（有支持）
direction 这一行样式，而在于整条链路：HTML 结构是否带 dir、CSS 是否隔离混合文本、字体是否真正加载并生效、以及第三方脚本是否无意覆盖了方向属性。漏掉任意一环，都可能导致部分文本突然“跑回左边”。 
