Web 应用程序从右到左的样式
Web 应用程序从右到左的样式
了解如何在 HTML 中处理从右到左的文本
开发和创作从右到左 (RTL) 的网站是一项非常规的任务，即使对于经验丰富的前端开发人员也是如此。随着市场需求的增长，开发人员必须了解开发兼容 RTL 的网站需要什么
为什么选择 RTL？
世界上有几种语言（阿拉伯语、希伯来语等）从右到左而不是从左到右阅读其文本。为您的网站添加 RTL 支持很简单，并且可以大大增加其市场。为了迎合 RTL 语言，开发人员必须以特定方式调整他们的开发过程。
如何支持 RTL
在支持 RTL 语言的 Web 应用程序中，一切都是颠倒或翻转的，包括文本、滚动条、进度指示器、按钮等。让我们看一些支持 RTL 的开发指南。
将 dir 和 lang 添加到 HTML
- 添加
目录=“rtl”在<html>元素。浏览器解释 dir 标签并自动翻转和呈现网站内容。 - 添加适当的
郎属性，比如只是=“ar”, 在<html>元素。 lang 全局属性 帮助定义元素的语言 : 编写不可编辑元素的语言，或者用户应该编写可编辑元素的语言
Content rendered in LTR and RTL
调整 CSS 以支持 RTL 渲染
了解了浏览器解释方向标签之后，让我们看看它是如何解释 CSS 的。
让我们以一张卡片为例，其中包含相邻的图像和文本。
Card rendered in both directions
我们可以看到右边的卡片有从右到左渲染的文本，但是边距和图像没有被解释 右到左 .为了支持 RTL，我们的 CSS 需要修改。
**修改方向属性值
** 将图像浮动到右侧并在其左侧应用边距将修复渲染。
.媒体图片{
浮动：对；
左边距：20px；
}
Using dir attribute to override CSS for both RTL and LTR applications
这种方法直截了当，易于理解，但也增加了我们需要编写的 CSS 数量。让我们来看看替代方法……
**使用逻辑 CSS 属性
** 可以自动将我们的内容从右到左对齐，而无需编写额外的 CSS。使用“开始”和“结束”等“逻辑属性”，而不是“左”或“右”。
默认情况下使用逻辑属性可以更轻松地本地化内容或包含具有不同方向的文本。
修改我们的代码以删除图像上的浮动并通过 margin-inline-end 添加 margin-right。
。媒体 {
显示：弯曲；
} .媒体图片{
边距内联端：20px；
}
**创建多个样式表
** 有时，逻辑属性不会产生预期的结果——在这种情况下，我们必须依赖于使用 dir 属性覆盖属性值。这会增加 CSS，我们可能希望通过将所有从右到左的 css 移动来优化它到一个单独的文件。
.wrapper {
位置：绝对；
左：0；
} 。媒体 {
向左飘浮;
左边距：20px；
}
创建一个 rtl.css 将包含所有 RTL 覆盖的文件。可以根据区域设置（语言）有选择地加载此文件。
[dir="rtl"].wrapper {
右：0；
左：初始；
} [dir="rtl"].media {
浮动：对；
右边距：20px；
}
对于大型项目，建议模块化并编译为单个 rtl.output.css 文件。
**自动化 RTL 样式
** 编译两个单独的 CSS 文件，一个用于传统 LTR 语言，一个用于 RTL，是另一种优化方法。像这样的工具 RTLCSS 帮助我们为我们的 CSS 自动创建一个 RTL 对应项。
输出.css
p {
左填充：1em；
字体大小：1rem；
}
输出.rtl.css：
p {
填充权：1em；
字体大小：1rem；
}
RTLCSS 完全支持所有方向敏感的 CSS 属性。此外，它通过CSS注释提供处理指令（忽略，前置，替换，删除，重命名等），因此可以对其进行具体控制。查看 RTLCSS 的工作原理 这里 .
更多关于逻辑属性
CSS 逻辑属性 值提供通过逻辑而非物理方向和维度映射控制布局的能力。逻辑属性定义了其相应物理属性的方向相关等价物
在处理遵循相同模式的 CSS 网格布局或弹性框等布局方法时，考虑开始和结束而不是左右将很有用
在所有主要浏览器上具有互操作支持的常用逻辑值 —
文本对齐：开始 |结尾
证明内容：弹性开始 |弹性端
对齐内容：弹性开始 |弹性端
网格列开始：<value>
网格列端：<value>
内联尺寸：<width>
边距块开始/结束：<value>
边距内联开始/结束：<value>
填充块开始/结束：<value>
填充内联开始/结束：<value>
边界内联开始/结束：<value>
请参考测试 结果 用于逻辑属性和值的浏览器支持。
最后
本文旨在简要解释在 RTL 网站上工作的细节。请参阅提供的链接以获取更多信息。
[
编写 HTML：处理从右到左的脚本
本文档为使用 HTML 标记和 CSS 样式表的内容作者提供有关如何为……创建页面的建议。
www.w3.org
](https://www.w3.org/TR/i18n-html-tech-bidi/)
[
HTML 中的结构标记和从右到左的文本
本文着眼于处理 HTML 中结构标记的文本方向的方法，即。在文档级别和...
www.w3.org
](https://www.w3.org/International/questions/qa-html-dir)
[
构建 RTL 感知的 Web 应用程序和网站：第 1 部分 - Mozilla Hacks - Web 开发人员博客
让更多人以更多语言更容易访问网络，是一项持续的努力，也是我们肩负的使命……
hacks.mozilla.org
](https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1/)
感谢您抽出宝贵时间阅读这篇文章。请就您如何找到它发表评论。
干杯，
-KK
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」