iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 12
1
Modern Web

前端路上那些重要與不重要的小事系列 第 12

Day12:小事之 HTML dir Attribute 與 CSS writing-mode 下篇

突然覺得寫冷門的東西是很殘害自己的節奏~XDDD
不過都寫下去了,又不想閹割它,只好想辦法把它寫完惹。

writing-mode for IE10- 的屬性值

說明
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

writing-mode 的 CSS3 的值

說明
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~各位看倌明天見囉~

play1play2play3play4

參考資料:
[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


上一篇
Day11:小事之 HTML dir Attribute 與 CSS writing-mode 上篇
下一篇
Day13:小事之 HTML viewport 與 meta tag
系列文
前端路上那些重要與不重要的小事30

1 則留言

0
SunAllen
iT邦高手 1 級 ‧ 2017-12-31 18:21:39

/images/emoticon/emoticon12.gif
讚,新年快樂!

謝謝大大~新年快樂/images/emoticon/emoticon32.gif

我要留言

立即登入留言