HTML Academy · 课时

用于从右向左文本的 dir=rtl

Q: 「用于从右向左文本的 dir=rtl」这节课中我会学到什么？

为阿拉伯语、希伯来语及其他从右向左语言启用 RTL 布局 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

为阿拉伯语、希伯来语及其他从右向左语言启用 RTL 布局

用于从右向左文本的 dir=rtl 是 CoddyKit 上的免费 HTML Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

dir 属性的作用

dir 属性声明元素的基本文字方向。dir="ltr" 表示从左到右（大多数语言的默认方向），dir="rtl" 表示从右到左（用于阿拉伯语、希伯来语、波斯语和乌尔都语）。

在 html 上设置全站 RTL

对于阿拉伯语、希伯来语、波斯语和乌尔都语网站，请在根元素上设置 dir="rtl"。这会翻转每个块级元素的默认流向：文本右对齐，列表向右缩进，滚动条移到左侧，并且现代 CSS 下的布局会自动镜像。

<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>

双向文本

混合方向的文本（例如包含嵌入式英文品牌名称的阿拉伯语文本）会自动遵循 Unicode 双向算法。基本方向（由 dir 指定）控制单向文本片段在线级别上的排列方式；各个字符序列则按照其所属文字系统的自然方向排列。

CSS 逻辑属性

现代 CSS 使用能够适应方向的逻辑属性：margin-inline-start（LTR 中为左侧，RTL 中为右侧）、padding-inline-end、border-inline-start。将左/右方向值替换为 start/end 后，一份样式表就能同时服务于两种方向。

/* Works in both directions */
.card {
  padding-inline-start: 16px;
  margin-block-end: 12px;
  border-inline-end: 1px solid #ccc;
}

Flexbox 和 Grid 会自动适应

Flexbox 的行方向会遵循 dir：在 RTL 中，项目会从右向左排列。Grid 的模板列也会反转。这意味着使用 flex 或 grid 编写的大多数布局无需任何特定方向的 CSS 就能在 RTL 中工作——现代布局与方向无关。

应当翻转的图标

有方向性的图标（返回箭头、下一步箭头、撤销/重做）在 RTL 中必须翻转。可以在 [dir="rtl"] 内使用 CSS transform: scaleX(-1)，或者提供单独的 RTL SVG 版本。没有方向性的图标（搜索、设置、齿轮）保持不变。

[dir="rtl"] .icon-back {
  transform: scaleX(-1);
}

文本对齐

优先使用 text-align: start，而不是 text-align: left——start 在 LTR 中解析为左侧，在 RTL 中解析为右侧。end 也是如此。感知方向的对齐方式可以消除添加 RTL 支持时的一类错误。

按元素覆盖 dir

在元素上设置 dir="auto"，让浏览器根据第一个具有明确方向性的字符检测方向：<p dir="auto">{user.name}</p> 可以处理用户提交的姓名，无论姓名使用阿拉伯文、英文还是混合文字，都无需进行特殊处理。

双向嵌入

bdi（双向隔离）和 bdo（双向覆盖）元素可以细致控制双向算法处理特定文本的方式——当需要逐字重现用户输入，或需要在连续文本中强制代码片段使用特定方向时，这非常有用。

表单字段

输入框会从父元素继承 dir。对于方向可能变化的用户输入文本（例如包含多语言用户的聊天应用），请在各个输入框上设置 dir="auto"，让每个输入框根据自身内容正确显示。

测试 RTL 布局

浏览器允许您在 DevTools 控制台中临时设置 document.documentElement.dir = "rtl" 来预览 RTL。请检查图标方向、内边距/外边距、滚动条位置，并确认没有元素使用本应改为 start/end 的硬编码左/右值。

CSS 方向不同于布局方向

CSS 的 direction 属性和 HTML 的 dir 属性对大多数布局具有相同的效果。优先使用 HTML 属性，因为辅助技术、邮件客户端和其他使用方都能读取它，而 CSS 属性只会影响浏览器中的渲染。

知识检查

支持 RTL 语言时，为什么优先使用 margin-inline-start 这样的 CSS 逻辑属性，而不是 margin-left？

总结

在 <html> 上设置 dir="rtl"，会为阿拉伯语、希伯来语、波斯语和乌尔都语网站翻转基本方向。CSS 逻辑属性（margin-inline-start、padding-block-end）会自动适应。Flexbox/Grid 布局无需修改就能镜像。请翻转有方向性的图标，使用 text-align: start/end，并对方向未知的用户内容使用 dir="auto"。

常见问题解答

「用于从右向左文本的 dir=rtl」课时是免费的吗？

是的 — 「用于从右向左文本的 dir=rtl」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「用于从右向左文本的 dir=rtl」这节课中我会学到什么？

为阿拉伯语、希伯来语及其他从右向左语言启用 RTL 布局你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

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

「用于从右向左文本的 dir=rtl」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 HTML Academy