首页 > 代码库 > direction、text-align和unicode-bidi设置文本方向
direction、text-align和unicode-bidi设置文本方向
进入到css文本设置,又是一个迷惑,不过好在都解决。
问题描述:
-
direction和unicode都表示设置文本方向,到底有何不同?
(解决文章参考:《direction和unicode-bidi》--Samaritans)
-
为什么【<div style="direction: rtl; ">this is a test</div>】和
【</div><div style="text-align:right;">this is a test</div>】写出来的效果都是“this is a test”在浏览器的最右边,而不是其中一个为“test a is this”?
(解决文章参考:《CSS direction属性简介与实际应用》--张鑫旭)
探究路程:
首先当然是先查看官方释义啊,然后发现高考语文没及格真的是硬伤,这里还是放出来链接给大家看!
-
text-align:对齐元素中的文本。
-
direction:设置文本方向。
-
unicode-bidi:设置或返回文本是否被重写 。
事后我回去找链接的时候发现,其实W3C school里面确实是讲清楚了!
“文本方向
如果您阅读的是英文书籍,就会从左到右、从上到下地阅读,这就是英文的流方向。不过,并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的,当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。
direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
注释:对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。”
总结:
懒得看上面两篇解决文章和同我一样看不懂w3c解释的朋友看我这里~
-
direction属性的作用级别是 内联元素块 。就是当你输入一句话的时候,使用了【<p style="direction:rtl;">我爱他</p>】这句话中的文字顺序是不会变的,就是显示出来的【我爱他】不会变成【他爱我】。说到这里有种蛋蛋的忧伤T.T 。所以整句的【我爱他】被看为一个整体,从右到左设置方向时,自然就直接被放置到最右边,视觉上和【text-align:right】一样了。
-
有了第一条的总结,我们在联系w3c中的那段话就知道了,在行内设置文本方向的就是 unicode-bidi 了。那么unicode-bidi和direction属性决定了HTML或XML文字渲染方向,两个属性结合使用可以改变文字书写顺序。就是当设置为【<p style="direction:rtl; unicode-bidi: bidi-override;">我爱他</p>】的时候,“他就会爱我了”。
-
更多的详细解释在最上面的两条链接中哦~这里远程谢谢前面的两位前辈!
最后祝大家都能找到那个 你爱他 他爱你 的人(手动比心)?
direction、text-align和unicode-bidi设置文本方向