direction和unicode-bidi

2017-11-15 1009

简介：

+关注继续查看

在做多语言页面，接触过阿利伯语、希伯来语的同学肯定了解书写方向的重要性，包括我们五四运动前的书写顺序也是从右到左的。css中 unicode-bidi和direction属性决定了HTML或XML文字渲染方向，两个属性结合使用可以改变文字书写顺序

direction

direction属性有三个值

inherit 使用父元素的设置
ltr 默认值，left to right，从左到右
rtl right to left 从右到左

我们默认的书写顺序是从左到右的，不用做特殊设置，但是对于阿拉伯语是从右到左的，这时候就需要设置direction属性来正确展示了

防止浏览器重写text-align我们做一下默认设置

طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد

<div style="direction:rtl;text-align: initial;">
    طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد    
</div>

对应的也有个html属性dir可以设置

<div dir="rtl" dtyle="text-align: initial;">
    طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد    
</div>

طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد

direction属性局定了默认的书写顺序这是和text-align的区别，后者是对其方向，书写书写顺序不变

<div style="direction: rtl;text-align: initial;">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。

unicode-bidi

貌似有direction就可以应付书写方向的问题了，unicode-bidi是做什么的呢？

浏览器通常根据lang属性或者特殊的font-family决定书写方向，但是如果一句话中同时包括两种方向的文案的时候就需要用到unicode-bidi属性了

unicode-bidi 有三个广泛支持的值

normal 原来是什么顺序就使用什么顺序
embed 作用于inline元素，direction属性的值指定嵌入层，在对象内部进行隐式重排序
bidi-override 严格按照direction属性的值重排序。忽略隐式双向运算规则

说实话这么解释我也看不懂，看个例子

<div style="direction:rtl;text-align: initial;">this is a test</div>

<div style="direction:rtl;unicode-bidi:bidi-override;text-align: initial;">
    this is a test
</div>

<div style="direction:rtl;unicode-bidi:bidi-override;text-align: initial;">
    this <span style="unicode-bidi:embed;">is a</span> test
</div>