1 引言

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

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

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

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

2 概述

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

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

絕對定位

對于絕對定位屬性 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 工具做映射這一點與保守派相同，但是新代碼推薦用新語法編寫，如果團隊中有人不遵循新規范，也會被工具自動轉換為新規范。這種軟要求會導致團隊布局代碼存在兩套，但最終效果卻沒有問題的神奇效果，長遠來說不利于維護，但不失為一種較為妥協的策略。
• 改革派 - 利用腳本，將項目里舊規范替換成新規范，并讓團隊未來的代碼遵循新的布局規范編寫。很顯然，這派抓住了遷移成本小這個優勢，但沒有考慮到人這個因素的習慣遷移成本，如何說服其他人理解新規范，并做到讓 “未來加入的同事” 也能認同并遵循這套新規范，也許是最大的不確定因素。

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

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

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

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

4 總結

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

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

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

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

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

如果你想參與討論，請點擊這里，每周都有新的主題，周末或周一發布。前端精讀 - 幫你篩選靠譜的內容。

總結

以上是生活随笔為你收集整理的精读《国际化布局 - Logical Properties》的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。