[[413367]]

在 CSS 中，我們經常會與各種方向方位打交道。

譬如 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 個屬性都與排版順序相關，互有關聯但作用各異。

• writing-mode：定義了文本水平或垂直排布以及在塊級元素中文本的行進方向。
• direction：設置文本排列的方向。rtl 表示從右到左 (類似希伯來語或阿拉伯語)， ltr 表示從左到右。
• unicode-bidi：它與 direction 非常類似，兩個會經常一起出現。在現代計算機應用中，最常用來處理雙向文字的算法是Unicode 雙向算法。而 unicode-bidi 這個屬性是用來重寫這個算法的。

單純看定義有點懵逼，我們簡單的看幾個應用示意圖：

writing-mode 示意

writing-mode 基本只需要留意最常見的 horizontal-tb、vertical-lr、vertical-rl 。表示文本的行進方向，下圖表示瀏覽器對 writing-mode 的支持完整的情況下輸出的外觀：

direction 示意

OK，那 direction 又為何呢?它表示文本排列的方向。

• direction: ltr：默認屬性。可設置文本和其他元素的默認方向是從左到右。
• direction: rtl：可設置文本和其他元素的默認方向是從右到左。

有點繞，所以上 Demo 最為直觀。假設，我們有如下結構：

<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 可以改變子元素的排列方向，但是它確無法改變單段文本內(或是內聯元素內)，每一個文字的書寫順序。

那如果，我希望 這是一段正常順序的文本 這段文字，不是從左向右進行書寫，而是反過來，從右到左進行書寫，又該如何設置呢?

unicode-bidi 示意

這就需要請出 unicode-bidi 了。

單獨使用 direction: rtl 無法使單段文本內(或是內聯元素內)，文字的書寫順序改為從右至左。需要配合 unicode-bidi。

CSS 中的 unicode-bidi 屬性，和 direction 屬性，共同決定如何處理文檔中的雙書寫方向文本。

還是上述的代碼，我們改造一下：

<p>這是一段正常順序的文本</p> 

p { 
    direction: rtl; 
    unicode-bidi: bidi-override; 
} 

結果如下：

放到一起比較：

這里除了 unicode-bidi: bidi-override，unicode-bidi: isolate-override 也能得到同樣的效果。

這里涉及了一個非常重要的知識 -- Unicode 雙向算法。

Unicode 雙向算法

雙向文字就是一個字符串中包含了兩種文字，既包含從左到右的文字又包含從右到左的文字。

對于文字書寫習慣，分為：

1. 大多數文字都是從左到右的書寫習慣：比如拉丁文字(英文字母)和漢字;
2. 少數文字是從右到左的書寫方式比如阿拉伯文(ar)跟希伯來文(he)。

在現代計算機應用中，最常用來處理雙向文字的算法是 Unicode 雙向算法(Unicode Bidirectional Algorithm)。

一個區域內有總體方向，決定從這個區域的哪邊開始書寫文字，通常稱為基礎方向。瀏覽器會根據你的默認語言來設置默認的基礎方向，如英語、漢語的基礎方向為從左到右，阿拉伯語的基礎方向為從右到左。

在 Web 中，我們有 3 種方式可以控制文字方向：

1. html實體 - &lrm; 與 &rlm;）
2. <bid> 與 <bdo> 標簽 與 dir 屬性
3. CSS 屬性 direction + unicode-bidi

本文介紹的就是 CSS 中的 direction + unicode-bidi 方式控制文字的書寫方向。關于 Unicode 雙向算法(Unicode Bidirectional Algorithm)本身還是非常復雜的，本文也僅僅只是簡單提及，更為詳盡的內容，你可以參考 UNICODE BIDIRECTIONAL ALGORITHM[1]

writing-mode & direction & unicode-bidi 的一些應用

除去本身的功能，下面我們來看看它們其它的一些應用場景。

使用 writing-mode 進行創意排布布局

writing-mode 非常適合用于進行一些創意排版。

基礎的類似中國古詩詞的一些豎向展示：

<div class="g-wrap"> 
    <h2>涼州詞</h2> 
    <p>葡萄美酒夜光杯,</p> 
    <p>欲飲琵琶馬上催。</p> 
    <p>醉臥沙場君莫笑,</p> 
    <p>古來征戰幾人回。</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 實現標題的豎向排列，搭配內容形成有意思的報紙排版：

<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]

改變文本溢出省略位置，使之在頭部進行省略

我們都知道，本文超長溢出的省略，通過都是在文本的最末尾。像是這樣：

<p>Make CSS Ellipsis Beginning of String</p> 

p { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

這里，我們可以通過 direction，將省略打點的位置，從尾部移動至頭部：

p { 
    direction: rtl; 
} 

結果如下：

嘗試了下運用在多行省略中，多行省略的打點會出現在最后一行的左側，不符合需求。

CodePen Demo -- CSS Ellipsis Beginning of String[4]

使用 writing-mode 改變元素方位

這個小技巧是在張老師的博客中學到的：改變CSS世界縱橫規則的writing-mode屬性[5]

我們可以通過 writing-mode: vertical-rl，將元素轉一個 90° 角：

<div>➤</div> 

div:hover { 
    writing-mode: vertical-rl; 
} 

看看效果，當 hover 的時候，將箭頭從向右➡️改為向下🔽 ：

當然，現在這個功能完全可以用 transform 替代，但是在之前需要兼容 IE 系列的時候，不失為一個有意思的小技巧。

CSS 中的邏輯屬性

下面一個章節，我們聊聊 CSS 中的邏輯位置。

我們知道，在我們使用類似 margin 和 padding 的時候，可以單獨控制每個方向，例如 margin-top、padding-left。

然而，這種使用了 top/left/bottom/right 物理方向維度定義的屬性，在不同的排版規則下，就非常容易出問題。

思考如下這樣一個 DEMO，我們希望給古詩的題目的上方，添加一個 padding 值：

<div class="g-wrap pt"> 
    <h2>涼州詞</h2> 
    <p>葡萄美酒夜光杯,</p> 
    <p>欲飲琵琶馬上催。</p> 
    <p>醉臥沙場君莫笑,</p> 
    <p>古來征戰幾人回。</p> 
</div> 
<div class="g-wrap pt rl"> 
    <h2>涼州詞</h2> 
    <p>葡萄美酒夜光杯,</p> 
    <p>欲飲琵琶馬上催。</p> 
    <p>醉臥沙場君莫笑,</p> 
    <p>古來征戰幾人回。</p> 
</div> 

.pt { 
    padding-top: 100px; 
} 
.rl { 
    writing-mode: vertical-rl; 
} 

可以看到，無論 writing-mode 如何，padding-top 始終指代物理方向的上方。

基于這種不同排版規則，物理方向可能會帶來一定的困擾這個問題，CSS 在 CSS Logical Properties and Values Level 1[6] 規范中，推出了 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 物理屬性到邏輯屬性的映射

類似這樣的屬性，在規范中定義了挺多的，簡單羅列一下具體的映射規則：

margin 物理屬性到邏輯屬性的映射：

padding 物理屬性到邏輯屬性的映射：

border 物理屬性到邏輯屬性的映射：

relative 物理屬性到邏輯屬性的映射：

等等...(完整的列表，你可以戳這里：MDN - CSS 邏輯屬性與值[8])

在邏輯屬性中沒有方向性的概念，只有開始(start)和結束(end)、塊(block)和內聯(inline)的概念。比如說，在從左到右(LTR)中，start 是 left，但在從右到左(RTL)，它是 right。

邏輯屬性下的盒子模型

考慮到不同排版帶來的邏輯問題，整個盒子模型也可以隨之進行改變。

下圖，左邊是物理盒子模型，右邊是邏輯屬性下的盒子模型。

 

左：物理盒子 | 右：邏輯盒子

物理方向與邏輯方向重疊

當然，還有這樣一種情況，就是設置的邏輯方向和物理方向重疊，譬如我們給一個正常從左往右，從上至下的元素同時設置 padding-top 和 padding-block-start，看看會發生什么：

div { 
    padding-top: 120px; 
    padding-block-start: 100px; 
} 

這里如果物理方向與邏輯方向設置的 padding 重疊，將會取兩個值中后面定義的那個。這里由于 padding-block-start 后于 padding-top 定義，所以 padding 的值為 100px。

margin 和 border 同理。這里我的理解是，同個方向上還是只能存在一個 margin\padding\border，無論是邏輯方向還是物理方向，取后定義的值為準。

CodePen Demo-- 物理方向與邏輯方向重疊 DEMO 展示[9]

總結一下

總結一下，當項目開始國際化，當國內更多的業務開始出海，國際化兼容適配也會越來越重要。好在 CSS 也一直在緊跟時代，推陳出新，當你的排版布局需要考慮不同的 writing-mode 的時，你需要開始考慮使用邏輯屬性替代物理屬性!

最后

好了，本文到此結束，希望對你有幫助 :)

如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

參考文章

• [bidi(雙向文字)與RTL布局總結](https://www.cnblogs.com/dojo-lzz/p/4289423.html "bidi(雙向文字 "bidi(雙向文字)與RTL布局總結")與RTL布局總結")
• 改變CSS世界縱橫規則的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世界縱橫規則的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世界縱橫規則的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