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
如果你想參與討論,請點選這裡,每週都有新的主題,週末或週一釋出。前端精讀 – 幫你篩選靠譜的內容。