css direction 和 unicode-bidi 书写方式认识
2017-02-08 00:54

direction属性

direction有两个属性:ltr,rtl。ltr表示文字或元素从左到右排列,rtl表示文字或元素从右到左排列。

unicode-bidi属性

unicode-bidi要和direction结合使用,属性有normal,embed,bidi-override.

direction和unicode-bidi结合使用设置书写方向

<div class="wrtmod">
<div>落霞与孤鹜齐飞</div>
    <div>秋水共长天一色</div>
    <div>some birds <span>fly in</span> sky</div>
</div>

.wrtmod{
    margin:15px;
    padding:15px;
    border:1px solid #bababa;
    background:#f1f1f1;
    font-size:15px;
    direction: rtl;
    line-height:32px;
}
.wrtmod div{
    display: inline-block;
    padding: 12px;
}

效果如下:

bidi.png

direction设置了block/inline-block元素的从右向左的排列方向。对于元素的排列unicode-bidi有无都起作用,只用direction就可以搞定。

.wrtmod div{
    display: inline-block;
    padding: 12px;
    direction: rtl;
}

效果如下:

bidi2.png

对于文字的排列方式,只写direction一点作用都不起。需要结合unicode-bidi属性才能改变文字方向。

.wrtmod div{
    display: inline-block;
    padding: 12px;
    direction: rtl;
    unicode-bidi: bidi-override;
}

效果如下:

bidi3.png

只有设置bidi-override才能改变文字方向。设置embed是不起作用的。


.wrtmod div{
    display: inline-block;
    padding: 12px;
    direction: rtl;
    unicode-bidi: bidi-override;
}
.wrtmod span{
    unicode-bidi: embed;
}

效果如下:

bidi4.png

unicode-bidi:embed用来设置使用文本原来的书写方式。

dir属性文字排列方式

dir属性有三个值rtl,ltr,auto,意思同direction。

<div class="wrtmod" dir="rtl">
<span>落霞与孤鹜齐飞</span>
<span>秋水共长天一色</span>
<span>some birds now is fly in sky</span>
</div>
.wrtmod div{
    display: inline-block;
    padding: 12px;
}
.wrtmod span{
    unicode-bidi: embed;
}
.wrtmod{
    margin:15px;
    padding:15px;
    border:1px solid #bababa;
    background:#f1f1f1;
    font-size:15px;
    line-height:32px;

}
 span{
     display: inline-block;
 }

效果如下:

bidi5.png

通过dir改变文字的书写方向,使用rtl,对于block元素实现从右到左的排列,对于文本元素类似于text-align:right的效果。

.wrtmod{
    margin:15px;
    padding:15px;
    border:1px solid #bababa;
    background:#f1f1f1;
    font-size:15px;
    line-height:32px;

}
.wrtmod div{
    display: inline-block;
    padding: 12px;
}
<div class="wrtmod" dir="rtl">
落霞与孤鹜齐飞
秋水共长天一色
some birds now is fly in sky
</div>

效果如下:

bidi7.png

direction是表示书写方向的,和writing-mode是不同的作用,各有长短,可以结合使用。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(1195)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1