css中unicode-bidi和direction属性决定了HTML或XML文字渲染方向,两个属性结合使用可以改变文字书写顺序。
direction属性有三个值:
ltr : 默认值,文本流从左到右rtl : 文本流从右到左inherit : 继承父元素的设置
例如设置右对齐:<div style=”direction:rtl;”>this is a test!</div>
还可以:<div dir=”rtl”>this is a test!</div>
效果如图:
代码示例请戳:direction.html 便宜美国vps
unicode-bidi属性也有三个值:
normal原来是什么方向就使用什么方向embed作用于inline元素,direction属性的值指定嵌入层,在对象内部进行隐式重排序bidi-override严格按照direction属性的值重排序。忽略隐式双向运算规则
例如:
<div style=”direction:rtl;”>this is a test</div><div style=”direction:rtl;unicode-bidi:bidi-override;”>this is a test</div><div style=”direction:rtl;unicode-bidi:bidi-override;”>this <span style=”unicode-bidi:embed;”>is a test</span></div>
第一行就是简单的右对齐,其实这是direction的默认效果,文字不会倒着写
第二行两个属性结合使用,不但右对齐而且真的是从右到左书写了,这才是正经的阿拉伯语写法
第三行的效果奇妙之处在于在第二行的基础上加了样式unicode-bidi:embed;不会倒着写了,按着正常的书写顺序在写
效果如图:
代码示例请戳:unicode-bidi.html
84191532