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

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


text-align:right;
direction: rtl;

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


<div style="direction: rtl;">1 2 3 4 5 6</div>
<div style="text-align:right;">1 2 3 4 5 6</div>

效果如下:
阿拉伯语网站的CSS要点总结
对于数字和标点符号以外的编码,顺序仍然是从左到右的:


<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的时候到左侧去了
阿拉伯语网站的CSS要点总结
阿拉伯语的标点在左侧,正是我们需要的效果。

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


<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>

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

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


html {direction: rtl;}

这样也可以:


<html dir="rtl">

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

1.本文由杨琼博客整理发布,部分文章来自网络,如有侵犯权益,请联络博主,资源失效和内容勘误欢迎留言.

2.转载请注明本文地址:http://www.iyangqiong.com/web/116.html

3.订阅更新:您可以通过 RSS订阅本站

【推荐!必备网址导航】http://hao.iyangqiong.com/

分享到:
顶部 评论 底部