IT工程師數位筆記本

"direction"有兩個值：ltr | rtl

ltr：從左往右
rtl：從右往左

默認：ltr

一起看個效果就懂了。

<style>
  div{
    direction:rtl;
  }
</style>
<div>這是什么啊</div>

本想它是否可以達到float的效果，結果發現很多坑。

如下，我本想讓第二個p標簽跑右邊去，結果不起作用。

其實也不是不起作用，因為它只是對里面的內容起作用。如果想讓文字跑右邊去，還得設置這個元素的寬度，因為inline-block默認寬度是靠內容得來的。

<style>
  body,p{
    margin:0;
    padding:0;
  }
  #box{
    width:200px;
    border:1px solid #ccc;
  }
  #box>p{
    display:inline-block;
  }
  #box>p:last-of-type{
    width:50px;
    background-color:red;
    direction:rtl;
  }
</style>
<div id="box">
  <p>左</p>
  <p>右</p>
</div>

但我們還不能設置這個元素為100%，不然就掉下去了，除非知道左邊那個元素的寬度然后通過calc函數減去這個值，不過其實還是不行的，因為inline-block也有個坑，它默認就會有幾px的間距。所有說，在模擬float效果這方面direction表示力不從心。那么direction究竟能干嘛？

如果想真的了解direction能干嘛，那么看一下，下面這些direction的奇怪表現，也許就是這些奇怪的表現讓direction有了活力。

一些奇怪的特征...

LI的小點跑右邊去了

<style>
  ul>li{
    width:100px;
    direction:rtl;
  }
</style>
<ul>
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
</ul>

還有這個

<style>
  div{
    direction:rtl;
  }
</style>
<div id="box">這是什么啊？</div>

這個

<style>
  body,p{
    margin:0;
    padding:0;
  }
  #box{
    width:200px;
    border:1px solid #ccc;
    direction:rtl;
  }
  #box>p{
    display:inline-block;
  }
</style>
<div id="box">
  <p>左</p>
  <p>右</p>
</div>

價值可能就是文字顛倒效果了。

另外它還可以配合unicode-bidi使用。

里面有一個unicode-bidi:bidi-override屬性，我們可以手動讓文字顛倒。

<style>
  body,p{
    margin:0;
    padding:0;
  }
  #box{
    direction:rtl;
    unicode-bidi:embed;
  }
</style>
<div id="box">CSS</div>

除了bidi-override它還有其他的幾個屬性，如下：

normal：對象不打開附加的嵌入層，對于內聯元素，隱式重排序跨對象邊界進行工作。
embed：對象打開附加的嵌入層，<' direction '> 屬性的值指定嵌入層，在對象內部進行隱式重排序。
bidi-override：嚴格按照 <' direction '> 屬性的值重排序。忽略隱式雙向運算規則。

我猜之所以會出現上面的奇怪現象就是因為它默認值是normal，對于內聯元素，隱式重排序跨對象邊界進行工作。這句話很關鍵，估計是不同當文字碰到不同格式的字就會創建一個內聯元素。