昨天說到 dir 屬性用於設置要顯示的文本的基本方向，這個基本方向不純粹是文字，包含所有的元素、區塊都是唷！所以當設定了 <html dir="rtl"> 你會看到如下的畫面。
也就是原本定位從左上角開始的網頁內容，全部都變成定位從右上角開始。
另外，在 html tag 裡面使用是使用dir="ltr"，如果要寫在 CSS 裡面則要寫成 direction: ltr;
direction 屬性有兩個值：[1]
| 值 | 說明 |
|---|---|
| ltr | 文本方向由左到右（此為預設值） |
| rtl | 文本方向由右到左 |
這兩個值滿重要的，因為跟 writing-mode 一起用，會有一些變化。
在 w3.org 的頁面可以看到
CSS Writing Modes Level 3 defines CSS support for various international writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts).
CSS3 定義 CSS 支持各種國際書寫模式，如從左到右（如拉丁或印度），從右到左（如希伯來語或阿拉伯語），雙向（如混合拉丁和阿拉伯語）和垂直（如亞洲腳本）。
不意外的新的值要 IE11 以上才支援，那 IE 10 以下怎麼辦？
所以當你還需要支援 IE10 以下的瀏覽器，你必須要記住兩套規則
一個是支援 IE 的屬性值，另一個是CSS3規範屬性。[3]
| 值 | 說明 |
|---|---|
| lr-tb | IE7+ 支援。內容由左到右(left-right)，由上到下(top-bottom)水平流動 |
| rl-tb | IE7+ 支援。內容由右到左(right-left)，由上到下(top-bottom)水平流動 |
| tb-rl | IE7+ 支援。內容從上往下(top-bottom)，從右往左(right-left)垂直流動 |
| bt-rl | IE7+ 支援。內容從下往上(bottom-top)，從右往左(right-left)垂直流動 |
| lr | IE9+ 支援。等同于lr-tb。左到右 |
| rl | IE9+ 支援。等同于rl-tb。右到左 |
| tb | IE9+ 支援。等同于tb-rl |
這樣寫太模糊，直接來看圖示好了。
dir="rtl"
dir="ltr"
writing-mode: tb-rl;
到此你會看到文字確實從最右邊由上往下，由右往左排列，但是，好像看起來有點奇怪是吧！是的，你沒看錯就是文字整個靠下了。那如果要讓文字第二行開始就是由上到下呢？
direction: ltr; 就可以了（也可以在 p 標籤上加上 dir="ltr"，二擇一即可）。
至於為什麼加上 direction: ltr; 或 dir="ltr" 就可以讓整段文字靠上，因為還得畫圖解說，就明天再繼續了，CSS3的值也會明天一起介紹。
想試玩一下的可以到 Codepen 範例裡玩玩，各位看倌明天見啦～
參考資料：
[1] https://www.w3schools.com/cssref/pr_text_direction.asp
[2] https://www.w3.org/TR/css-writing-modes-3/
[3] https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
[4] https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/writing-mode
iThome鐵人賽
看影片追技術