---
title: "阿拉伯语"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/best-practice/arabic'
  md: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/best-practice/arabic.md'
---
# 阿拉伯语

在 HTML 中，文档的排版方向通常继承自其父元素的显式设置（[dir](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Global_attributes/dir) 属性）。若未设置 `dir` 属性，则文档的默认排版方向是 `ltr`（从左到右）。然而，阿拉伯语遵循 `rtl`（从右到左）的阅读习惯，这与默认的排版方向相反。

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

***

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

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

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

在 `<html>` 标签中添加 `dir` 属性，将其值指定为 [request.document\_direction](https://developer.shopline.com/zh-hans-cn/docs/sline/object/request.md)。

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

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

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

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

#### ltr 排版 CSS 文件内容

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

#### rtl 排版 CSS 文件内容

```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](https://developer.shopline.com/zh-hans-cn/docs/sline/object/request.md) 的值来决定引入 `ltr` 排版方向 CSS 文件还是 `rtl` 排版方向 CSS 文件。

```html
{{#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](https://github.com/MohammadYounes/rtlcss) 工具自动化处理。为解决这个问题，可以通过 [request.document\_direction](https://developer.shopline.com/zh-hans-cn/docs/sline/object/request.md) 设置条件判断。代码示例如下。

```css
<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` 排版设置可能无法达到你的期望效果，示例如下。

![](https://cdn.myshopline.com/sl/slfs/sl-new/178038647330545/1761570512575-28eb1984-0b24-464e-a9e3-4148d222f6a6.png)

在 `rtl` 排版模式下：

![](https://cdn.myshopline.com/sl/slfs/sl-new/178038650653147/1761570564195-e8b33205-8dd1-4c45-8a37-0d9a9179c998.png)

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

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

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

![](https://cdn.myshopline.com/sl/slfs/sl-new/178038653288974/1761570787756-f07626c5-e1b9-432d-b52e-8f5e7727fb55.png)

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

[主题应用扩展](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/integrate-apps-with-themes/theme-app-extension/overview.md) 底层支持适合阿拉伯语的 `rtl` 配置，具体参考 [rtl\_stylesheet](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/integrate-apps-with-themes/theme-app-extension/structure.md) 字段说明。

### 强制 ltr 排版

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

```css
.price {
  direction: ltr;
  unicode-bidi: isolate;
}
```