理解RTL基础：方向感知、镜像布局、阅读顺序、书写模式、Bidi算法简介

RTL（Right-to-Left）适配的核心在于理解布局系统如何响应文本方向的变化。本章从五个基础概念入手，建立 RTL 适配的技术认知框架，为后续控件级适配打下理论基础。

1.1 LTR 与 RTL 的核心差异

全球约 70% 的语言使用 LTR（如英语、中文），约 30% 使用 RTL（如阿拉伯语、希伯来语、波斯语、乌尔都语）。两种方向在布局层面存在系统性差异：

1.2 方向感知：从物理到逻辑

方向感知（Direction Awareness）是指布局系统能够识别并响应文档的阅读方向。现代 CSS 通过逻辑属性将物理坐标（left/right/top/bottom）映射为逻辑坐标（start/end/block-start/block-end），从而实现方向自适应。

物理属性 vs 逻辑属性对照：

代码示例：使用逻辑属性替代物理属性

/* ❌ 物理属性 —— RTL 下需要覆盖重写 */
.card {
    margin-left: 16px;
    padding-right: 12px;
    border-left: 2px solid #333;
}

/* ✅ 逻辑属性 —— 自动适配 LTR / RTL */
.card {
    margin-inline-start: 16px;
    padding-inline-end: 12px;
    border-inline-start: 2px solid #333;
}

1.3 镜像布局：对称与不对称

镜像布局（Mirror Layout）是指将 LTR 布局沿垂直轴线水平翻转，以适应 RTL 阅读习惯。但并非所有元素都应镜像——需要区分对称型与非对称型元素。

需要镜像的元素：

• 页面整体栅格与栏位顺序
• 文本对齐方式（左对齐 ↔ 右对齐）
• 导航栏条目顺序
• 前进 / 后退图标方向
• 时间线、进度条方向
• 表单标签与输入框的左右排列

不需要镜像的元素：

• 数字、电话号码、银行卡号（始终保持 LTR）
• 科学公式、数学符号
• 音乐符号、乐谱
• 代码片段（保持原方向）
• 地图坐标、经纬度
• 品牌 Logo 中的图形方向（通常保持）

1.4 阅读顺序与书写模式

HTML 的 dir 属性控制文本的阅读顺序，CSS 的 writing-mode 控制书写方向。两者共同决定了文档流的物理走向。

HTML dir 属性：

<!-- 设置文档为 RTL 方向（推荐在 html 标签上设置） -->
<html dir="rtl" lang="ar">
<body>
    <p>السلام عليكم</p>
</body>
</html>

<!-- 局部覆盖方向 -->
<span dir="ltr">hello@example.com</span>

CSS writing-mode 属性：

/* 垂直书写（中文古籍风格） */
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* 水平书写（默认） */
.horizontal-text {
    writing-mode: horizontal-tb;
}

dir 与 writing-mode 的协作关系：

1.5 Bidi 算法简介

Unicode 双向算法（Bidirectional Algorithm，简称 Bidi）是处理混合方向文本（如阿拉伯语中嵌入英文）的底层规范。它定义了字符如何根据方向属性排序和呈现。

字符方向分类：

Bidi 算法的三个核心步骤：

1. 分解（Resolution）： 将文本按字符方向类型标记，识别强 LTR、强 RTL、弱字符和中性字符。
2. 嵌入（Embedding）： 根据 Unicode 嵌入级别（dir 属性和 bidi 控制字符）分配嵌套方向层。
3. 重排（Reordering）： 按解析后的方向顺序输出字符序列，生成最终视觉排列。

1.6 开发者行动清单

基于本章的基础概念，RTL 适配的起点应落在以下可执行动作上：

• 项目初始化： 在 <html> 标签上设置 dir="rtl"，并在 CSS 中引入逻辑属性体系。
• 样式审计： 扫描所有 left / right 物理属性，逐步替换为 inline-start / inline-end 逻辑属性。
• 图标审查： 确认前进、后退、展开、折叠等图标在 RTL 下方向翻转，数字类图标保持原样。
• 文本测试： 使用阿拉伯语或希伯来语测试混合方向文本（如“السلام hello 123”），观察 Bidi 渲染是否正确。
• 工具链配置： 在构建工具中启用 RTL 检测插件（如 PostCSS 的 rtlcss），自动化镜像 CSS。