目前 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 字符的格式
- Webkit 支持旧版本[4]的 -webkit-text-combine 属性,但是问题多多,Demo:JS Bin – Collaborative JavaScript Debugging
- IE 支持 -ms-text-combine-horizontal 属性。
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 属性了。
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 属性