阿拉伯语网站 CSS 布局方案阿拉伯语（或波斯语，希伯来文等）网站 CSS 布局方案。

参考

背景

国际化市场，二十七国文字，其中免不了“反常态”的语种，比如：阿拉伯语，波斯语，希伯来文等，书写和阅读习惯都是从右向左，所以文字排版也要求是从右向左。

CSS 的 direction 属性

该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。
也就是说定义了 direction:rtl 的元素，文字的书写方向是从右至左。另外 direction 还有控制 text-align 默认值的作用，定义过 direction:rtl 的元素，如果没有预先定义过 text-align，那么这个元素的 text-align 的值就变成了“right”。

html 标签 lang 属性

<html lang="ar">

布局

可以利用 display:inline-block 进行顺序布局。

代码

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>Arabic styles</title>
  <style>
    html {
      font-size: 16px;
    }

    label {
      display: inline-block;
      width: 200px;
    }

    input {
      display: inline-block;
    }
  </style>
</head>
<body>
<p>
  <label for="username">إسم المستخدم:</label>
  <input id="username" type="text">
</p>
<p>
  <label for="password">كلمة السر:</label>
  <input id="password" type="password">
</p>
</body>
</html>

阿拉伯语网站 CSS 布局方案

参考

背景

CSS 的 direction 属性

html 标签 lang 属性

布局

字体大小

代码