自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

CSS 世界中方位與順序的規(guī)則與演進(jìn)之路

作者：SbCoco
開(kāi)發(fā) 前端
在 CSS 中，我們經(jīng)常會(huì)與各種方向方位打交道。本文將捋一捋 CSS 世界中的方位與順序，探尋其中一些有意思的點(diǎn)。

[[413367]]

在 CSS 中，我們經(jīng)常會(huì)與各種方向方位打交道。

譬如 margin、padding，它們就會(huì)有 margin-left、margin-right 或者是 padding-left、padding-right。還有定位中的 left、top、right、bottom，它們表示了上下左右不同的方位。

還有一種情況是從x方位到x方位，譬如 writing-mode、direction，它代表了一種順序，表示塊流動(dòng)方向，或者文字書(shū)寫(xiě)的方向等。

本文將捋一捋 CSS 世界中的方位與順序，探尋其中一些有意思的點(diǎn)。

writing-mode & direction & unicode-bidi

在 CSS 世界中，這 3 個(gè)屬性都與排版順序相關(guān)，互有關(guān)聯(lián)但作用各異。

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

單純看定義有點(diǎn)懵逼，我們簡(jiǎn)單的看幾個(gè)應(yīng)用示意圖：

writing-mode 示意

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

圖片

direction 示意

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

  • direction: ltr：默認(rèn)屬性?？稍O(shè)置文本和其他元素的默認(rèn)方向是從左到右。
  • direction: rtl：可設(shè)置文本和其他元素的默認(rèn)方向是從右到左。

有點(diǎn)繞，所以上 Demo 最為直觀。假設(shè)，我們有如下結(jié)構(gòu)：

  1. <ul class="wrap"> 
  2.     <li>1</li> 
  3.     <li>2</li> 
  4.     <li>3</li> 
  5.     <li>4</li> 
  6. </ul> 
  7. <p>這是一段正常順序的文本</p> 

簡(jiǎn)單的 CSS 如下：

  1. p, ul { 
  2.     background: #ff00ff50; 
  3.     padding: 10px; 
  4. } 
  5. ul { 
  6.     display: flex; 
  7.     justify-content: space-between; 
  8.      
  9.     & > li { 
  10.         border: 1px solid #333; 
  11.     } 
  12. } 

正常情況下的樣式如下：

圖片

我們分別給兩組元素的父容器 <p> 和 <ul> 加上 direction: ltr 及 direction: rtl，則最終效果如下：

圖片

可以看到，direction 可以改變子元素的排列方向，但是它確無(wú)法改變單段文本內(nèi)(或是內(nèi)聯(lián)元素內(nèi))，每一個(gè)文字的書(shū)寫(xiě)順序。

那如果，我希望 這是一段正常順序的文本 這段文字，不是從左向右進(jìn)行書(shū)寫(xiě)，而是反過(guò)來(lái)，從右到左進(jìn)行書(shū)寫(xiě)，又該如何設(shè)置呢?

unicode-bidi 示意

這就需要請(qǐng)出 unicode-bidi 了。

單獨(dú)使用 direction: rtl 無(wú)法使單段文本內(nèi)(或是內(nèi)聯(lián)元素內(nèi))，文字的書(shū)寫(xiě)順序改為從右至左。需要配合 unicode-bidi。

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

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

  1. <p>這是一段正常順序的文本</p> 
  1. p { 
  2.     direction: rtl; 
  3.     unicode-bidi: bidi-override; 
  4. } 

結(jié)果如下：

圖片

放到一起比較：

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

圖片

這里涉及了一個(gè)非常重要的知識(shí) -- Unicode 雙向算法。

Unicode 雙向算法

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

對(duì)于文字書(shū)寫(xiě)習(xí)慣，分為：

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

在現(xiàn)代計(jì)算機(jī)應(yīng)用中，最常用來(lái)處理雙向文字的算法是 Unicode 雙向算法(Unicode Bidirectional Algorithm)。

一個(gè)區(qū)域內(nèi)有總體方向，決定從這個(gè)區(qū)域的哪邊開(kāi)始書(shū)寫(xiě)文字，通常稱(chēng)為基礎(chǔ)方向。瀏覽器會(huì)根據(jù)你的默認(rèn)語(yǔ)言來(lái)設(shè)置默認(rèn)的基礎(chǔ)方向，如英語(yǔ)、漢語(yǔ)的基礎(chǔ)方向?yàn)閺淖蟮接?，阿拉伯語(yǔ)的基礎(chǔ)方向?yàn)閺挠业阶蟆?/p>

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

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

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

