让你的从右到左（RTL）网页设计更出色的7个专家技巧

以使用从右向左 (RTL) 语言的网站访客为目标？

这时，您不仅需要将网站翻译成这些语言，还需要调整设计以适应 RTL 格式。不用说，这项工作将比标准的从左到右 (LTR) 翻译项目带来更大的挑战。

这是因为正确的 RTL 格式化有一些细微差别。首先，你不能只是选中所有文本，选择右对齐图标将这些文本右对齐，然后就完事了。有些元素还需要翻转（或 "镜像"），而有些则不需要。如果弄错了，任何以 RTL 语言为母语的人都能立即发现错误。这可不是给人留下好印象的最佳方式。

除此之外，您还需要帮助搜索引擎将您的 RTL 网页提供给 RTL 语言使用者，这样您就能获得高质量的有机流量（和转化率）。

请继续阅读，我们将分享七条专家提示，帮助您以最有效的方式针对 RTL 语言受众优化网站。

什么是 RTL 网页设计？

RTL 是 "从右向左 "的缩写，指文字从页面右侧写向左侧的语言。RTL 语言包括

• 乌尔都语
• 希伯来文
• 波斯语
• 阿拉伯语

主流的网页设计实践主要针对 LTR 语言。因此，如果您要设计一个包含 RTL 语言内容的网站，您就需要使用 RTL 网页设计--换句话说，网页设计实践有助于为 RTL 语言内容提供愉悦的浏览体验。

例如，您可能需要镜像标题、按钮和其他页面元素，以便从右向左显示它们。"镜像 "可以包括

• 将文本从右向左对齐，而不是从左向右对齐。
• 水平翻转元素，例如将前进箭头显示为"←"，而不是传统的 LTR 外观"→"。

