图片展示

互动动态/联兴新闻

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

发表时间: 2019-07-13 16:47:03

阿拉伯语不同于其他文字,是从右向左读的,文字要向右对齐,在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
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.
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;}

这样也可以:

1

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

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

1
2
3
4
إسم المستخدم:
كلمة السر:

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


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

1
2
3
4
إسم المستخدم:
كلمة السر:

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

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

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


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

  • 称呼姓名 *

  • 联系电话 *

  • 您的需求 *

  • 获得方案及报价

我们很乐意倾听您的声音!
即刻与我们取得联络,成为日后肩并肩
合作的伙伴。

和我们取得联系

0755-28683525

深圳市龙岗区大运软件小镇66栋4楼

售后热线:0755-28683525

售前专线:18923844518

邮箱:info@lxhd.cn

© 2008-2019 深圳市联兴互动科技有限公司  ALL RIGHTS RESERVED.

客服中心
热线电话
0755-28683525
上班时间
周一到周五