1

CSS书写模式与RTL站点构建

 1 year ago
source link: https://swordair.com/css-write-mode-and-rtl-site/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

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

双向文本(bidirectionality, bidi)

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

bidi.png

书写模式构成

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

枚举所有书写模式

  • 拉丁语系(eg. EN, ES):块从上到下,行从左到右
  • 阿拉伯语系(eg. AR, HE) :块从上到下,行从右到左
  • 汉语系(CN, JP):同拉丁语系,块从右到左,行从上到下,字符向上
  • 古典蒙古语系: 块从右到左,行从上到下
write-mode-vertical-text.jpg
  • 中文(为什么是从右往左)
  • 蒙古语( 回鹘式 )

垂直的问题

write-mode-vertical-problems.png
  • 垂直书写 影响的不仅仅是布局,还有排版(比如标点符号需从水平转向垂直)
  • 还影响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

write-mode-symmetry.png

CSS Logical Properties and Values Level 1

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

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

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

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


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK