dir="rtl"比direction:rtl更关键，因前者触发Unicode双向算法确保混合文本正确排序，后者仅影响CSS盒模型布局。
HTML 原生支持阿拉伯语的 RTL（从右向左）排版，但仅靠 direction: rtl 不足以正确渲染——必须用 dir 属性触发 Unicode 双向算法，否则数字、英文嵌入、括号顺序、光标移动、文本选择都会出错。
为什么 dir="rtl" 比 direction: rtl 更关键
direction: rtl 只影响 CSS 盒模型（比如 text-align 默认变 right、float 行为翻转），但不会改变 Unicode 层面的字符顺序逻辑；而阿拉伯语中常混排阿拉伯数字（١٢٣）、拉丁字母（如品牌名、URL）、括号（）和标点，这些必须由浏览器按 Unicode 双向算法（UBA）重排序——这只有 dir 属性能触发。
- 错误做法：
body { direction: rtl; }—— 光标在混合文本里跳转错乱，选中文本时顺序反常，复制出来是乱序 - 正确起点：
<html dir="rtl">或运行时执行document.documentElement.setAttribute("dir", "rtl") - lang 也得同步设：
document.documentElement.setAttribute("lang", "ar")，否则屏幕阅读器和搜索引擎可能忽略语言意图
Gradio / Ant Design 等框架的 RTL 适配要点
这类 UI 框架默认不启用完整 RTL 支持，需手动补全，且方式各异：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Gradio：无内置
direction配置，需注入全局样式 + 动态检测语言，例如在head中插入style块，并监听i18n.language === "ar"后调用document.documentElement.setAttribute("dir", "rtl") - Ant Design：必须包裹
<ConfigProvider direction="rtl">，否则Button、Input等组件内部图标、间距、对齐仍按 LTR 渲染 - 自定义组件：若用了
flex-direction: row-reverse翻转布局，注意别误翻转 SVG 图标（应单独加transform: scaleX(-1)或用 RTL-aware 图标库）
阿拉伯语排版常见坑与绕过方式
RTL 不是简单“镜像翻转”，很多细节会悄悄破坏可读性：
立即学习“前端免费学习笔记（深入）”；
- 滚动条位置：Chrome 下
direction: rtl会让横向滚动条默认在左侧，但用户预期仍是右侧操作；可加body { direction: ltr; overflow-x: auto; } .rtl-container { direction: rtl; }分离控制 - 数字显示：阿拉伯语区有两套数字（西方数字
123和东阿拉伯数字١٢٣），用Intl.NumberFormat("ar-EG").format(123)才能输出符合本地习惯的格式 - 换行断裂：阿拉伯语单词连写，
word-break: break-word会切开词根；应改用word-break: keep-all+white-space: normal - 按钮顺序：确认按钮放左、取消放右，但不能只靠
margin-left/margin-right切换——建议封装useRTLHook，统一管理marginStart/marginEnd类语义属性
真正难的不是加 dir="rtl"，而是验证所有混合文本场景：URL 中的路径、错误提示里的变量插值、时间戳中的英文缩写、输入框 placeholder 的光标行为……这些地方一旦漏掉 dir 继承或 unicode-bidi: plaintext 保护，用户立刻感知到“不对劲”。
