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

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

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

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

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

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

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

左: inline-start

右: inline-end

上: block-start

下: block-end

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

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

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

在阿拉伯國(guó)家 padding-inline-start = padding-right

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

以中國(guó)和英美系國(guó)家的閱讀順序?yàn)榛鶞?zhǔn)的話，阿拉伯國(guó)家等于把左右顛倒了，而日本是把網(wǎng)頁(yè)沿順時(shí)針旋轉(zhuǎn) 90 度。

為什么 inline 表示從左右，block 表示上下呢？還記得 display: inline 嗎？此時(shí)排版是從左到右排布的，而 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 的對(duì)比：

對(duì)于絕對(duì)定位屬性 top/right/left/bottom

top: inset-block-start

bottom: inset-block-end

left: inset-inline-start

right: inset-inline-end

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

盡管這樣描述起來(lái)很復(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*/
}

但是這種屬性支持聚合寫(xiě)法：

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

對(duì)于 float 的兩個(gè)值 left right，可以很容易推測(cè)出來(lái)，會(huì)被 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)頁(yè)，將在支持的瀏覽器上自動(dòng)享受?chē)?guó)際化布局調(diào)整，不需要改變語(yǔ)法。

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

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

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

至今還沒(méi)有見(jiàn)過(guò)從下到上的網(wǎng)頁(yè)，也許這證明了從下到上是最不合理的閱讀方式。

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

目前只有兩個(gè)配置：rtl 與 ltr:

html {
  direction: rtl;
}

其實(shí) writing-mode 與 direction 結(jié)合起來(lái)也沒(méi)什么問(wèn)題，比如網(wǎng)頁(yè)布局變成 vertical-rl - 從右到左，那么 direction 的 ltr 就等于是從上到下了。

最后還有一些懸而未決的問(wèn)題，比如如何開(kāi)啟智能布局？一種方式是：

html {
  flow-mode: physical;
  /*or*/
  flow-mode: logical;
}

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

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

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

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

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

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

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

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

這次改造是沖著 left right width height 等明顯帶有文化色彩的語(yǔ)法來(lái)的。

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

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

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

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

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

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

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

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