阿拉伯语

在 HTML 中，文档的排版方向通常继承自其父元素的显式设置（dir 属性）。若未设置 dir 属性，则文档的默认排版方向是 ltr（从左到右）。然而，阿拉伯语遵循 rtl（从右到左）的阅读习惯，这与默认的排版方向相反。

提示
  • ltr (left to right)：文本从左向右排列，适用于从左向右书写的语言（比如英语）。
  • rtl (right to left)：文本从右向左排列，适用于从右向左书写的语言（比如阿拉伯语）。

支持阿拉伯语的文档排版方向​

假设页面上显示了一条文案为 这是一段正常顺序的文本，当客户用阿拉伯语访问页面时，期望看到的文案语序应该是 本文的序顺常正段一是这。为实现遵循阿拉伯语的文字排版方向，需完成如下步骤。

步骤一：添加全局 dir 属性​

在 <html> 标签中添加 dir 属性，将其值指定为 request.document_direction。

这样，页面渲染时会根据当前语种自动下发排版方向。例如，当前语种为英语时，下发的排版方向是 ltr；当前语种为阿拉伯语时，下发的排版方向则为 rtl。代码示例如下。

<html dir="{{request.document_direction}}">
  ...
</html>

步骤二：生成 rtl 排版 CSS 文件​

在构建主题代码时，可借助 RTLCSS 工具自动转换 CSS 文件中相应的属性，以适配 rtl 排版方向。该工具会生成两份 CSS 文件，一份用于 ltr 排版方向，另一份用于 rtl 排版方向。文件示例如下。

ltr 排版 CSS 文件内容​

.example {
  display: inline-block;
  padding: 5px 10px 15px 20px;
  margin: 5px 5px 15px 8px;
  border-width: 1px 2px 3px 4px;
}

rtl 排版 CSS 文件内容​

.example {
  display: inline-block;
  padding: 5px 20px 15px 10px;
  margin: 5px 8px 15px 5px;
  border-width: 1px 4px 3px 2px;
}

总结​

对比两个文件可以发现，在 rtl 排版方向 CSS 文件里部分属性中涉及水平方向（左右）的数值进行了互换，从而实现了从右向左的排版方向。

步骤三：在主题代码中引入 CSS 文件​

你可以根据 request.document_direction 的值来决定引入 ltr 排版方向 CSS 文件还是 rtl 排版方向 CSS 文件。

{{#if request.document_direction == "rtl"}}
  <link rel="stylesheet" href="{{"example.rtl.css" | asset_url()}}" />	// 从右到左
{{#else /}}
  <link rel="stylesheet" href="{{"example.css" | asset_url()}}" />			// 从左到右
{{/if}}

最佳实践​

内联 CSS 支持 rtl 排版​

在一些特殊场景下，你可能需要内联 CSS 样式，但这些 CSS 样式无法通过 RTLCSS 工具自动化处理。为解决这个问题，可以通过 request.document_direction 设置条件判断。代码示例如下。

<style>
{{#if request.document_direction == "rtl"}}
  .example {
    padding: 5px 20px 15px 10px;
  }
{{#else /}}
  .example {
    padding: 5px 10px 15px 20px;
  }   
{{/if}}
</style>
提示

建议主题优先使用 <link> 标签引入外部 CSS 文件。这不但在一定程度上能优化性能，还能通过工具统一处理文档的排版方向。

SVG 图标支持 rtl​

在一些文字与 SVG 图标组合排版的场景下，只进行 rtl 排版设置可能无法达到你的期望效果，示例如下。

在 rtl 排版模式下：

对比两处展示结果可以发现，在 rtl 排版模式下的箭头依然向右。你还需给 SVG 图标设置 CSS 镜像处理，代码示例如下。

.icon {
  transform: matrix(-1, 0, 0, 1, 0, 0);
}

应用该样式后，即可看到期望中的 rtl 排版效果：

主题应用扩展支持 rtl 排版​

主题应用扩展 底层支持适合阿拉伯语的 rtl 配置，具体参考 rtl_stylesheet 字段说明。

强制 ltr 排版​

一些特定元素（如价格和货币）是不期望 rtl 排版模式（从右到左）的。针对这些元素，可使用 CSS 的 direction 和 unicode-bidi 属性强制设置 ltr 排版，代码示例如下。

.price {
  direction: ltr;
  unicode-bidi: isolate;
}
这篇文章对你有帮助吗？
SHOPLINE
SHOPLINE
SHOPLINE Enterprise
条款协议
隐私
条款
开发者协议
LinkedInEmail
LinkedInEmail
© Copyright 2013-2026 SHOPLINE Limited.