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

Posted 2022-02-14 木秀羽林

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS文本方向direction和unicode-bidi的定义和使用相关的知识，希望对你有一定的参考价值。

direction和unicode-bidi

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

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

<div >1 2 3 4 5 6。</div>

<div >1 2 3 4 5 6。</div>

输出结果:

1 2 3 4 5 6。

1 2 3 4 5 6。

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

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

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

<div >this is a test</div>

<div >
	this is a test
</div>

<div >
	this <span >is a</span> test
</div>

输出结果：

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

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

<html lang="ar">

以上是关于CSS文本方向direction和unicode-bidi的定义和使用的主要内容，如果未能解决你的问题，请参考以下文章