directiontext-align和unicode-bidi设置文本方向

Posted 2020-08-20 Nnn_Lillian

进入到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. 更多的详细解释在最上面的两条链接中哦~这里远程谢谢前面的两位前辈！

最后祝大家都能找到那个 你爱他 他爱你 的人（手动比心）♥