CSS书写模式与RTL站点构建

去年年底的时候，突然收到Web中文兴趣小组的订阅邮件，说的是，W3C发布了CSS书写模式第三版正是推荐标准，支持多种语言的书写模式。于是就去简单读了下 CSS Writing Modes Level 3，以及与之相关的万维网联盟（W3C）为多种国际语言的书写模式夯实基础。除了再一次感受到竖排文本的标准的姗姗来迟，回忆起自己10年前解决竖排文本的各种诡异手段，更多的还是对标准的发布而感到的喜悦——只是这么许多年，对竖排文本的偏爱和执念也仅存之一二。

之后总结了些棱角在团队里做了次分享，本文就是基于分享所摘录的一些内容。

双向文本(bidirectionality, bidi)

混合了两个方向的语言的单一文本块

书写模式构成

• 块朝向，writing-mode, vertical-align?
• 行朝向，direction(RTL, LTR)
• 字形朝向， text-orientation
• 字符序，unicode-bidi

枚举所有书写模式

• 拉丁语系(eg. EN, ES)：块从上到下，行从左到右
• 阿拉伯语系(eg. AR, HE) ：块从上到下，行从右到左
• 汉语系(CN, JP)：同拉丁语系，块从右到左，行从上到下，字符向上
• 古典蒙古语系: 块从右到左，行从上到下

• 中文（为什么是从右往左）
• 蒙古语（ 回鹘式 ）

垂直的问题

• 垂直书写 影响的不仅仅是布局，还有排版(比如标点符号需从水平转向垂直)
• 还影响form表单元素，图片，svg节点
• 影响overflow滚动
• 浏览器支持度，目前高度变化后重排

RTL站点

• 表现形式上，犹如左右镜像一般。
• 右上角是起始位置。所以重要的东西在右上角。

• 联合国：局部重写，属性RTL
• AliExpress：Rtl.css 整体样式重写，包含大量的浮动，定位等
• Booking：局部样式重写，样式RTL
• 维基百科：整体样式，属性RTL，因单一页面样式极其固定

• dir属性提权

冷知识：css选择器距离无关

• 无需考虑浏览器支持
• Booking body 相关 class：he lang_is_rtl rtl rtlcss，被用于后续css的复写提权
• 缺点：组件对环境依赖

dir属性提权

由于Html dir 属性设置是推荐做法（dir vs direction）

html[dir=rtl] .box {color: red;}

使用广泛且，对环境依赖较小

由于属性选择器不继承，所以我们需要更独立的方案：

• dir伪类
  • 完美的RTL样式复写形式
  • 支持性欠佳，仅Moz
  • .box:dir(rtl) { color: red; }
• lang伪类
  • 由于希伯来文几乎甚少在生活中使用，所以大多数站点而言，RTL几乎等同于阿拉伯语
  • .box:lang(ar), .box:lang(he) { color: red; }

RTL支持

少用或不用含有左右描述的绝对定位，浮动，并尽可能使用flex

justify-content: flex-start
text-align: left start

CSS Logical Properties and Values Level 1

• W3C Working Draft, 27 August 2018
• 通过提供逻辑属性来控制布局，使编写同时适用于RTL与LTR的样式成为可能
• 例如 margin-inline-start

对于站点来说，隔离左右定位样式并单独提供而不是复写能有效提高效率。

但对于组件粒度来说，还是应该在组件自身内复写样式。

RTL Guidelines: https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/RTL_Guidelines