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

時間 2019-11-06

標籤精讀國際化佈局 logical properties 简体版

原文原文鏈接

1 引言

「一帶一路」正在積極推進中國的國際化進程，前端網站也面臨着史無前例的國際化挑戰。那麼怎麼才能積極響應「一帶一路」戰略，推進網站的國際化工做呢？能夠先從國際化佈局開始考慮。css

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

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

不過不要緊，不管是 Flex、Grid 咱們都挺過來了，Proxy 雖然還不被微軟支持，不過已經在 Edge 被支持了。相信 CSS Logical Properties 也同樣，如今能夠率先使用在國外環境，國內等若干年後 Edge 支持或者被淘汰了，就能夠用上了。git

2 概述

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

（LTR）對應關係以下：瀏覽器

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

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

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

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

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

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

寬高

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 的對比：

絕對定位

對於絕對定位屬性 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 = 從左到右好比蒙古文化

至今尚未見過從下到上的網頁，也許這證實了從下到上是最不合理的閱讀方式。

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 工具作映射這一點與保守派相同，可是新代碼推薦用新語法編寫，若是團隊中有人不遵循新規範，也會被工具自動轉換爲新規範。這種軟要求會致使團隊佈局代碼存在兩套，但最終效果卻沒有問題的神奇效果，長遠來講不利於維護，但不失爲一種較爲妥協的策略。
改革派 - 利用腳本，將項目裏舊規範替換成新規範，並讓團隊將來的代碼遵循新的佈局規範編寫。很顯然，這派抓住了遷移成本小這個優點，但沒有考慮到人這個因素的習慣遷移成本，如何說服其餘人理解新規範，並作到讓「將來加入的同事」也能認同並遵循這套新規範，也許是最大的不肯定因素。