目前 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」属性缩减为三个值:
二、双向排列 「direction」与 「unicode-bidi」
在一些多语言混合排版的文档中会存在文字书写方向的不同,比如阿拉伯文和希伯来文便是从右往左书写的,这一现象称之为「双向排列(bidirectionality)」,简称「bidi」。
在Unicode规范中,定义了一个复杂的算法来确定文字的正确方向,CSS便是依赖于该算法来获得正确的双向字符渲染。「direction」与「unicode-bidi」便是用来匹配该算法的。
它们都是 CSS2 中便有的属性。
「direction」属性指定了块的基本书写方向,以及 Unicode 双向算法中嵌入和超越的方向(参见「unicode-bidi」)。另外,它还规定了表格列布局的方向,水平溢出的方向,以及块设置了「text-align: justify」时,最后一个不完全的行的位置。其取值有:
三、「 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」属性兼容性
、
主要有以下几个属性:
一、 「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">
![](https://i-blog.csdnimg.cn/blog_migrate/45661ab84a2622014dd2e69803100113.png)
但在最新的规范中「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">
![](https://i-blog.csdnimg.cn/blog_migrate/746867c7ae03b480a8385dbf675fdee9.png)
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">
![](https://i-blog.csdnimg.cn/blog_migrate/9ebd5fd1993ed8f6d1c936c34c3fb42e.png)
* 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 属性