日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
CSS世界中方位與順序的規(guī)則與演進之路

在 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 個屬性都與排版順序相關，互有關聯(lián)但作用各異。

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

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

writing-mode 示意

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

direction 示意

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

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.     
  3. 1
    4.  
  
  
  
  
  4.     
  5. 2
    6.  
  
  
  
  
  6.     
  7. 3
    8.  
  
  
  
  
  8.     
  9. 4
    10.  
  
  
  
  
  10.  
    11. 
  
  
  
  
  11. 這是一段正常順序的文本
     
    12.

簡單的 CSS 如下：

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

正常情況下的樣式如下：

我們分別給兩組元素的父容器

和

    加上 direction: ltr 及 direction: rtl，則最終效果如下：

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

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

    unicode-bidi 示意

    這就需要請出 unicode-bidi 了。

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

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

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

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

    結(jié)果如下：

    放到一起比較：

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

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

    Unicode 雙向算法

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

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

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

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

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

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

    1. html實體 - ‎ 與 ‏）
    2. 與 標簽 與 dir 屬性
    3. CSS 屬性 direction + unicode-bidi

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

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

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

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

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

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

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.     
      涼州詞
       
      3. 
  
  
  
  
    3.     
      葡萄美酒夜光杯,
       
      4. 
  
  
  
  
    4.     
      欲飲琵琶馬上催。
       
      5. 
  
  
  
  
    5.     
      醉臥沙場君莫笑,
       
      6. 
  
  
  
  
    6.     
      古來征戰(zhàn)幾人回。
       
      7.
 

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

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

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

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

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

得到這樣的排版布局：

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

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

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

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

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

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

結(jié)果如下：

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

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

使用 writing-mode 改變元素方位

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. div:hover { 
    2. 
  
  
  
  
  2.     writing-mode: vertical-rl; 
    3. 
  
  
  
  
  3. } 
    4.

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

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

CSS 中的邏輯屬性

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

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

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.     
    涼州詞
     
    3. 
  
  
  
  
  3.     
    葡萄美酒夜光杯,
     
    4. 
  
  
  
  
  4.     
    欲飲琵琶馬上催。
     
    5. 
  
  
  
  
  5.     
    醉臥沙場君莫笑,
     
    6. 
  
  
  
  
  6.     
    古來征戰(zhàn)幾人回。
     
    7.
 
  •  
  •     

    涼州詞

     
  •     

    葡萄美酒夜光杯,

     
  •     

    欲飲琵琶馬上催。

     
  •     

    醉臥沙場君莫笑,

     
  •     

    古來征戰(zhàn)幾人回。

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

    可以看到，無論 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：

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

    這次再看看效果：

    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。

    邏輯屬性下的盒子模型

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

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

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

    物理方向與邏輯方向重疊

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

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

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

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

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

    總結(jié)一下

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

    最后

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

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

    參考文章

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


    分享題目：CSS世界中方位與順序的規(guī)則與演進之路
    當前URL：http://www.dlmjj.cn/article/djcpjpp.html