direction有两个属性:ltr,rtl。ltr表示文字或元素从左到右排列,rtl表示文字或元素从右到左排列。
unicode-bidi要和direction结合使用,属性有normal,embed,bidi-override.
<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; }
效果如下:
direction设置了block/inline-block元素的从右向左的排列方向。对于元素的排列unicode-bidi有无都起作用,只用direction就可以搞定。
.wrtmod div{ display: inline-block; padding: 12px; direction: rtl; }
效果如下:
对于文字的排列方式,只写direction一点作用都不起。需要结合unicode-bidi属性才能改变文字方向。
.wrtmod div{ display: inline-block; padding: 12px; direction: rtl; unicode-bidi: bidi-override; }
效果如下:
只有设置bidi-override才能改变文字方向。设置embed是不起作用的。
.wrtmod div{ display: inline-block; padding: 12px; direction: rtl; unicode-bidi: bidi-override; } .wrtmod span{ unicode-bidi: embed; }
效果如下:
unicode-bidi:embed用来设置使用文本原来的书写方式。
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; }
效果如下:
通过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>
效果如下:
direction是表示书写方向的,和writing-mode是不同的作用,各有长短,可以结合使用。