精讀《國際化佈局 – Logical Properties》

黃子毅發表於2019-02-16

1 引言

“一帶一路” 正在積極推動中國的國際化程式，前端網站也面臨著前所未有的國際化挑戰。那麼怎麼才能積極響應 “一帶一路” 戰略，推動網站的國際化工作呢？可以先從國際化佈局開始考慮。

本週精讀的文章是：new-css-logical-properties，通過一種新的 CSS 技術，實現國際化佈局。

CSS Logical Properties 是一種新的 CSS 佈局方案，嗯對，和幾年前的 Flex 佈局、Grid 佈局一樣，CSS Logical Properties 方案不出意外的受到了微軟的阻撓：

精讀《國際化佈局 – Logical Properties》

不過沒關係，不論是 Flex、Grid 我們都挺過來了，Proxy 雖然還不被微軟支援，不過已經在 Edge 被支援了。相信 CSS Logical Properties 也一樣，現在可以率先使用在國外環境，國內等若干年後 Edge 支援或者被淘汰了，就可以用上了。

2 概述

舊的盒子模型告訴我們左右上下這四個方向，但在新的模型中，請記住 inline-start inline-end block-start block-end:

精讀《國際化佈局 – Logical Properties》

（LTR）對應關係如下：

  • 左: inline-start
  • 右: inline-end
  • 上: block-start
  • 下: block-end

這些適用於 margin padding border 修飾，比如 margin-left 中，left -> 左 -> inline-start -> margin-inline-start

這有點像把座標系概念引入了佈局，對於不同國家，inline 與 block 的方向是不同的：

  • 在東亞絕大多數國家、英美系國家 padding-inline-start = padding-left
  • 在阿拉伯國家 padding-inline-start = padding-right
  • 在日本 padding-inline-start = padding-top

以中國和英美系國家的閱讀順序為基準的話，阿拉伯國家等於把左右顛倒了，而日本是把網頁沿順時針旋轉 90 度。

為什麼 inline 表示從左右，block 表示上下呢？還記得 display: inline 嗎？此時排版是從左到右排布的，而 display: block 的排版是從上到下的。

寬高

width height 也需要換成 inline-size 與 block-size，整理如下（LTR）：

  • width: inline-size
  • min-width: min-inline-size
  • max-width: max-inline-size
  • height: block-size
  • min-height: min-inline-size
  • max-height: max-inline-size

下圖是 Box Model 與 Logical 的對比：

精讀《國際化佈局 – Logical Properties》

絕對定位

對於絕對定位屬性 top/right/left/bottom

  • top: inset-block-start
  • bottom: inset-block-end
  • left: inset-inline-start
  • right: inset-inline-end

記得方式與 上下左右 表相同，在前面加上 inset 字首。

儘管這樣描述起來很複雜：

.popup {
  position: fixed;
  inset-block-start: 0; /*top - in English*/
  inset-block-end: 0; /*bottom - in English*/
  inset-inline-start: 0; /*left - in English*/
  inset-inline-end: 0; /*right - in English*/
}
複製程式碼

但是這種屬性支援聚合寫法：

.popup {
  position: fixed;
  inset: 0 0 0 0; /*top, right, bottom, left - in English*/
}
複製程式碼

Float

對於 float 的兩個值 left right，可以很容易推測出來，會被 inline-start 與 inline-end 取代（LTR）：

  • float: left = float: inline-start
  • float: right = float: inline-end

Text-align

text-align 也有 left right 屬性，分別取代為 start end（LTR）:

  • text-align :left = text-align: start
  • text-align :right = text-align: end

Css Grid 與 Flexbox

使用 css grid 與 flexbox 佈局方案的網頁，將在支援的瀏覽器上自動享受國際化佈局調整，不需要改變語法。

Writing-mode

目前為止，看到的是 Css 對排版含義的規範化，Grid 與 Flexbox 由於 API 比較新，定義的較為規範，所以不用變，而舊的 display, position, width, height, float 等 API 需要進行語義化改造。

現在就要聊到最關鍵的佈局國際化部分，我們至今為止遇到的網頁都是從上到下的，但其他文化卻不同。可以通過配置 writing-mode 讓整個網頁佈局改變：

writing-mode: horizontal-tb = 從上到下
writing-mode: vertical-rl = 從右到左 比如日本文化
writing-mode: vertical-lr = 從左到右 比如蒙古文化

