阿拉伯语网站的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
<div style="direction: rtl;">1 2 3 4 5 6</div>
<div style="text-align:right;">1 2 3 4 5 6</div>

效果如下

1 2 3 4 5 6
1 2 3 4 5 6

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

1
2
3
4
5
6
<div style="direction: rtl;">This is my blog.</div>
<div style="text-align:right;">This is my blog.</div>
<div style="direction: rtl;">这是我的博客。</div>
<div style="text-align:right;">这是我的博客。</div>
<div style="direction: rtl;">هذا هو بلدي بلوق.</div>
<div style="text-align:right;">هذا هو بلدي بلوق.</div>

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

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

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

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

1
2
3
<div style="direction: rtl; unicode-bidi:bidi-override">This is my blog.</div>
<div style="direction: rtl; unicode-bidi:bidi-override">这是我的博客。</div>
<div style="direction: rtl; unicode-bidi:bidi-override">هذا هو بلدي بلوق.</div>
This is my blog.
这是我的博客。
هذا هو بلدي بلوق.

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

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

1
html {direction: rtl;}

这样也可以:

1
<html dir="rtl">

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

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

1
2
3
4
<label for="user_name" style="float:left; width:200px">إسم المستخدم:</label>
<input id="user_name" type="text" name="user_name" style="float:left"><br>
<label for="user_password" style="float:left; width:200px">كلمة السر:</label>
<input id="user_password" type="password" name="password" style="float:left">

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

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

1
2
3
4
<label for="user_name" style="display:inline-block; width:200px">إسم المستخدم:</label>
<input id="user_name" type="text" name="user_name" style="display:inline-block"><br>
<label for="user_password" style="display:inline-block; width:200px">كلمة السر:</label>
<input id="user_password" type="password" name="password" style="display:inline-block">

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

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

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

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/453.html。百度和各类采集站皆不可信,搜索请谨慎鉴别。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以查看本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。