css中关于direction与unicode-bidi的对比
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css中关于direction与unicode-bidi的对比,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2481字,纯文字阅读大概需要4分钟。
内容图文
![css中关于direction与unicode-bidi的对比](/upload/InfoBanner/zyjiaocheng/414/a010c6baaad5450fa56622f921b38a9b.jpg)
direction
direction属性有三个值
inherit 使用父元素的设置
ltr 默认值,left to right,从左到右
rtl right to left 从右到左
我们默认的书写顺序是从左到右的,不用做特殊设置,但是对于阿拉伯语是从右到左的,这时候就需要设置direction属性来正确展示了
防止浏览器重写text-align我们做一下默认设置
<p style="direction:rtl;text-align: initial;"> ???? ?? ???? ???? ?? ??????? ???? ???? ?? ???? ???? ?? ???? </p>
对应的也有个html属性dir可以设置
<p dir="rtl" dtyle="text-align: initial;"> ???? ?? ???? ???? ?? ??????? ???? ???? ?? ???? ???? ?? ???? </p>
direction属性局定了默认的书写顺序这是和text-align的区别,后者是对其方向,书写书写顺序不变
<p style="direction: rtl;text-align: initial;">1 2 3 4 5 6。</p> <p style="text-align:right;">1 2 3 4 5 6。</p>
unicode-bidi
貌似有direction就可以应付书写方向的问题了,unicode-bidi是做什么的呢?
浏览器通常根据lang属性或者特殊的font-family决定书写方向,但是如果一句话中同时包括两种方向的文案的时候就需要用到unicode-bidi属性了
unicode-bidi 有三个广泛支持的值
normal 原来是什么顺序就使用什么顺序
embed 作用于inline元素,direction属性的值指定嵌入层,在对象内部进行隐式重排序
bidi-override 严格按照direction属性的值重排序。忽略隐式双向运算规则
说实话这么解释我也看不懂,看个例子
<p style="direction:rtl;text-align: initial;">this is a test</p> <p style="direction:rtl;unicode-bidi:bidi-override;text-align: initial;"> this is a test </p> <p style="direction:rtl;unicode-bidi:bidi-override;text-align: initial;"> this <span style="unicode-bidi:embed;">is a</span> test </p>
第一行就是简单的右对齐,文字不会倒着写(阿拉伯语会,后面有解释)
第二行两个属性结合使用,不但右对左书写而且真的是从右到左书写了,这才是正经的阿拉伯语写法
第三行的效果奇妙之处在于在第二行的基础上加了样式unicode-bidi:embed;不会倒着写了,按着正常的书写顺序在写
为什么对于阿拉伯语只设置direction就能正确展示了,但是英文单词却只有右对齐效果,不会从右到左书写,只有设置了unicode-bidi:bidi-override;才好使呢
这和具体语言有关,对于阿拉伯语和希伯来语自动就好使了,单个数字、字母浏览器不能判断语言就用rtl默认设置了,英语等还是使用默认的左到右的方式,只能用unicode-bidi重写
在声明的时候指定语言为阿拉伯语页面会自动书写顺序rtl
<html lang="ar">
direction是表示书写方向的,和writing-mode是不同的作用,各有长短,可以结合使用。
以上就是css中关于direction与unicode-bidi的对比的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的css中关于direction与unicode-bidi的对比全部内容,希望文章能够帮你解决css中关于direction与unicode-bidi的对比所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。