<!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 一樣
<base>，<frame>，<frame>，<hr>，<iframe>，<param>和<script>。那什麼時候會用到呢？
答案是網頁全部或部分用的是特殊語系，例如：阿拉伯文。（到目前為止也只遇過一次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去看如何使用。
各位看倌明天見囉～
參考資料：
[1] https://www.w3schools.com/tags/att_global_dir.asp
[2] https://www.w3.org/International/questions/qa-html-dir
iThome鐵人賽
看影片追技術