0Pricing
CSS Academy · 课时

RTL 布局中的逻辑属性

使用逻辑属性构建真正的双向布局，使其能够自动适配阿拉伯语和希伯来语界面。

RTL 布局中的逻辑属性 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

在 HTML 中设置 RTL

使用 dir 属性和匹配的 lang 属性，在 HTML 中声明 RTL：

<div dir="rtl" lang="ar" class="rtl-box">مرحبا بكم في تخطيط RTL</div>

在 CSS 中设置 dir="rtl"

也可以在 CSS 中设置方向，这对于测试或部分 RTL 区域很有用：

<div dir="rtl">هذا العنصر باتجاه RTL</div>

测试 LTR/RTL 切换

快速测试：将 dir="rtl" 添加到 <html>。使用逻辑属性时，布局应当正确镜像。使用物理属性时，您会看到哪些地方需要修复。

会自动适配的内容

设置 dir="rtl" 后，以下内容会通过逻辑属性自动翻转：

  • 文本对齐（start/end）
  • 外边距和内边距（inline-start/end）
  • 边框（inline-start/end）
  • 浮动（inline-start/end）
  • 定位（inset-inline-start/end）

不会自动适配的内容（NOT）

即使使用逻辑属性，以下内容在 RTL 中仍需注意：

  • 包含方向性内容的背景图像
  • 具有明确方向含义的 SVG 图标（箭头、尖括号）
  • 类似 translateX() 的变换——配合方向标志使用 translateX(calc(-1 * var(--offset)))
  • 使用明确像素值的绝对定位

镜像 SVG 图标

CSS 提供了一种简洁的方法，可以在 RTL 中翻转具有方向性的图标：

<div dir="rtl"><span class="icon-arrow"></span> Mirrored arrow in RTL</div>

感知方向的 CSS 变量

一种用于设置感知方向值的 CSS 变量技巧：

<div dir="rtl" class="drawer">Drawer</div>

实用的 RTL 示例

一个使用逻辑属性的卡片组件：

<div dir="rtl" class="card"><span class="card__icon">🔔</span><span class="card__text">تنبيه جديد</span></div>

font-size 与 RTL

某些阿拉伯语字体在相同像素大小下看起来会比拉丁字体更大或更小。如有需要，请针对不同书写系统分别定义 font-size：

<p>Default text (16px)</p>
<p lang="ar">نص عربي (17px)</p>

测试工具

浏览器 DevTools 可以模拟双向布局。还可以使用 Chrome 浏览器的可访问性树，验证对于屏幕阅读器，阅读顺序遵循逻辑顺序，而不是视觉顺序。

实际项目中的 RTL 检查清单

RTL 检查清单：

  • 所有外边距和内边距都使用逻辑属性
  • 所有边框都使用 inline-start/end
  • 文本对齐使用 start/end
  • 方向性图标使用 scaleX(-1) 翻转
  • 在需要时，绝对定位使用 inset-inline-*
  • 可滚动容器从正确的边缘开始滚动

快速检查

在 RTL 布局中，使用哪种 CSS 变换可以最简单地镜像具有方向性的 SVG 箭头图标？

回顾

在 html 元素上设置 dir="rtl"，以启用 RTL 布局。逻辑属性会自动适配外边距、内边距、边框和对齐方式。变换和绝对定位中的物理像素仍需手动考虑 RTL。使用 scaleX(-1) 镜像具有方向性的图标。通过切换根元素上的 dir="rtl" 来进行测试。

常见问题解答

「RTL 布局中的逻辑属性」课时是免费的吗？

是的 — 「RTL 布局中的逻辑属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「RTL 布局中的逻辑属性」这节课中我会学到什么？

使用逻辑属性构建真正的双向布局，使其能够自动适配阿拉伯语和希伯来语界面。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「RTL 布局中的逻辑属性」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 逻辑属性为何重要：国际化
  2. 块方向与行内方向
  3. 逻辑外边距、内边距与边框
  4. RTL 布局中的逻辑属性
← 返回 CSS Academy