摘要：引言一帶一路正在積極推動中國的國際化進程，前端網(wǎng)站也面臨著前所未有的國際化挑戰(zhàn)。本周精讀的文章是，通過一種新的技術(shù)，實現(xiàn)國際化布局。討論地址是精讀國際化布局如果你想?yún)⑴c討論，請點擊這里，每周都有新的主題，周末或周一發(fā)布。

“一帶一路” 正在積極推動中國的國際化進程，前端網(wǎng)站也面臨著前所未有的國際化挑戰(zhàn)。那么怎么才能積極響應(yīng) “一帶一路” 戰(zhàn)略，推動網(wǎng)站的國際化工作呢？可以先從國際化布局開始考慮。

本周精讀的文章是：new-css-logical-properties，通過一種新的 CSS 技術(shù)，實現(xiàn)國際化布局。

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

不過沒關(guān)系，不論是 Flex、Grid 我們都挺過來了，Proxy 雖然還不被微軟支持，不過已經(jīng)在 Edge 被支持了。相信 CSS Logical Properties 也一樣，現(xiàn)在可以率先使用在國外環(huán)境，國內(nèi)等若干年后 Edge 支持或者被淘汰了，就可以用上了。

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

（LTR）對應(yīng)關(guān)系如下：

左: inline-start

右: inline-end

上: block-start

下: block-end

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

這有點像把坐標(biāo)系概念引入了布局，對于不同國家，inline 與 block 的方向是不同的：

在東亞絕大多數(shù)國家、英美系國家 padding-inline-start = padding-left

在阿拉伯國家 padding-inline-start = padding-right

在日本 padding-inline-start = padding-top

以中國和英美系國家的閱讀順序為基準(zhǔn)的話，阿拉伯國家等于把左右顛倒了，而日本是把網(wǎng)頁沿順時針旋轉(zhuǎn) 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 的對比：

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

top: inset-block-start

bottom: inset-block-end

left: inset-inline-start

right: inset-inline-end

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

盡管這樣描述起來很復(fù)雜：

.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 的兩個值 left right，可以很容易推測出來，會被 inline-start 與 inline-end 取代（LTR）：

float: left = float: inline-start

float: right = float: inline-end

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

text-align :left = text-align: start

text-align :right = text-align: end

使用 css grid 與 flexbox 布局方案的網(wǎng)頁，將在支持的瀏覽器上自動享受國際化布局調(diào)整，不需要改變語法。

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

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

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

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

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

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

html {
  direction: rtl;
}

其實 writing-mode 與 direction 結(jié)合起來也沒什么問題，比如網(wǎng)頁布局變成 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 等等。

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

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

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

新版規(guī)范要求開發(fā)者做出一個抽象，把自己國家的習(xí)慣抽象成習(xí)慣無關(guān)的描述。但對于每個前端從業(yè)者來說，left top 等描述估計已經(jīng)成為肌肉記憶了，想要改變規(guī)范還是挺難的，未來前端社區(qū)也許會出現(xiàn)三種解決方案：

保守派 - 利用 babel 將原有語法與新語法做一對一映射轉(zhuǎn)換，比如 position: left -> position: inset-inline-start。這種方案 成本最小，且不改變開發(fā)者習(xí)慣，所以最有可能被國內(nèi)公司率先采用。在商業(yè)環(huán)境推動一件事情，最大的阻力無非是 成本 與 共識，這次的布局規(guī)范同時觸及了這兩個點，可能讓團隊傾向于做保守派。

兼容派 - 其實就是兩面派，利用 babel 工具做映射這一點與保守派相同，但是新代碼推薦用新語法編寫，如果團隊中有人不遵循新規(guī)范，也會被工具自動轉(zhuǎn)換為新規(guī)范。這種軟要求會導(dǎo)致團隊布局代碼存在兩套，但最終效果卻沒有問題的神奇效果，長遠來說不利于維護，但不失為一種較為妥協(xié)的策略。

改革派 - 利用腳本，將項目里舊規(guī)范替換成新規(guī)范，并讓團隊未來的代碼遵循新的布局規(guī)范編寫。很顯然，這派抓住了遷移成本小這個優(yōu)勢，但沒有考慮到人這個因素的習(xí)慣遷移成本，如何說服其他人理解新規(guī)范，并做到讓 “未來加入的同事” 也能認同并遵循這套新規(guī)范，也許是最大的不確定因素。

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

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

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

那么為什么 W3C 到現(xiàn)在才改語法，難道以前沒有想到嗎？也許還真是，或者處于推廣成本的考量，或者當(dāng)時的文明發(fā)展階段還沒有意識到文化差異會導(dǎo)致布局方式有所不同。

當(dāng)出現(xiàn) Logical Properties 特性時，說明人類的全球化已經(jīng)突破了翻譯維度，開始向比如布局方式等其它維度蔓延了。

除了布局需要國際化，使用數(shù)字的習(xí)慣也需要國際化，可以閱讀這篇拓展文章 和歐洲人打交道一定要知道他們數(shù)字寫法，否則吃大虧！。

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

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

如果你想?yún)⑴c討論，請點擊這里，每周都有新的主題，周末或周一發(fā)布。前端精讀 - 幫你篩選靠譜的內(nèi)容。