iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 10
2
Modern Web

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

Day10:小事之 HTML dir Attribute

<!DOCTYPE html>
<html lang="zh-tw" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
	
</body>
</html>

The dir attribute is used to set the base direction of text for display. dir屬性用於設置要顯示的文本的基本方向。

dir 這個屬性,在製作中英文網站時,其實不會特別標註,因為 html 最早都是應用於拉丁文上,而拉丁文的書寫方式主要是水平由左到右,而 dir 預設為 ltr ( left-to-right )也是由左到右,也因此不太常在 HTML 裡看到dir。

而跟 lang 一樣

  • 在HTML 4.01中,lang屬性不能用於:<base><frame><frame><hr><iframe><param><script>
  • 在HTML5中,lang屬性可用於任何HTML元素。[1]

使用時機

那什麼時候會用到呢?
答案是網頁全部或部分用的是特殊語系,例如:阿拉伯文。(到目前為止也只遇過一次XD)

阿拉伯文的書寫方向是由右到左,因此在製作阿拉伯文的網站時,可以將全站的文本方向設定為<html dir="rtl">( right-to-left )。

工具

其實有一個非常方便可以知道語系書寫方向的線上工具,就是『Google 翻譯』,先在左邊設定中文,右邊的選擇為阿拉伯文,你會發現文字靠右了,但其實不是靠右,再看看 HTML,你會發現 div 上面有 dir 的設定dir="rtl"(right-to-left)。

除了阿拉伯文,還有幾個文字是由右到左書寫,有興趣的人可以自己試著找看看。[2]

中文直書

這時候會想說,那中文可不可以也這樣玩,答案是很抱歉,如果你針對一段中文字設定dir="rtl",效果會如同 text-align: right 一樣是文字靠右,但是書寫方向仍舊是由左到右。

那中文如果要從右到左書寫該怎麼辦呢?
在 Microsoft Internet Explorer 5.5 中,通過名為 writing-mode 的 CSS 屬性啟用對垂直配置的支持,這也是目前 CSS3 使用的垂直文字屬性。

是的!你沒看錯,這個屬性最早只有 IE 有支援!!

但是當時各個瀏覽器並不支援這個 CSS 屬性,一直到 CSS3 各瀏覽器才開始支援。
還沒有 CSS3 支援的時期,想要垂直文字怎麼辦?
那時候日本人開發了一支JS叫做『竹取JS』,那時候要製作垂直文字的畫面都靠這支JS。

有興趣的人也可以到他的Github去看如何使用。

接下來明天繼續介紹 dir、writing-mode 與 direction 之間的關係。

各位看倌明天見囉~

參考資料:
[1] https://www.w3schools.com/tags/att_global_dir.asp
[2] https://www.w3.org/International/questions/qa-html-dir


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

1 則留言

0
Chris
iT邦新手 5 級 ‧ 2017-12-30 12:39:46

中文直書的數位化速度不如阿拉伯文的靠右呀!!!
(直書明明就比較難)

誰叫網頁是外國人發明的(咦!XD

我要留言

立即登入留言