writing-mode & direction & unicode-bidi 的一些應(yīng)用

除去本身的功能，下面我們來(lái)看看它們其它的一些應(yīng)用場(chǎng)景。

使用 writing-mode 進(jìn)行創(chuàng)意排布布局

writing-mode 非常適合用于進(jìn)行一些創(chuàng)意排版。

基礎(chǔ)的類(lèi)似中國(guó)古詩(shī)詞的一些豎向展示：

  1. <div class="g-wrap"> 
  2.     <h2>涼州詞</h2> 
  3.     <p>葡萄美酒夜光杯,</p> 
  4.     <p>欲飲琵琶馬上催。</p> 
  5.     <p>醉臥沙場(chǎng)君莫笑,</p> 
  6.     <p>古來(lái)征戰(zhàn)幾人回。</p> 
  7. </div> 

給 .g-wrap 分別添加 writing-mode: vertical-rl 或者 writing-mode: vertical-lr 得到不同的效果：

  1. .rl { 
  2.     writing-mode: vertical-rl; 
  3. } 
  4. .lr { 
  5.     writing-mode: vertical-lr; 
  6. } 
圖片

CodePen Demo -- display poems by writing-mode[2]

又或者像是這樣，利用 writing-mode:vertical-rl 實(shí)現(xiàn)標(biāo)題的豎向排列，搭配內(nèi)容形成有意思的報(bào)紙排版：

  1. <div> 
  2.   <h2>Title Loomings</h2> 
  3.   <p>Call me Ishmael. Some years ago- never mind ho.... 
  4.   </p> 
  5. </div> 
  1. div { 
  2.   width: 750px; 
  3.   padding-left: 150px; 
  4. } 
  5. h2 { 
  6.   position: absolute; 
  7.   writing-mode: vertical-rl; 
  8. } 

得到這樣的排版布局：

圖片

CodePen Demo -- writing-mode Layout Demo[3]

改變文本溢出省略位置，使之在頭部進(jìn)行省略

我們都知道，本文超長(zhǎng)溢出的省略，通過(guò)都是在文本的最末尾。像是這樣：

  1. <p>Make CSS Ellipsis Beginning of String</p> 
  1. p { 
  2.     overflow: hidden; 
  3.     text-overflow: ellipsis; 
  4.     white-space: nowrap; 
  5. } 
圖片

這里，我們可以通過(guò) direction，將省略打點(diǎn)的位置，從尾部移動(dòng)至頭部：

  1. p { 
  2.     direction: rtl; 
  3. } 

結(jié)果如下：

圖片

嘗試了下運(yùn)用在多行省略中，多行省略的打點(diǎn)會(huì)出現(xiàn)在最后一行的左側(cè)，不符合需求。

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

使用 writing-mode 改變?cè)胤轿?/p>

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

我們可以通過(guò) writing-mode: vertical-rl，將元素轉(zhuǎn)一個(gè) 90° 角：

  1. <div>➤</div> 
  1. div:hover { 
  2.     writing-mode: vertical-rl; 
  3. } 

看看效果，當(dāng) hover 的時(shí)候，將箭頭從向右➡️改為向下🔽 ：

圖片

當(dāng)然，現(xiàn)在這個(gè)功能完全可以用 transform 替代，但是在之前需要兼容 IE 系列的時(shí)候，不失為一個(gè)有意思的小技巧。

CSS 中的邏輯屬性

下面一個(gè)章節(jié)，我們聊聊 CSS 中的邏輯位置。

我們知道，在我們使用類(lèi)似 margin 和 padding 的時(shí)候，可以單獨(dú)控制每個(gè)方向，例如 margin-top、padding-left。

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

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

  1. <div class="g-wrap pt"> 
  2.     <h2>涼州詞</h2> 
  3.     <p>葡萄美酒夜光杯,</p> 
  4.     <p>欲飲琵琶馬上催。</p> 
  5.     <p>醉臥沙場(chǎng)君莫笑,</p> 
  6.     <p>古來(lái)征戰(zhàn)幾人回。</p> 
  7. </div> 
  8. <div class="g-wrap pt rl"> 
  9.     <h2>涼州詞</h2> 
  10.     <p>葡萄美酒夜光杯,</p> 
  11.     <p>欲飲琵琶馬上催。</p> 
  12.     <p>醉臥沙場(chǎng)君莫笑,</p> 
  13.     <p>古來(lái)征戰(zhàn)幾人回。</p> 
  14. </div> 
  1. .pt { 
  2.     padding-top: 100px; 
  3. } 
  4. .rl { 
  5.     writing-mode: vertical-rl; 
  6. } 
