精读《国际化布局 - 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
如果你想参与讨论,请点击这里,每周都有新的主题,周末或周一发布。前端精读 - 帮你筛选靠谱的内容。
精读《国际化布局 - Logical Properties》相关推荐
- 【韩松】Deep Gradient Comression_一只神秘的大金毛_新浪博客
<Deep Gradient Compression> 作者韩松,清华电子系本科,Stanford PhD,深鉴科技联合创始人.主要的研究方向是,神经网络模型压缩以及硬件架构加速. 论文链 ...
- 【韩松】Deep Gradient Comression
<Deep Gradient Compression> 作者韩松,清华电子系本科,Stanford PhD,深鉴科技联合创始人.主要的研究方向是,神经网络模型压缩以及硬件架构加速. 论文链 ...
- [文献阅读] Sparsity in Deep Learning: Pruning and growth for efficient inference and training in NN
文章目录 1. 前言 2. Overview of Sparsity in Deep Learning 2.1 Generalization 2.2 performance and model sto ...
- 【翻译】Batch Normalization: Accelerating Deep Network Trainingby Reducing Internal Covariate Shift
Batch Normalization: Accelerating Deep Network Trainingby Reducing Internal Covariate Shift Sergey I ...
- 模型加速--CLIP-Q: Deep Network Compression Learning by In-Parallel Pruning-Quantization
CLIP-Q: Deep Network Compression Learning by In-Parallel Pruning-Quantization CVPR2018 http://www.sf ...
- 论文笔记30 -- (视频压缩)【CVPR2021】FVC: A New Framework towards Deep Video Compression in Feature Space
<FVC: A New Framework towards Deep Video Compression in Feature Space> CVPR 2021 的一篇Oral 提出了特征 ...
- 端到端图像压缩《Asymmetric Gained Deep Image Compression With Continuous Rate Adaptation》
Asymmetric Gained Deep Image Compression With Continuous Rate Adaptation 一 简介 二 内容 2.1 目前方法的缺陷 2.2 整 ...
- 深度学习视频压缩1—DVC: An End-to-end Deep Video Compression Framework
本文是第一篇端到端使用神经网络来进行视频压缩的论文, github地址:GitHub - GuoLusjtu/DVC: DVC: An End-to-end Deep Video Compressio ...
- 【论文阅读】Deep Compositional Captioning: Describing Novel Object Categories without Paired Training Data
[论文阅读]Deep Compositional Captioning: Describing Novel Object Categories without Paired Training Data ...
- CVPR 2018 TRACA:《Context-aware Deep Feature Compression for High-speed Visual Tracking》论文笔记
理解出错之处望不吝指正. 本文的模型叫做TRACA.模型中使用多个expert auto-encoder,在预训练阶段,每个expert auto-encoder针对一个特定类进行训练:在tracki ...
最新文章
- UVA 10269 Adventure of Super Mario
- Xshell使用xftp传输文件,使用pure-ftpd搭建ftp服务
- ios .a文件支持结构合并arm64 armv7 i386 x86_64
- 网站全屏雪花飞插件代码
- 开启mysql日志记录_Mysql开启日志记录
- 790页微软官方《.Net核心编程》高清版PDF,提供下载
- 【推荐视频】分布式机器学习框架如何助力高维实时推荐系统
- gitter 卸载_最佳Gitter频道:转到
- SptingBoot构建电商基础秒杀项目时遇到的问题
- edp协议 netty_大牛轻松带你玩转Arduino智能硬件:EDP协议连接onenet平台
- 个人关于颈椎病治疗和保养的一些经验总结!
- SpringCloudSpringBoot集成Acivity6.0
- PowerDesigner一键导出数据库设计表结构
- USB1.1学习笔记
- dw2019连接mysql数据库_VS 2019 连接MySQL数据库配置记录
- 群晖DDNS和端口转发等相关讲解
- RabbitMQ了解——>安装——>入门
- 1-编程基础及Python环境部署
- 云服务器怎么装安卓系统,云服务器怎样装安卓系统
- PI实时数据库接口技术的应用
热门文章
- 折叠菜单,选择下拉(手风琴)
- FileInputStream 把文件作为字节流进行读操作
- linux gcc编译C程序 分享
- sharepoint 页面定制经验小结
- 关于纯HTML格式写入word
- java (lodop) 打印实例
- 老男孩python课后作业_老男孩python基础知识练习题(一)中
- input只能输入数字_Python基础第一个案例:猜数字游戏,这个都写不出,那就放弃吧...
- php返回支付状态,magento paypal返回支付状态
- java servlet 3_java – Servlet 2.5和3之间有什么区别?