在 HTML 中，文档的排版方向一般由文档的父元素显式设置，如果在没有任何显式声明 dir 属性的情况下，文档默认的排版方向是 ltr（从左到右），且继承父元素的排版方向。但阿拉伯语地区的阅读习惯正好和我们的阅读习惯相反，他们习惯的文档排版方向是 rtl（从右到左）。
提示：
-
ltr（left to right）：指从左到右，用于那种从左向右书写的语言（比如英语）
-
rtl（right to left）：指从右到左，用于那种从右向左书写的语言（比如阿拉伯语）
支持阿拉伯语的文档排版方向
假设页面上有一段文本为“这是一段正常顺序的文本”，当我们用阿拉伯语访问页面时，期望展示出来的文案顺序应该是这样的：本文的序顺常正段一是这，只需要你根据以下步骤进行处理：
1. 添加全局 dir 属性
找到 <html> 标签，并给它添加 dir 属性，属性值指定为 reruest.document_direction object，页面渲染时会自动根据语种下发的排版方向；如英语，会下发 ltr，而阿拉伯语会下发 rtl，代码示例如下：
<html dir="{{request.document_direction}}">
...
</html>
2. 生成 rtl 排版 CSS 文件
在构建你的主题代码时，可以借助 RTLCSS 工具，自动转换 CSS 文件内需要适配 rtl 的 CSS 属性，这将会生成两份 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 的属性值，在水平方向上的数值，进行了交换。
3. 在主题代码中引入 CSS 文件
你可以通过 reruest.document_direction object 来决定引入的是 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 工具自动化处理，这时你可以通过 reruest.document_direction object 判断处理。代码示例如下所示：
<style>
{{#if request.document_direction == "rtl"}}
.example {
padding: 5px 20px 15px 10px;
}
{{#else /}}
.example {
padding: 5px 10px 15px 20px;
}
{{/if}}
</style>
**提示：**SHOPLINE 建议主题的 CSS 样式都采用 link 外链文件引入，这不但在一定程度上能优化性能，还能通过工具统一处理文档的排版方向。
SVG 图标支持 rtl
在一些文字 + SVG 图标排版场景下，直接进行 rtl 排版设置可能无法达到你的期望效果，比如：
在 ltr 排版模式下：
在 rtl 排版模式下：
左边的箭头方向，并没有如你期望的那样反转，这时，你只需给 SVG 图标设置 CSS 镜像处理即可，代码示例如下：
.icon {
transform: matrix(-1, 0, 0, 1, 0, 0);
}
现在，你就可以看到期望中的 rtl 效果了：
插件支持 rtl
主题应用扩展底层支持阿拉伯语配置，具体请查阅 rtl_stylesheet 字段说明。
强制 ltr
一些特定的元素是不期望从右到左 rtl 排版的，比如价格货币，针对这些特定的元素，你可以使用 CSS 的 direction 和 unicode-bidi 属性进行强制 ltr 处理：
.price {
direction: ltr;
unicode-bidi: isolate;
}