css direction屬性與writing-mode屬性的區別

在css中writing-mode和direction都是用來控制文本的展示方向的，但是他們兩者又存在區別。

在writing-mode中參數有 lr-tb(左右-上下) tb-rl(上下-右左)，在西方國家的書寫方式通常是左右-上下，但是在亞洲國家，譬如中國的古詩從右至左，writing-mode屬性就體現出來啦！

樣本：

<div class="mode">    <h3>登鸛雀樓</h3>  <p>白日依山盡,<br>黃河入海流.<br>欲窮千裡目,<br>更上一層樓。</p>  </div>

.mode{              writing-mode: tb-rl;              }          p{              font-size: 24px;          }

展現的效果：

direction的參數ltr（左到右）和rtl（右到左）。

通過direction實現控制文本的書寫方向是從左至右還是從右至左。

首先，layout-flow:也是控制對象常值內容的流向（但是這個屬性可以被writing-mode屬性替換）

在css中writing-mode和direction都是用來設定文本的展現方式的，兩者有些共同點又有本質的區別。下面先介紹一下兩者的用法：

writing-mode

文法：

writing-mode : lr-tb | tb-rl

參數：
lr-tb : 左-右，上-下
tb-rl : 上-下，右-左

說明：
設定或檢索對象的內容塊固有的書寫方向。西方語言確省的是左-右，上-下的書寫方式。但是亞洲語言常有上-下，右-左的書寫方式。
當此屬性值發生變化時，text-align屬性與vertical-align屬性的作用也將發生變化。
對應的指令碼特性為writingMode。請參閱我編寫的其他書目。

direction

文法：

direction: ltr | rtl

參數：

ltr : 左-右
rtl : 右-左

說明：

direction屬性設定了文本的書寫方向是從左向右還是從右向做。

通過上面的對比我們可以得出結論，如果僅僅是為了文字的展現方式如從左向右還是從右向左，我們往往使用direction,而為了應對不同的文字的書寫習慣，特別是文字從上而寫豎排書寫時，如我國古代文字的書寫方式，我們需要使用writing-mode。