精读《国际化布局 - Logical Properties》

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

若是你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。