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;
}

效果如下：

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属性文字排列方式

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是不同的作用，各有长短，可以结合使用。