阿拉伯语网站的CSS要点总结_网站建设-网站改版-深圳网页设计-品牌高端网站建设-深圳网站建设公司-联兴互动

阿拉伯语不同于其他文字，是从右向左读的，文字要向右对齐，在CSS中右对齐的属性有两条：

1 2	text-align:right;direction: rtl;

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

可以比较这样的代码：

1 2	1 2 3 4 5 6

1 2 3 4 5 6

效果如下

1 2 3 4 5 6

对于数字和标点符号以外的编码，顺序仍然是从左到右的：

This is my blog.

This is my blog.这是我的博客。这是我的博客。هذا هو بلدي بلوق.هذا هو بلدي بلوق.

效果如下，只有标点在rtl的时候到左侧去了

This is my blog.

这是我的博客。

هذا هو بلدي بلوق.

阿拉伯语的标点在左侧，正是我们需要的效果。

你可能还听说过的一条CSS：unicode-bidi:bidi-override

1
2
3

This is my blog.

这是我的博客。هذا هو بلدي بلوق.

This is my blog.

这是我的博客。

هذا هو بلدي بلوق.

所有的字符都倒过来了，中文看起来不错，英文就完全看不懂了，而阿拉伯文和英文混排的场合还是比较多的，这样做显然过头了。

可见如果要实现自右向左的阅读顺序，用到direction:rtl 就够了。direction属性是可继承的，所以常见的做法是给html元素增加一条属性，就能覆盖全局了。

1	html {direction: rtl;}

这样也可以：

对于双语网站，有时候为了排版需要，我们会对一些文字块做text-align:left的处理，这个时候切换到阿拉伯文，虽然文字的阅读顺序还是右至左，但这些文字块的对齐却是靠左的，所以还是需要对它们设置text-align:right

有时候过于依赖浮动的排版，切换到阿拉伯语也会发生让人头疼的问题。比如表单，正常情况下我喜欢把lable固定宽度左浮动，input也左浮动。但阿拉伯语的用户浏览习惯中，lable是要放在右侧的，设置了左浮动的lable即使内部文字顺序是从右开始的，lable本身还是在左侧的：

إسم المستخدم:
كلمة السر:

阿拉伯人表示用不来这样的表单…

应该利用display:inline-block进行顺序布局，

إسم المستخدم:
كلمة السر:

这样才能配合全局的direction得到想要的效果：

最后一点，我们常用的网页正文字体大小，中英文是12px-14px，而这个字体大小对于阿拉伯文字来说就太小了，一般阿拉伯文要设置16px以上才才方便阅读，最常见的是18px：

12px – العربية Arabic 阿拉伯语

14px – العربية Arabic 阿拉伯语

16px – العربية Arabic 阿拉伯语

18px – العربية Arabic 阿拉伯语

阿拉伯语网站的CSS要点总结

分享至微信分享

免费获取网站建设与品牌策划方案报价