CSS Writing Mode 现状

目前 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 实现的私有属性包含以下取值：
<img src="https://i-blog.csdnimg.cn/blog_migrate/45661ab84a2622014dd2e69803100113.png" data-rawwidth="616" data-rawheight="259" class="origin_image zh-lightbox-thumb" width="616" data-original="https://pic1.zhimg.com/5f4751ccf043816779559c54f560f508_r.jpg">
但在最新的规范中「writing-mode」属性缩减为三个值：

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

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

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

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

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

「direction」属性指定了块的基本书写方向，以及 Unicode 双向算法中嵌入和超越的方向（参见「unicode-bidi」）。另外，它还规定了表格列布局的方向，水平溢出的方向，以及块设置了「text-align: justify」时，最后一个不完全的行的位置。其取值有：

• ltr：从左到右的方向。（默认值）
  
• rtl：从右到左的方向。

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

四、「 text-combine-horizontal」用于控制在竖排时同一行内显示多个非 CJK 字符的情况
在日文排版中这种情况称为「纵中横」，规范称为 「tate-chu-yoko」。我们可以称之为 「纵中横」或 「直中横」。
Word 里称为「纵横混排」：
<img src="https://i-blog.csdnimg.cn/blog_migrate/746867c7ae03b480a8385dbf675fdee9.png" data-rawwidth="215" data-rawheight="460" class="content_image" width="215">
InDesign 里称为 「直排内横排」
<img src="https://i-blog.csdnimg.cn/blog_migrate/9ebd5fd1993ed8f6d1c936c34c3fb42e.png" data-rawwidth="671" data-rawheight="391" class="origin_image zh-lightbox-thumb" width="671" data-original="https://pic4.zhimg.com/0a0ff21325699bf095f9e7d4eb8b9157_r.jpg">
* Webkit 支持旧版本[4]的 -webkit-text-combine 属性，但是问题多多
* IE 支持 -ms-text-combine-horizontal 属性。


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

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

2015-12-15 更新：

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

「writing-mode」属性兼容性 
、

• 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 属性