圖片

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

基于這種不同排版規(guī)則，物理方向可能會(huì)帶來(lái)一定的困擾這個(gè)問(wèn)題，CSS 在 CSS Logical Properties and Values Level 1[6] 規(guī)范中，推出了 CSS 邏輯屬性。

CSS 邏輯屬性與值是 CSS 的一個(gè)新的模塊，其引入的屬性與值能做到從邏輯角度控制布局，而不是從物理、方向或維度來(lái)控制。

還是上述的 DEMO，我們可以使用 padding-block-start 替代 padding-top。

重點(diǎn)：使用 padding-block-start 替代 padding-top：

  1. .pt { 
  2. -   padding-top: 100px; 
  3. +   padding-block-start: 100px; 
  4. } 
  5. .rl { 
  6.     writing-mode: vertical-rl; 
  7. } 

這次再看看效果：

圖片

padding 的位置由物理上的上方，變成了邏輯上的上方。

完整的 Demo 你可以戳這里：CodePen Demo-- 物理方向與邏輯方向展示[7]

margin、padding、border、relative 物理屬性到邏輯屬性的映射

類(lèi)似這樣的屬性，在規(guī)范中定義了挺多的，簡(jiǎn)單羅列一下具體的映射規(guī)則：

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

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

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

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

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

在邏輯屬性中沒(méi)有方向性的概念，只有開(kāi)始(start)和結(jié)束(end)、塊(block)和內(nèi)聯(lián)(inline)的概念。比如說(shuō)，在從左到右(LTR)中，start 是 left，但在從右到左(RTL)，它是 right。

邏輯屬性下的盒子模型

考慮到不同排版帶來(lái)的邏輯問(wèn)題，整個(gè)盒子模型也可以隨之進(jìn)行改變。

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

 圖片

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

物理方向與邏輯方向重疊

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

  1. div { 
  2.     padding-top: 120px; 
  3.     padding-block-start: 100px; 
  4. } 
圖片

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

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

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

總結(jié)一下

總結(jié)一下，當(dāng)項(xiàng)目開(kāi)始國(guó)際化，當(dāng)國(guó)內(nèi)更多的業(yè)務(wù)開(kāi)始出海，國(guó)際化兼容適配也會(huì)越來(lái)越重要。好在 CSS 也一直在緊跟時(shí)代，推陳出新，當(dāng)你的排版布局需要考慮不同的 writing-mode 的時(shí)，你需要開(kāi)始考慮使用邏輯屬性替代物理屬性!

最后

好了，本文到此結(jié)束，希望對(duì)你有幫助 :)

如果還有什么疑問(wèn)或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬(wàn)望告知。

參考文章

  • [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

 

責(zé)任編輯：姜華 來(lái)源： iCSS前端趣聞
CSS 技巧方位與順序
相關(guān)推薦

2016-08-16 17:44:19

華為

2010-08-27 13:07:00

CSS規(guī)則

2021-09-03 23:01:58

CSS 技巧代碼重構(gòu)

2023-07-02 11:14:21

工具TypeScript框架

2016-06-15 14:21:09

2010-09-01 09:03:56

CSS優(yōu)先權(quán)

2010-08-27 09:51:25

idclassCSS

2022-09-01 08:01:59

零信任TNA網(wǎng)絡(luò)

2020-01-18 09:11:03

代碼程序編碼

2009-08-05 16:14:32

CDMA網(wǎng)絡(luò)的演進(jìn)無(wú)線網(wǎng)絡(luò)發(fā)展

2018-03-27 10:06:26

對(duì)象存儲(chǔ)演進(jìn)

2011-03-21 15:08:56

MongoDBCouchDB

2017-09-30 09:10:21

Java重寫(xiě)變量

2010-09-01 13:44:23

idclassCSS

2016-08-01 13:29:51

2023-02-01 10:11:06

轉(zhuǎn)轉(zhuǎn)容器日志

2014-01-15 09:09:56

2015-07-17 08:23:06

品高云計(jì)算

2012-11-19 11:36:16

PTNLTE網(wǎng)絡(luò)承載

2016-03-15 16:24:47

集群調(diào)度框架演進(jìn)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)