1引言“一带一路”正在积极推动中国的国际化进程，前端网站也面临着前所未有的国际化挑战。那么如何积极响应“一带一路”战略，推进网站国际化呢？可以先开始考虑国际布局。本周的精修文章是：new-css-logical-properties，通过全新的CSS技术实现国际化布局。CSSLogicalProperties是一种新的CSS布局方案，没错，就像几年前的Flex布局和Grid布局一样，CSSLogicalProperties方案不出所料被微软封杀：不过没关系，无论是Flex还是Grid我们都是遍。虽然Proxy还没有被微软支持，但是在Edge中已经支持了。我相信CSS逻辑属性也是如此。现在可以先在国外环境使用。在国内过了几年，Edge支持或者被淘汰了，然后就可以用了。2概述老盒子模型告诉我们左、右、上、下四个方向，但是在新模型中，请记住inline-startinline-endblock-startblock-end:(LTR)对应关系如下：left:inline-startRight:inline-endtop:block-startbottom:block-end这些适合marginpadding边框修改，比如margin-left,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）：height:min-inline-sizemax-height:max-inline-size下图是BoxModel和Logical的对比：absolutepositioning对于绝对定位属性top/right/left/bottomtop:inset-block-startbottom:inset-block-endleft:inset-inline-startright:inset-inline-end和上、下、左、右表一样的记忆方式，前面加了inset前缀。虽然这样描述很复杂：.popup{position:fixed;插入块开始：0；/*top-英文*/inset-block-end:0;/*底部-英文*/inset-inline-start:0;/*left-英文*/inset-inline-end:0;/*right-inEnglish*/}但是这个属性支持聚合写法：.popup{position:fixed;插图：0000；/*top,right,bottom,left-英文*/}float对于float的两个值left和right，很容易推断会被inline-start和inline-end（LTR）代替:float:left=float:inline-startfloat:right=float:inline-endText-aligntext-align也有leftright属性，替换为startend(LTR):text-align:left=text-align:starttext-align:right=text-align:endCssGrid和Flexbox使用cssgrid和flexbox布局方案的网页将在支持的浏览器上自动享受国际化布局调整，而无需更改语法。Writing-mode到目前为止，我所看到的是Css对排版的标准化。Grid和Flexbox的API比较新，定义也比较规范，所以不需要改动。旧的display、position、width、height、float等API需要修改。语义转换。下面我们就来说说布局国际化中最关键的部分。目前我们遇到的网页都是自上而下的，但是其他文化就不一样了。可以通过配置writing-mode改变整个网页的布局：writing-mode:horizo??ntal-tb=fromtoptobottomwriting-mode:vertical-rl=fromrighttoleft如日本文化writing-mode:vertical-lr=fromleftto比如蒙古文化，至今还没有见过从下到上的网页。或许这证明了从下往上阅读是最不合理的方式。Direction是一个排版属性，writing-mode控制网页的方向，direction控制文字对齐的方向。目前只有两种配置：rtl和ltr:html{direction:rtl;}其实writing-mode和direction结合是没有问题的。比如网页的布局变成了vertical-rl——从右到左，那么方向的ltr就等于Fromtoptobottom。最后还有一些悬而未决的问题，比如如何开启智能布局？一种方式是：html{flow-mode:physical;/*or*/flow-mode:logical;}另外@meta配置中的max-width也需要换成max-inline-size，line-height需要换成line-size，border-width需要换成取而代之的是border-size等。3精读整个LogicalProperties规范似乎是一种不可逆转的趋势，同时也代表了W3C规范在排版方面的全球化。为什么要改语法第一个问题是这样的。我们习惯的lefttoprightbottom语法需要改成inline-startblock-end这样稍微晦涩的语法，可以发现新语法和旧语法完全是一对一等价的，即就是，可以交给一个转换程序来做！可见这是习惯问题。W3C希望重塑国际化布局的语义，但原来的左上角不能承受这些语义，只好更换。新版规范要求开发者进行抽象，将本国的习惯抽象成与习惯无关的描述。但是对于每一个前端从业者来说，lefttop之类的描述估计已经成为了肌肉记忆，改规范还是非常困难的。未来前端社区可能会出现三种解决方案：保守派——使用babel对原有语法进行转换，用新语法做一对一的映射转换，比如position:left->position:inset-inline-开始。该方案成本最低，且不会改变开发者的习惯，因此最有可能被国内企业率先采用。在商业环境中，最大的阻力无非是成本和共识。这个布局规范同时触及了这两点，可能会让团队趋于保守。相容派——其实就是双面派。使用babel工具做映射和保守一样，但是新的代码建议用新的语法写。如果团队中有人不遵循新规范，则会被工具自动转换为新规范。这种软需求会导致两套团队布局代码，但最终效果并没有什么神奇的效果。长期来看不利于维护，但仍是一种比较妥协的策略。Reformist-使用脚本将项目中的旧规范换成新规范，让团队未来的代码按照新的布局规范编写。很明显，这一派抓住了迁移成本低的优势，却没有考虑到人为因素的习惯性迁移成本，如何说服别人理解新规范，让“未来加入的同事”也认同与和遵循这套新的规范或许是最大的不确定性。为什么不需要修改FlexGrid语法？这种修改是针对左右宽高等明显的文化语法。但是Flex语法已经将方向定义转化为抽象的开始和结束，中心没有歧义，所以FlexBox语法不需要改变。Grid是一种分割单元格的语法，不涉及上下左右的具体描述，所以也符合国际语义。4总结那么为什么W3C直到现在才改变语法呢？你之前没有想过吗？或许是真的，或许是因为推广的成本，或许当时的文明发展阶段没有意识到文化的差异会导致布局方式的不同。当LogicalProperties特性出现时，意味着人类全球化已经突破翻译维度，开始向布局方式等其他维度扩散。除了版面的国际化，使用数字的习惯也需要国际化。您可以阅读这篇扩展文章。跟欧洲人打交道，一定要知道他们是怎么写数字的，不然你就吃亏了！.那么除了这些之外，国际化战略还有哪些维度呢？除了语言翻译，国际化还需要准备哪些工作？欢迎在下方留言。讨论地址为：京都《国际化布局 - Logical Properties》·Issue#121·dt-fe/weekly想参与讨论的请戳这里，每周都有新话题，周末或周一发布。前端精读——帮你过滤靠谱的内容。