(关于镜像，稍后详述）

建立 RTL 网站有哪些好处？

如果您有一个 RTL 网站，您就能满足使用 RTL 语言交流的网站访问者的需求。在全球网站访问者中，这个群体并不小，而且随着时间的推移只会越来越大。

以阿拉伯联合酋长国（UAE）为例，接受 Statista 调查的在线平台商户称，2020 年该国的电子商务活动将平均增长26%。阿拉伯语是阿联酋的官方语言，也是一种 RTL 语言，因此，如果您想在阿联酋市场分一杯羹，就必须以 RTL 格式显示您的网站。

那么，在设计网站时考虑到支持 RTL，您就能做到这一点：

• 提高客户对您品牌的好感度：每个人都可以向 RTL 语言用户提供产品和服务，但不是每个人都能让这样的受众喜欢自己。通过将 RTL 设计融入网站，并对网站内容进行翻译和本地化，您可以帮助 RTL 语言用户了解您的产品及其优势。随着时间的推移，他们可能会逐渐信任您的品牌，并将您视为值得光顾的知名品牌。
• 体验更多转换：当使用 RTL 语言的目标受众能够理解您的产品，喜欢并信任您的品牌，并在您的 RTL 网站上获得流畅的用户体验时，他们就更有可能购买您的产品和服务。
• 提高搜索引擎排名:搜索引擎努力提供最符合搜索者需求的内容。它们可能会认为，一个以 RTL 语言提供内容的网站比另一个以 LTR 语言提供内容的网站更适合 RTL 语言用户，因此 RTL 内容的网站排名更高。

改进 RTL 网页设计的 7 个技巧

要进行 RTL网页开发和设计，您需要了解一些正确的专业技巧。那么，我们将在这里分享的不是一个、两个，而是七个！

然后，将这些提示与 Weglot.我们的网站翻译解决方案不仅能解决翻译方面的问题，还能帮助您在为网站实施 RTL 网页设计时获得最佳效果。

1.了解镜像以及何时有必要使用镜像

如前所述，镜像是将 LTR 网站转换为 RTL 格式的一个重要方面。它包括将页面元素（如文字、标题、图标和按钮）水平翻转，以便从右向左阅读。

您需要借鉴的元素包括

• 指向某个方向或显示移动的图标，如返回按钮或箭头、图表和图形。
• 导航按钮和徽标 通常显示在 LTR 网站的左上角。出于 RTL 网页设计的目的，需要将它们移到右上角。(但是，徽标本身不应水平翻转）。
• 表单标题，通常出现在表单字段的左上方，需要对齐到右上方。
• 日历栏最右边显示一周的第一天，最左边显示一周的最后一天。
• 表列。

不过，并非所有 LTR 语言元素都必须镜像为 RTL。不需要镜像的元素包括

• 没有特定方向的图标，如 "下载 "按钮或垃圾桶图标。
• 带有外文文本的图标，如罗马字母和标点符号（这些图标应本地化）。
• 视频和音频播放器控制
• 日期以标准国际日期格式"YYYY-MM-DD "表示。
• 有意包含在 RTL 文本中的 LTR 语言单词，如 "Google "或 "Kleenex"。
• 数字（及其数位顺序）。

2.考虑 RTL 网页设计的文化因素

准确的 RTL 网页设计不仅仅是翻转图标和文字那么简单。首先，西方文化中的某些概念并不能很好地转换到使用 RTL 语言的社会文化中。如果您的网站文本或图形包含此类概念或图像，请尝试用更符合文化习惯的替代品来替换它们。

例如，如果您的网站使用的是阿拉伯语，而阿拉伯语主要用于穆斯林占多数的国家，那么显示猪存钱罐的图片可能会显得格格不入。这是因为猪在伊斯兰教中被视为不洁的动物。因此，您可以用一个文化上更加中性的硬币罐子来代替猪存钱罐的图片，而不是展示猪存钱罐的图片来传达将钱存放在一个容器中的想法。

此外，请记住，阿拉伯语在所有阿拉伯国家的书写或显示方式并不相同。数字就是一个很好的例子：有些国家使用西方阿拉伯数字（即西方世界通常使用的 0 至 9 数字）。而另一些国家则使用东方阿拉伯数字。因此，在设计您的 RTL 网站时，请务必根据特定目标国家的文化对内容进行本地化，而不仅仅是根据一般的 RTL 语言进行本地化！

3.使用适当的字体

并非所有字体都与 RTL 语言兼容，如果它们无法呈现特定的 RTL 语言字符，则可能会显示称为 "豆腐 "的垂直白色矩形。为避免出现这种情况，请使用支持多种语言（包括 RTL 语言）的多语言字体。Google Noto就是这样一种常用的多语言字体。

或者，将网站设置为以不同字体显示语言。您可以用一种字体显示英语内容，用另一种专门针对该书写系统的字体显示 RTL 语言内容。

此外，请注意其他语言可能不会像英语那样对文本进行加粗或斜体处理。也不能使用缩写。因此，在为您的 RTL 内容选择了合适的字体后，请检查您的内容是否以适当的方式显示和格式化。您还应该测试 RTL 网站文本的可读性，并根据需要调整字体大小和行高。

4.实施 Hreflang 标签

Hreflang 标签是 HTML 代码片段，它告诉搜索引擎，网页的哪种语言版本应显示给具有特定语言和地区设置的用户。如果您为不同地区的受众提供不同语言版本的网页，您就需要在网站上使用它们。然后，您还必须检查您的 hreflang 标签，看看它们是否正确实施。

例如，如果您有一个URL为 "http://www.example.com/us/"的网页，该网页应包含 hreflang 标签：

<link rel=“alternate” hreflang=“en-us” href=“http://www.example.com/us/” />

如果你有一个阿拉伯语版本的相同网页，URL 为 "http://www.example.com/ar/"，供讲阿拉伯语的埃及人使用，该网页应包含此 hreflang 标签：

<link rel=“alternate” hreflang=“ar-eg” href=“http://www.example.com/eg/” />

手动添加 Hreflang 标签可能比较繁琐，但如果使用Weglot 翻译网站内容，它可以自动在网页中添加 hreflang 标签。

5.检查链接格式！

阿拉伯文字的某些字母下面有小圆点，如果在超链接上加下划线（就像您通常为英文超链接所做的那样），就会降低这些小圆点的可见度。这反过来又会影响文本的可读性，因此您需要以不同的方式将超链接与普通文本区分开来。

例如，编写自定义层叠样式表（CSS）规则，在超链接文本下显示半透明框阴影。您还可以使用 CSS，让浏览器跳过阿拉伯字母中央部分下方包含点的下划线。

6.考虑实现网站翻译流程自动化

当您将 LTR 网站转换为 RTL 格式时，您可能还需要翻译（LTR）网站内容。虽然手动翻译这些内容是一种选择，但可能会相当耗时。

更快捷、更高效的方法是使用Weglot 这样的解决方案实现网站翻译流程自动化。一旦您在网站上添加了Weglot ，我们的自动工作流程就会启动，识别所有网站内容。利用机器学习技术，它能立即将这些内容翻译成您指定的 RTL 语言。

Weglot 可自动检测并翻译您添加到网站上的所有新内容，这有助于即时创建网页的翻译版本。为了保持 LTR 到 RTL 语言翻译的一致性，您还可以在Weglot 中设置词汇表规则，这样您就可以始终以特定方式翻译某些单词，而从不翻译其他单词。

7.上线前彻底测试网站

与其他网站修改一样，在公开访问 RTL 网站之前，也要对其进行全面测试。您可以

• 请母语人士和本地化专家审核您的 RTL 网站内容，以确保可读性和语法准确性。
• 检查您的网站在 Chrome、Firefox和其他常用网站浏览器上的显示效果。
• 测试网站在台式机和移动设备（包括 iOS 和 Android 设备）上的可访问性。

如果测试发现任何问题，请在启用 RTL 网站前解决这些问题！

Weglot 如何帮助进行 RTL 网页设计？

如前所述，Weglot 为快速获得高质量的 RTL 文本翻译提供了便捷的解决方案。但我们能提供的帮助远不止将网站内容大规模翻译成 RTL 语言！

有了Weglot，您还可以

• 添加自定义 CSS 规则，根据品牌需求定制 RTL 网站内容的显示方式。
• 在Weglot 控制面板上 为网站内容的关键部分订购专业翻译 。
• 自动实施 hreflang 标签，帮助搜索引擎向搜索者提供正确语言版本的网页。
• 利用Weglot内置的媒体翻译功能，提供图片、视频和其他媒体的适当替换。
• 在Weglot 中央控制面板上管理所有文本和媒体翻译，而无需为同一目的登录多个平台。

使用Weglot开始翻译和本地化 Rtl 网页设计与开发

如果您计划将网站访客定位为主要使用 RTL 语言的国家，那么为您的网站添加 RTL 支持是必须的。内容翻译和本地化是这一过程的重要组成部分，但成功的 RTL 网页设计还不止于此。它还包括镜像必要的页面元素、使用适当的字体显示本地化内容、实施 hreflang 标签等。

因此，Weglot 是进行 RTL 网页开发和设计的重要工具。它包含了为网站内容获取高质量 RTL 翻译、翻译媒体和为每个目标受众实施网站 hreflang 标签所需的功能。您还可以添加自定义 CSS 规则，对 RTL 网站的外观进行微调，使其更加完美。

了解Weglot 运行情况的最佳方式是在您的网站上试用 14 天，您可以在这里创建账户免费试用。