2019-07-13 16:47:03
阿拉伯语不同于其他文字,是从右向左读的,文字要向右对齐,在CSS中右对齐的属性有两条:
text-align很常见,也就是简单的右对齐属性。direction就不那么常见了。
CSS手册中对direction属性是这样描述的:该属性指定了块的基本书写方向,以及针对 Unicode 双向算法的嵌入和覆盖方向。
也就是说定义了direction:rtl的元素,文字的书写方向是从右至左。另外direction还有控制text-align默认值的作用,定义过direction:rtl的元素,如果没有预先定义过text-align,那么这个元素的text-align的值就变成了“right”
可以比较这样的代码:
效果如下
对于数字和标点符号以外的编码,顺序仍然是从左到右的:
效果如下,只有标点在rtl的时候到左侧去了
阿拉伯语的标点在左侧,正是我们需要的效果。
你可能还听说过的一条CSS:unicode-bidi:bidi-override
所有的字符都倒过来了,中文看起来不错,英文就完全看不懂了,而阿拉伯文和英文混排的场合还是比较多的,这样做显然过头了。
可见如果要实现自右向左的阅读顺序,用到direction:rtl 就够了。direction属性是可继承的,所以常见的做法是给html元素增加一条属性,就能覆盖全局了。
这样也可以:
对于双语网站,有时候为了排版需要,我们会对一些文字块做text-align:left的处理,这个时候切换到阿拉伯文,虽然文字的阅读顺序还是右至左,但这些文字块的对齐却是靠左的,所以还是需要对它们设置text-align:right
有时候过于依赖浮动的排版,切换到阿拉伯语也会发生让人头疼的问题。比如表单,正常情况下我喜欢把lable固定宽度左浮动,input也左浮动。但阿拉伯语的用户浏览习惯中,lable是要放在右侧的,设置了左浮动的lable即使内部文字顺序是从右开始的,lable本身还是在左侧的:
阿拉伯人表示用不来这样的表单…
应该利用display:inline-block进行顺序布局,
这样才能配合全局的direction得到想要的效果:
最后一点,我们常用的网页正文字体大小,中英文是12px-14px,而这个字体大小对于阿拉伯文字来说就太小了,一般阿拉伯文要设置16px以上才才方便阅读,最常见的是18px: