CSS文本方向direction和unicode-bidi的定义和使用


direction

css中 direction属性决定了文本的渲染方向(位置和书写方向)。unicode-bididirection两个属性结合使用可以改变文字书写顺序。

direction常用值

属性值 说明
inherit 继承父元素属性值
ltr 从左到右
rtl 从右到左

direction属性规定了默认书写顺序,这是区别于text-align的地方,后者只规定文本位置,而不规定书写方向。

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

输出结果:

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

unicode-bidi

似乎有direction就可以解决书写方向的问题了,那unicode-bidi有什么用?

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

unicode-bidi常用值

属性值 说明
normal 默认书写顺序
embed 对于内联元素,该值会为双向算法打开一个额外的嵌入级别,嵌入级别的方向是由direction属性给出的
bidi-override 严格按照direction属性的值重排序,忽略隐式双向运算规则
this is a test
this is a test
this is a test

输出结果:

this is a test this is a test this is a test
  • 第一行文本右对齐,英文是默认从左到右书写顺序,但未执行direction:rtl严格的从右往左颠倒书写顺序,没毛病。
  • 第二行文本不但右对齐,而且是违背英文正确书写顺序的颠倒书写顺序,原因是unicode-bidi:bidi-override使用direction:rtl严格的从右往左颠倒书写顺序覆盖了英文默认的左到右书写顺序
  • 第三行在第二行的基础上给span内联元素加上了unicode-bidi:embed,使得span内的文本是正确的英文书写顺序。目前的理解是unicode-bidi:embed把父元素direction:rtl的严格书写顺序属性隐藏了。所以结果是同第一行一样是非严格的direction:rtl书写顺序。

小总结

对于单个数字、字母浏览器不能判断语言书写顺序的就用direction:rtl默认设置了,英语等还是使用默认的左到右的方式,只能用unicode-bidi启用严格模式的direction:rtl

是否启用direction:rtl严格模式和具体语言有关,比如对于阿拉伯语和希伯来语默认不启动就好。在声明的时候指定语言为阿拉伯语页面会自动启用严格的书写顺序direction:rtl

指定页面语言为阿拉伯语