第1章 RTL布局与LTR布局的核心差异

在进行全球化的Web界面适配时，RTL（右到左）布局与LTR（左到右）布局之间的差异是首要理解的基础。两者的核心差异不仅影响视觉呈现，还渗透到CSS属性行为、排版顺序和对齐逻辑中。本章将通过对比和示例，系统拆解书写方向、对齐模式、排版顺序以及受影响的CSS属性，为后续的镜像适配技术奠定扎实的概念基础。

1.1 书写方向（Writing Direction）

书写方向是RTL与LTR最根本的差异。在LTR语言（如英语、中文）中，文字从左向右书写和阅读；在RTL语言（如阿拉伯语、希伯来语、乌尔都语）中，文字从右向左书写和阅读。该由directionCSS属性控制：

/* LTR 默认 */
.element {
    direction: ltr;
}

/* RTL */
.element {
    direction: rtl;
}

同时，HTML根元素也常使用dir="rtl"属性来声明整页方向。书写方向的改变会级联影响文本对齐、列表项目符号位置、表格列顺序以及Unicode双向算法的行为。

1.2 对齐模式

文本对齐和弹性布局的对齐方式在RTL/LTR下会发生镜像反转。下表列举了常见属性在两种方向下的默认行为：

1.3 排版顺序

排版顺序指内容块在页面中的阅读和排列次序。在LTR下，块级元素从上到下、从左到右排列；在RTL下，块级元素从上到下、但水平方向从右到左排列。影响排版顺序的关键因素包括：

• DOM流顺序：HTML源顺序决定文档流，但在RTL下，浮动、定位的left/right以及Flexbox的flex-direction都会反转。
• Flexbox / Grid项目顺序：弹性容器和网格容器的项目顺序默认按照书写方向反向排列，除非显式设置order或grid-auto-flow。
• 表格列顺序：表格列在RTL下从右向左渲染，<th>头也会对应镜像。
• 列表标记位置：无序列表和有序列表的符号（如圆点、数字）在RTL下出现在右侧。

/* Flexbox项目自动反转示例 */
.flex-container {
    display: flex;
    direction: rtl;          /* 项目从右向左排列 */
    justify-content: flex-start; /* 实际起始边变为右侧 */
}

1.4 CSS属性影响

大量CSS物理属性在RTL下需要做镜像适配，否则会出现布局错乱。以下是受影响的属性清单（粗体表示需特别注意）：

• 定位属性：left / right、top / bottom（水平方向需要互换）
• 内外边距：margin-left / margin-right、padding-left / padding-right
• 边框：border-left / border-right、border-radius（如border-top-left-radius会变为右上角）
• 变换：translateX、scaleX、skewX 需要反转方向
• 背景定位：background-position-x 百分比和关键字（如left→right）
• 溢出剪裁：overflow-x、clip-path 中的坐标
• 阴影：box-shadow 的偏移（通常需要取反）

下图清晰地展示了LTR与RTL在书写方向、对齐基线和排布顺序上的镜像关系：