突然覺得寫冷門的東西是很殘害自己的節奏～XDDD
不過都寫下去了，又不想閹割它，只好想辦法把它寫完惹。
| 值 | 說明 |
|---|---|
| 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 |
| 值 | 說明 |
|---|---|
| horizontal-tb | 水平由左到右 |
| vertical-rl | 垂直由右到左 |
| vertical-lr | 垂直由左到右 |
覺得昨天最後面的例子的講法太過混亂，決定重新來說明，也同時把 for IE 與 CSS3 的值做比較。
在 Banner 上另外加上一個 class 是為了讓大家容易看，也方便複用。
由左往右，但是部分區塊需要直書如圖中，只有 Banner 的部分需要直書，那麼在 <html> 不需要做任何設定，只要針對 banner 寫一行 CSS writing-mode: tb-rl; 或 writing-mode: vertical-rl; 給它。就可以達成直書的效果。
由左往右，但需要多區塊直書如圖中，除了 Banner 之外的另外兩個區塊，其實也只需要加上同樣的 class 就可以做成直書，至於位置可以利用 float 的文繞圖性質來達成即可。
由右往左，但需要全部直書直接在 body 加上剛剛設定的直書的 class，CSS writing-mode: tb-rl; 或 writing-mode: vertical-rl;
要注意 Banner 區塊要多加上 css display: inline-block ，不然在直書時 banner 雖有高度但是會於法抓到高度。
由右往左，但是部分區塊需要直書當網站整體文本都是由右往左 (這裡我特別將 banner 寬設為80%，方便辨識)
html 可設定為<html dir="rtl" 然後ㄧ樣針對 banner 寫一行 css writing-mode: tb-rl; 或 writing-mode: vertical-rl; 給它。
但是這時候菜單整個靠下了。所以需要加上 direction: ltr;
這一種就是昨天未說明完的，以下是我的推測，但不一定正確，如果有正確的說明，歡迎交流。
會這樣推測是來自 Mozilla 的這段文字
The property specifies the block flow direction, which is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. Thus the writing-mode property also determines the ordering of block-level content.
原始的 html 定位在左上角，當全站設定為 dir=rtl 整體文本定位會跑到右上角，包括所有 html 內的元素都是定位在右上角，所以 Banner 區塊的定位也在右上角。
但是當 Banner 加上 writing-mode: vertical-rl; 原本由上到下排列的文字，變成由右往左排列，原本定位在右上角的文字，從右上角跑到右下角。
為了讓訂位再回到右上角，所以必須再加上 direction: ltr (從左到右)
為了測試，我把菜單的部分另外用一個 div 包起來，不對 Banner 下任何 CSS，而是針對 div 去下 dir="ltr"。如圖。
終於講解完畢了，感動～T___T~各位看倌明天見囉～
參考資料：
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
[2] http://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/
[3] https://lists.w3.org/Archives/Public/public-html-ig-zh/2011Apr/0068.html
iThome鐵人賽
看影片追技術