direction和unicode-bidi

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了direction和unicode-bidi相关的知识,希望对你有一定的参考价值。

CSS22文档里9.10

基本上看不懂讲什么,很多定义可能在提到的UAX9的文档里,也懒得看了。

在stackoverflow里找到了一个问答,简单的解释了direction和unicode-bidi的作用。涉及到字符的方向属性的强弱。在那个unicode bididirectional algorithm basic里有看到过。

就看看提问者的demo和回答者对于demo的解释。

技术分享
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<span style="direction:rtl;unicode-bidi:embed"> James</span>:15<br/>
<span style="direction:rtl;"> James:</span>15
</body>
</html>
View Code

浏览器里是这样的:

技术分享

解释:

The meaning of embedding is ultimately defined in UAX #9 Unicode Bidirectional Algorithm. I don’t want to pretend to understand all of it, but here is what I think happens in your case:

embedding 的完全的定义在UAX#9上可以看到,我不不想完全理解所有的内容,但是这样下面是我认为的你的case发生的:

In the second part of your code, you just declare right-to-left direction for the string “ James”. This has no effect, since the direction property affects only the overall layout direction (e.g., whether table columns run left to right or right to left) and the text direction of directionally neutral text. Here the content has just Latin letters, which have strong left-to-right directionality, and a space, which adapts to the directionality of the adjacent character with strong directionality.

在你代码的第二部分,你只是声明了右到左的direction给了字符串james。这不会产生任何效果出来,因为direction的属性只会影响一整块之间的方向的布局(比如:表格的column是从左到右,还是从右到左。),和直接的中性的文字的方向。这里的内容是Latin文字,是有强的左到右的方向的,还有一个空格,适应了相邻空格字符的强方向。

In the first part, however, declaring unicode-bidi:embed causes the element as a whole to be treated according to its declared directionality, right to left, even though that directionality has no impact inside the element. In a sense, it acts like a single right-to-left letter. Marking it with X, we thus have X:15. This gets rendered the same way as if X were an Arabic letter: this directionally strong letter appears on the right, then, to the left of it, the directionally weak punctuation mark “:”, and then the common digits 15 running left to right (as they do even inside Arabic text).

在第一部分,不同的是,声明了unicode-bidi:embed 导致了元素在方向上作为一个整体来对待,右往左,尽管不会影响里面的元素。换句话说,就好象一个单独的右到左语言的字母。用X来标记他,我们就有了X:15。这和X是一个阿拉伯字母一样:这个方向性强的字母出现在右边,然后,左边的方向性弱的冒号“:”,然后是普通的数字15从左往右。(就好象他们在阿拉伯文里出现一样)

以上是关于direction和unicode-bidi的主要内容,如果未能解决你的问题,请参考以下文章

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

CSS文本方向

体会CSS3的all属性

Rabbitmq-direct演示

springboot环境下GraphQL权限认证的实现方法

Angular JS 和 Directive Link 和 $timeout