精讀《國際化佈局 – Logical Properties》

至今還沒有見過從下到上的網頁，也許這證明了從下到上是最不合理的閱讀方式。

Direction

這是一個排版屬性，writing-mode 是控制網頁方向的，而 direction 是控制文字對齊方向的。

目前只有兩個配置：rtl 與 ltr:

html {
  direction: rtl;
}
複製程式碼

其實 writing-mode 與 direction 結合起來也沒什麼問題，比如網頁佈局變成 vertical-rl – 從右到左，那麼 direction 的 ltr 就等於是從上到下了。

最後還有一些懸而未決的問題，比如如何開啟智慧佈局？一種方式是：

html {
  flow-mode: physical;
  /*or*/
  flow-mode: logical;
}
複製程式碼

另外，像 @meta 配置中的 max-width 也要替換為 max-inline-size, line-height 需要被替換為 line-size，border-width 需要被替換為 border-size 等等。

3 精讀

整個 Logical Properties 規範看下來是個不可逆的趨勢，也代表著 W3C 規範在排版方面的全球化工作。

為什麼要改造語法

第一個問題就是這個，我們習以為常的 left top right bottom 語法都需要改成 inline-start block-end 等略微晦澀的語法，而且你可以發現，新語法與舊語法是完全一對一對等的，也就是完全可以交給某個轉換程式去做！

可以看出，這是一個習慣問題，W3C 希望重塑國際化佈局的語義，而原有的 left top 等無法承擔這些語義，所以只好換掉。

新版規範要求開發者做出一個抽象，把自己國家的習慣抽象成習慣無關的描述。但對於每個前端從業者來說，left top 等描述估計已經成為肌肉記憶了，想要改變規範還是挺難的，未來前端社群也許會出現三種解決方案：

  • 保守派 – 利用 babel 將原有語法與新語法做一對一對映轉換，比如 position: left -> position: inset-inline-start。這種方案 成本最小，且不改變開發者習慣，所以最有可能被國內公司率先採用。在商業環境推動一件事情，最大的阻力無非是 成本 與 共識，這次的佈局規範同時觸及了這兩個點，可能讓團隊傾向於做保守派。
  • 相容派 – 其實就是兩面派，利用 babel 工具做對映這一點與保守派相同，但是新程式碼推薦用新語法編寫，如果團隊中有人不遵循新規範，也會被工具自動轉換為新規範。這種軟要求會導致團隊佈局程式碼存在兩套，但最終效果卻沒有問題的神奇效果，長遠來說不利於維護，但不失為一種較為妥協的策略。
  • 改革派 – 利用指令碼，將專案裡舊規範替換成新規範，並讓團隊未來的程式碼遵循新的佈局規範編寫。很顯然，這派抓住了遷移成本小這個優勢，但沒有考慮到人這個因素的習慣遷移成本，如何說服其他人理解新規範，並做到讓 “未來加入的同事” 也能認同並遵循這套新規範，也許是最大的不確定因素。

為什麼 Flex Grid 語法不需改造？

這次改造是衝著 left right width height 等明顯帶有文化色彩的語法來的。

然而 Flex 語法已經將方向定義轉化為抽象的 start 與 end，而 center 是沒有歧義的，所以 FlexBox 語法不用改。

而 Grid 是一種拆分單元格的語法，也不涉及具體上下左右的描述，所以也符合國際化語義。

4 總結

那麼為什麼 W3C 到現在才改語法，難道以前沒有想到嗎？也許還真是，或者處於推廣成本的考量，或者當時的文明發展階段還沒有意識到文化差異會導致佈局方式有所不同。

當出現 Logical Properties 特性時，說明人類的全球化已經突破了翻譯維度，開始向比如佈局方式等其它維度蔓延了。

除了佈局需要國際化，使用數字的習慣也需要國際化，可以閱讀這篇擴充文章 和歐洲人打交道一定要知道他們數字寫法，否則吃大虧！。

那麼除了這些，還有哪些維度的國際化策略呢？除了語言的翻譯，國際化還有哪些工作需要準備？歡迎在下面留言。

討論地址是：精讀《國際化佈局 – Logical Properties》 · Issue #121 · dt-fe/weekly

如果你想參與討論，請點選這裡，每週都有新的主題，週末或週一釋出。前端精讀 – 幫你篩選靠譜的內容。

相關文章