用途:为阿拉伯语等从右到左(RTL)语言实现 Web 与移动端布局,适用于用户提出 RTL 布局、阿拉伯语文本方向、双向(bidi)文本等问题时。
主要能力:
- 文档方向:始终在 HTML 属性上设置 <html lang="ar" dir="rtl">,而非仅用 CSS。
- CSS 逻辑属性:用 margin-inline-start/end、padding-inline-start/end、border-inline-start、text-align: start/end、float: inline-start、inset-inline-start 等替代物理方向属性,使布局自动镜像。
- 双向文本:混排阿拉伯语与英文/数字时,用 unicode-bidi: isolate 与 direction: ltr 隔离 LTR 内容;电话号码用 <bdo dir="ltr">,URL/邮箱用 <span dir="ltr">。
- 阿拉伯语排版:推荐字体栈 'Tajawal'、'Assistant'、'Rubik'、'Noto Sans Arabic';字号约 16px、行高 1.7、letter-spacing 保持 normal、word-spacing 约 0.05em。
- 框架配置:Tailwind 优先用逻辑工具类(ms-4、me-4、ps-4、pe-4、start-4、end-4、rounded-s-lg 等),rtl:/ltr: 变体仅用于逻辑属性无法处理的场景(如方向性图标、transform);Next.js App Router 用 next/font 自托管字体并按 locale 设置 dir;React MUI 用 stylis-plugin-rtl 与 createTheme({ direction: 'rtl' })。
- 常见陷阱:方向性图标需镜像、进度条从右向左填充、滑块/轮播方向反转、表单标签右对齐、面包屑分隔符反向、表格对齐、图表 x 轴可能需反转;Flexbox row 在 RTL 下自动反转,再加 row-reverse 会双重翻转。
使用方式:按步骤先设文档方向,再改用逻辑属性,处理 bidi 文本,配置字体与框架,最后逐项检查陷阱。
限制:资料未提供具体版本兼容范围、性能数据或收费信息;示例中的希伯来语文本与阿拉伯语场景存在不一致,实际使用时以阿拉伯语为准。