CSS 世界中方位與順序的規(guī)則與演進(jìn)之路
在 CSS 中，我們經(jīng)常會與各種方向方位打交道。
譬如 margin、padding，它們就會有 margin-left、margin-right 或者是 padding-left、padding-right。還有定位中的 left、top、right、bottom，它們表示了上下左右不同的方位。
還有一種情況是從x方位到x方位，譬如 writing-mode、direction，它代表了一種順序，表示塊流動方向，或者文字書寫的方向等。
本文將捋一捋 CSS 世界中的方位與順序，探尋其中一些有意思的點。
writing-mode & direction & unicode-bidi
在 CSS 世界中，這 3 個屬性都與排版順序相關(guān)，互有關(guān)聯(lián)但作用各異。
- writing-mode：定義了文本水平或垂直排布以及在塊級元素中文本的行進(jìn)方向。
- direction：設(shè)置文本排列的方向。rtl 表示從右到左 (類似希伯來語或阿拉伯語)， ltr 表示從左到右。
- unicode-bidi：它與 direction 非常類似，兩個會經(jīng)常一起出現(xiàn)。在現(xiàn)代計算機(jī)應(yīng)用中，最常用來處理雙向文字的算法是Unicode 雙向算法。而 unicode-bidi 這個屬性是用來重寫這個算法的。
單純看定義有點懵逼，我們簡單的看幾個應(yīng)用示意圖：
writing-mode 示意
writing-mode 基本只需要留意最常見的 horizontal-tb、vertical-lr、vertical-rl 。表示文本的行進(jìn)方向，下圖表示瀏覽器對 writing-mode 的支持完整的情況下輸出的外觀：
direction 示意
OK，那 direction 又為何呢?它表示文本排列的方向。
- direction: ltr：默認(rèn)屬性?？稍O(shè)置文本和其他元素的默認(rèn)方向是從左到右。
- direction: rtl：可設(shè)置文本和其他元素的默認(rèn)方向是從右到左。
有點繞，所以上 Demo 最為直觀。假設(shè)，我們有如下結(jié)構(gòu)：
- <ul class="wrap">
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- </ul>
- <p>這是一段正常順序的文本</p>
簡單的 CSS 如下：
- p, ul {
- background: #ff00ff50;
- padding: 10px;
- }
- ul {
- display: flex;
- justify-content: space-between;
- & > li {
- border: 1px solid #333;
- }
- }
正常情況下的樣式如下：
我們分別給兩組元素的父容器 <p> 和 <ul> 加上 direction: ltr 及 direction: rtl，則最終效果如下：
可以看到，direction 可以改變子元素的排列方向，但是它確無法改變單段文本內(nèi)(或是內(nèi)聯(lián)元素內(nèi))，每一個文字的書寫順序。
那如果，我希望 這是一段正常順序的文本 這段文字，不是從左向右進(jìn)行書寫，而是反過來，從右到左進(jìn)行書寫，又該如何設(shè)置呢?
unicode-bidi 示意
這就需要請出 unicode-bidi 了。
單獨使用 direction: rtl 無法使單段文本內(nèi)(或是內(nèi)聯(lián)元素內(nèi))，文字的書寫順序改為從右至左。需要配合 unicode-bidi。
CSS 中的 unicode-bidi 屬性，和 direction 屬性，共同決定如何處理文檔中的雙書寫方向文本。
還是上述的代碼，我們改造一下：
- <p>這是一段正常順序的文本</p>
- p {
- direction: rtl;
- unicode-bidi: bidi-override;
- }
結(jié)果如下：
放到一起比較：
這里除了 unicode-bidi: bidi-override，unicode-bidi: isolate-override 也能得到同樣的效果。
這里涉及了一個非常重要的知識 -- Unicode 雙向算法。
Unicode 雙向算法
雙向文字就是一個字符串中包含了兩種文字，既包含從左到右的文字又包含從右到左的文字。
對于文字書寫習(xí)慣，分為：
- 大多數(shù)文字都是從左到右的書寫習(xí)慣：比如拉丁文字(英文字母)和漢字;
- 少數(shù)文字是從右到左的書寫方式比如阿拉伯文(ar)跟希伯來文(he)。
在現(xiàn)代計算機(jī)應(yīng)用中，最常用來處理雙向文字的算法是 Unicode 雙向算法(Unicode Bidirectional Algorithm)。
一個區(qū)域內(nèi)有總體方向，決定從這個區(qū)域的哪邊開始書寫文字，通常稱為基礎(chǔ)方向。瀏覽器會根據(jù)你的默認(rèn)語言來設(shè)置默認(rèn)的基礎(chǔ)方向，如英語、漢語的基礎(chǔ)方向為從左到右，阿拉伯語的基礎(chǔ)方向為從右到左。
在 Web 中，我們有 3 種方式可以控制文字方向：
- html實體 - ‎ 與 ‏）
- <bid> 與 <bdo> 標(biāo)簽 與 dir 屬性
- CSS 屬性 direction + unicode-bidi
本文介紹的就是 CSS 中的 direction + unicode-bidi 方式控制文字的書寫方向。關(guān)于 Unicode 雙向算法(Unicode Bidirectional Algorithm)本身還是非常復(fù)雜的，本文也僅僅只是簡單提及，更為詳盡的內(nèi)容，你可以參考 UNICODE BIDIRECTIONAL ALGORITHM[1]
writing-mode & direction & unicode-bidi 的一些應(yīng)用
除去本身的功能，下面我們來看看它們其它的一些應(yīng)用場景。
使用 writing-mode 進(jìn)行創(chuàng)意排布布局
writing-mode 非常適合用于進(jìn)行一些創(chuàng)意排版。
基礎(chǔ)的類似中國古詩詞的一些豎向展示：
- <div class="g-wrap">
- <h2>涼州詞</h2>
- <p>葡萄美酒夜光杯,</p>
- <p>欲飲琵琶馬上催。</p>
- <p>醉臥沙場君莫笑,</p>
- <p>古來征戰(zhàn)幾人回。</p>
- </div>
給 .g-wrap 分別添加 writing-mode: vertical-rl 或者 writing-mode: vertical-lr 得到不同的效果：
- .rl {
- writing-mode: vertical-rl;
- }
- .lr {
- writing-mode: vertical-lr;
- }
CodePen Demo -- display poems by writing-mode[2]
又或者像是這樣，利用 writing-mode:vertical-rl 實現(xiàn)標(biāo)題的豎向排列，搭配內(nèi)容形成有意思的報紙排版：
- <div>
- <h2>Title Loomings</h2>
- <p>Call me Ishmael. Some years ago- never mind ho....
- </p>
- </div>
- div {
- width: 750px;
- padding-left: 150px;
- }
- h2 {
- position: absolute;
- writing-mode: vertical-rl;
- }
得到這樣的排版布局：
CodePen Demo -- writing-mode Layout Demo[3]
改變文本溢出省略位置，使之在頭部進(jìn)行省略
我們都知道，本文超長溢出的省略，通過都是在文本的最末尾。像是這樣：
- <p>Make CSS Ellipsis Beginning of String</p>
- p {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
這里，我們可以通過 direction，將省略打點的位置，從尾部移動至頭部：
- p {
- direction: rtl;
- }
結(jié)果如下：
嘗試了下運用在多行省略中，多行省略的打點會出現(xiàn)在最后一行的左側(cè)，不符合需求。
CodePen Demo -- CSS Ellipsis Beginning of String[4]
使用 writing-mode 改變元素方位
這個小技巧是在張老師的博客中學(xué)到的：改變CSS世界縱橫規(guī)則的writing-mode屬性[5]
我們可以通過 writing-mode: vertical-rl，將元素轉(zhuǎn)一個 90° 角：
- <div>➤</div>
- div:hover {
- writing-mode: vertical-rl;
- }
看看效果，當(dāng) hover 的時候，將箭頭從向右➡️改為向下🔽 ：
當(dāng)然，現(xiàn)在這個功能完全可以用 transform 替代，但是在之前需要兼容 IE 系列的時候，不失為一個有意思的小技巧。
CSS 中的邏輯屬性
下面一個章節(jié)，我們聊聊 CSS 中的邏輯位置。
我們知道，在我們使用類似 margin 和 padding 的時候，可以單獨控制每個方向，例如 margin-top、padding-left。
然而，這種使用了 top/left/bottom/right 物理方向維度定義的屬性，在不同的排版規(guī)則下，就非常容易出問題。
思考如下這樣一個 DEMO，我們希望給古詩的題目的上方，添加一個 padding 值：
- <div class="g-wrap pt">
- <h2>涼州詞</h2>
- <p>葡萄美酒夜光杯,</p>
- <p>欲飲琵琶馬上催。</p>
- <p>醉臥沙場君莫笑,</p>
- <p>古來征戰(zhàn)幾人回。</p>
- </div>
- <div class="g-wrap pt rl">
- <h2>涼州詞</h2>
- <p>葡萄美酒夜光杯,</p>
- <p>欲飲琵琶馬上催。</p>
- <p>醉臥沙場君莫笑,</p>
- <p>古來征戰(zhàn)幾人回。</p>
- </div>
- .pt {
- padding-top: 100px;
- }
- .rl {
- writing-mode: vertical-rl;
- }
可以看到，無論 writing-mode 如何，padding-top 始終指代物理方向的上方。
基于這種不同排版規(guī)則，物理方向可能會帶來一定的困擾這個問題，CSS 在 CSS Logical Properties and Values Level 1[6] 規(guī)范中，推出了 CSS 邏輯屬性。
CSS 邏輯屬性與值是 CSS 的一個新的模塊，其引入的屬性與值能做到從邏輯角度控制布局，而不是從物理、方向或維度來控制。
還是上述的 DEMO，我們可以使用 padding-block-start 替代 padding-top。
重點：使用 padding-block-start 替代 padding-top：
- .pt {
- - padding-top: 100px;
- + padding-block-start: 100px;
- }
- .rl {
- writing-mode: vertical-rl;
- }
這次再看看效果：
padding 的位置由物理上的上方，變成了邏輯上的上方。
完整的 Demo 你可以戳這里：CodePen Demo-- 物理方向與邏輯方向展示[7]
margin、padding、border、relative 物理屬性到邏輯屬性的映射
類似這樣的屬性，在規(guī)范中定義了挺多的，簡單羅列一下具體的映射規(guī)則：
margin 物理屬性到邏輯屬性的映射：
padding 物理屬性到邏輯屬性的映射：
border 物理屬性到邏輯屬性的映射：
relative 物理屬性到邏輯屬性的映射：
等等...(完整的列表，你可以戳這里：MDN - CSS 邏輯屬性與值[8])
在邏輯屬性中沒有方向性的概念，只有開始(start)和結(jié)束(end)、塊(block)和內(nèi)聯(lián)(inline)的概念。比如說，在從左到右(LTR)中，start 是 left，但在從右到左(RTL)，它是 right。
邏輯屬性下的盒子模型
考慮到不同排版帶來的邏輯問題，整個盒子模型也可以隨之進(jìn)行改變。
下圖，左邊是物理盒子模型，右邊是邏輯屬性下的盒子模型。
左：物理盒子 | 右：邏輯盒子
物理方向與邏輯方向重疊
當(dāng)然，還有這樣一種情況，就是設(shè)置的邏輯方向和物理方向重疊，譬如我們給一個正常從左往右，從上至下的元素同時設(shè)置 padding-top 和 padding-block-start，看看會發(fā)生什么：
- div {
- padding-top: 120px;
- padding-block-start: 100px;
- }
這里如果物理方向與邏輯方向設(shè)置的 padding 重疊，將會取兩個值中后面定義的那個。這里由于 padding-block-start 后于 padding-top 定義，所以 padding 的值為 100px。
margin 和 border 同理。這里我的理解是，同個方向上還是只能存在一個 margin\padding\border，無論是邏輯方向還是物理方向，取后定義的值為準(zhǔn)。
CodePen Demo-- 物理方向與邏輯方向重疊 DEMO 展示[9]
總結(jié)一下
總結(jié)一下，當(dāng)項目開始國際化，當(dāng)國內(nèi)更多的業(yè)務(wù)開始出海，國際化兼容適配也會越來越重要。好在 CSS 也一直在緊跟時代，推陳出新，當(dāng)你的排版布局需要考慮不同的 writing-mode 的時，你需要開始考慮使用邏輯屬性替代物理屬性!
最后
好了，本文到此結(jié)束，希望對你有幫助 :)
如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。
參考文章
- [bidi(雙向文字)與RTL布局總結(jié)](https://www.cnblogs.com/dojo-lzz/p/4289423.html "bidi(雙向文字 "bidi(雙向文字)與RTL布局總結(jié)")與RTL布局總結(jié)")
- 改變CSS世界縱橫規(guī)則的writing-mode屬性[10]
- CSS Logical Properties and Values Level 1[11]
- 圖解CSS：CSS邏輯屬性[12]
- CSS Logical Properties Are the Future of the Web & I18N[13]
參考資料
[1]UNICODE BIDIRECTIONAL ALGORITHM:
https://unicode.org/reports/tr9/
[2]CodePen Demo -- display poems by writing-mode:
https://codepen.io/Chokcoco/pen/ExmmbeY
[3]CodePen Demo -- writing-mode Layout Demo:
https://codepen.io/Chokcoco/pen/OJmmJmj
[4]CodePen Demo -- CSS Ellipsis Beginning of String:
https://codepen.io/Chokcoco/pen/BaWBELx
[5]改變CSS世界縱橫規(guī)則的writing-mode屬性:
https://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/
[6]CSS Logical Properties and Values Level 1:
https://drafts.csswg.org/css-logical/
[7]CodePen Demo-- 物理方向與邏輯方向展示:
https://codepen.io/Chokcoco/pen/BaRRmgx
[8]MDN - CSS 邏輯屬性與值:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Logical_Properties
[9]CodePen Demo-- 物理方向與邏輯方向重疊 DEMO 展示:
https://codepen.io/Chokcoco/pen/dyWReQV
[10]改變CSS世界縱橫規(guī)則的writing-mode屬性:
https://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/
[11]CSS Logical Properties and Values Level 1:
https://drafts.csswg.org/css-logical/
[12]圖解CSS：CSS邏輯屬性:
https://www.w3cplus.com/css/css-logical-properties.html
[13]CSS Logical Properties Are the Future of the Web & I18N:
https://dev.to/yuschick/css-logical-properties-are-the-future-of-the-web-i18n-11i1
