码迷,mamicode.com
首页 > 其他好文 > 详细

direction、text-align和unicode-bidi设置文本方向

时间:2016-11-19 12:31:50      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:intro   回文   bsp   XML   gif   ext   级别   css   渲染   

进入到css文本设置,又是一个迷惑,不过好在都解决。

 

    问题描述:

  1. direction和unicode都表示设置文本方向,到底有何不同?

    (解决文章参考:《direction和unicode-bidi》--Samaritans)

  2. 为什么【<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属性简介与实际应用》--张鑫旭

 

    探究路程:

    首先当然是先查看官方释义啊,然后发现高考语文没及格真的是硬伤,这里还是放出来链接给大家看!

 

  1.   text-align:对齐元素中的文本。

  2.   direction:设置文本方向。

  3.   unicode-bidi:设置或返回文本是否被重写 。

    事后我回去找链接的时候发现,其实W3C school里面确实是讲清楚了!

文本方向

    如果您阅读的是英文书籍,就会从左到右、从上到下地阅读,这就是英文的流方向。不过,并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的,当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。

    direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。

    注释:对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。

    direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。”

 

    总结:

    懒得看上面两篇解决文章和同我一样看不懂w3c解释的朋友看我这里~

  1. direction属性的作用级别是 内联元素块 。就是当你输入一句话的时候,使用了【<p style="direction:rtl;">我爱他</p>】这句话中的文字顺序是不会变的,就是显示出来的【我爱他】不会变成【他爱我】。说到这里有种蛋蛋的忧伤T.T 。所以整句的【我爱他】被看为一个整体,从右到左设置方向时,自然就直接被放置到最右边,视觉上和【text-align:right】一样了。

  2.  有了第一条的总结,我们在联系w3c中的那段话就知道了,在行内设置文本方向的就是 unicode-bidi 了。那么unicode-bidi和direction属性决定了HTML或XML文字渲染方向,两个属性结合使用可以改变文字书写顺序。就是当设置为【<p style="direction:rtl; unicode-bidi: bidi-override;">我爱他</p>】的时候,“他就会爱我了”。

  3. 更多的详细解释在最上面的两条链接中哦~这里远程谢谢前面的两位前辈!

最后祝大家都能找到那个 你爱他 他爱你 的人(手动比心)?

技术分享

 

direction、text-align和unicode-bidi设置文本方向

标签:intro   回文   bsp   XML   gif   ext   级别   css   渲染   

原文地址:http://www.cnblogs.com/nnnlillian/p/6079886.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!