CSS 文本方向 direction属性

对于英文或中文等语言，默认是从左到右、从上到下进行阅读。然而，并非所有语言都是如此，还有许多从右向左阅读的语言，如阿拉伯语和希伯来语等。

于是，CSS2.1引入了 direction属性，用来定义文本流的书写方向，可选值有 ltr | rtl，默认值为 ltr。ltr（left-to-right）表示文本流从左到右书写，rtl（right-to-left）表示文本流从右到左书写。

direction属性影响块级元素中文本的书写方向，但不会影响拉丁文的字母数字字符，它总是从左到右书写，但会影响拉丁文的标点符号。对于行内元素，只有当 Unicode-bidi 属性设置为 embed 或 bidi-override 时才有效。不支持双向文本的浏览器可以忽略这个属性。

这里定义两个类，一个类的 direction属性设置为 ltr，一个类的 direction属性设置为 rtl。CSS代码如下：

1. .ltr {
2. direction: ltr;
3. }
4. .rtl {
5. direction: rtl;
6. }

然后，把这两个类应用到两个段落，让第一个段落中的文本从左到右书写，让第二个段落中的文本从右到左书写。HTML代码如下：

1. <p class="ltr">left-to-right direction.</p>
2. <p class="rtl">right-to-left direction.</p>

上述代码的运行结果如图 3‑23 所示：

图3-23 direction属性效果

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。