iT邦幫忙

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

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

Day11:小事之 HTML dir Attribute 與 CSS writing-mode 上篇

昨天說到 dir 屬性用於設置要顯示的文本的基本方向,這個基本方向不純粹是文字,包含所有的元素、區塊都是唷!所以當設定了 <html dir="rtl"> 你會看到如下的畫面。

也就是原本定位從左上角開始的網頁內容,全部都變成定位從右上角開始。

direction 屬性

另外,在 html tag 裡面使用是使用dir="ltr",如果要寫在 CSS 裡面則要寫成 direction: ltr;

direction 屬性有兩個值:[1]

說明
ltr 文本方向由左到右(此為預設值)
rtl 文本方向由右到左

這兩個值滿重要的,因為跟 writing-mode 一起用,會有一些變化。

writing-mode 屬性[2]

在 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 支持各種國際書寫模式,如從左到右(如拉丁或印度),從右到左(如希伯來語或阿拉伯語),雙向(如混合拉丁和阿拉伯語)和垂直(如亞洲腳本)。

writing-mode 的瀏覽器支援度

不意外的新的值要 IE11 以上才支援,那 IE 10 以下怎麼辦?
所以當你還需要支援 IE10 以下的瀏覽器,你必須要記住兩套規則
一個是支援 IE 的屬性值,另一個是CSS3規範屬性。[3]

先看看 IE 的屬性值

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

這樣寫太模糊,直接來看圖示好了。

  1. 如果想要網站內絕大多數區塊都是右到左,那麼就在 html 上面設定 dir="rtl"
  2. Logo 想要由左到右,則可以直接針對 h1 添加 dir="ltr"
  3. 而區塊內的文字想要由右到左,則針對 p 設定 class 寫入 writing-mode: tb-rl;

到此你會看到文字確實從最右邊由上往下,由右往左排列,但是,好像看起來有點奇怪是吧!是的,你沒看錯就是文字整個靠下了。那如果要讓文字第二行開始就是由上到下呢?

  1. 在 p 的 class 上再添加 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


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

尚未有邦友留言

立即登入留言