冰冰的小屋

路漫漫其修远兮,吾将上下而求索

CSS Writing Mode 现状

出处:https://www.zhihu.com/question/20874144/answer/17767923

目前 W3C 关于竖排文本的排版规范统一在「CSS Writing Modes Module Level 3**」中。

主要有以下几个属性:

一、「writing-mode」设置文字的书写方向

IE 在文字排版方面一直是先驱,早在 IE 5.5 就实现了私有属性「writing-mode」,后来被 W3C 在 CSS2 中采纳作为规范。在 Level 3 草案中「writing-mode」是 「direction」 和 「block-flow」 属性的简写[1],2010年起「block-flow」 属性被删除了,其功能融合进「writing-mode」。

IE 实现的私有属性包含以下取值:

但在最新的规范中「writing-mode」属性缩减为三个值:

  • horizontal-tb(默认值):自上而下,从左到右的横排书写方式。(类似IE私有值lr-tb)
  • vertical-rl:从右到左,自上而下的竖排书写方式(典型的汉字竖排排版方式)。(类似IE私有值tb-rl)
  • vertical-lr:从左到右,自上而下的竖排书写方式(主要用于内蒙古的蒙古语**满语**。)。
  • 由于自下而上的横排书写方式太少见,经过讨论去掉了「horizontal-bt」关键字。[2]

二、双向排列「direction」「unicode-bidi」

在一些多语言混合排版的文档中会存在文字书写方向的不同,比如阿拉伯文和希伯来文便是从右往左书写的,这一现象称之为「双向排列(bidirectionality)」,简称「bidi」。

在Unicode规范中,定义了一个复杂的算法来确定文字的正确方向,CSS便是依赖于该算法来获得正确的双向字符渲染。[3]「direction」与「unicode-bidi」便是用来匹配该算法的。

它们都是 CSS2 中便有的属性。

  • ltr:从左到右的方向。(默认值
  • rtl:从右到左的方向。

三、「text-orientation」控制行内字符的旋转

四、「text-combine-horizontal」用于控制在竖排时同一行内显示多个非 CJK 字符的情况在日文排版中这种情况称为「縦中横」,规范称为 「tate-chu-yoko」。我们可以称之为「纵中横」或「直中横」。Word 里称为「纵横混排」:

InDesign 里称为「直排内横排」设置 CJK 字符的格式

2013-07-08 更新:IE11.0.9431.0 开始支持该属性。

2015-07-09 更新:规范中 text-combine-horizontal 属性改名为 text-combine-upright 997006 – rename text-combine-horizontal to text-combine-upright

2015-12-15 更新:

Chrome 48 已经支持不带前缀的 text-combine-upright 属性了。

「writing-mode」属性兼容性 http://caniuse.com/#feat=css-writing-mode

Demo:CSS writing-mode 测试 by 一丝

  • IE6-10,Opera 不支持:horizontal-tb | vertical-rl | vertical-lr
  • IE6只支持 tb-rl | lr-tb,IE7 只支持 tb-rl | lr-tb | rl-tb | bt-rl
  • WebKit 目前实现的最好,为了兼容旧的规范,虽然支持 lr-tb | tb-rl 属性值,但未实现效果
  • Opera 12.1 虽然支持 lr-tb | tb-rl 属性值,但未实现效果
  • Firefox 不支持 writing-mode 属性
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注