direction和unicode-bidi

css中unicode-bididirection属性决定了HTMLXML文字渲染方向,两个属性结合使用可以改变文字书写顺序。
direction属性有三个值:

ltr :  默认值,文本流从左到右
rtl :  文本流从右到左
inherit :  继承父元素的设置

例如设置右对齐:<div style="direction:rtl;">this is a test!</div>
还可以:<div dir="rtl">this is a test!</div>
效果如图:这里写图片描述
代码示例请戳:direction.html
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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值