网页 CJK 竖排的最新进展

上个月关于 CSS 的一个重要的新闻是 WebKit 开始支持 CJK 竖排 (通过 -webkit-writing-mode),而且时隔七年之后 (上一个版本还是 2003 年制定的),W3C 的 CSS 工作组也发布了新的 CSS Writing Mode Level 3 工作草案,和以前的版本有较大的区别,WebKit 现在就是按照这个草案实现的竖排支持,虽然它的实现还不完整。下面简单介绍一下新草案的变化。

在原有草案中,writing-mode 属性是 directionblock-flow 属性的合成,你可以交叉地组合这两个属性,构成 writing-mode:比如 lr-tb 表示文字从左到右,块排列从上到下。而在新草案里,block-flow 不再是一个独立的概念,被并入了 writing-mode 中,新的 writing-mode 有以下几种选择:

还可以注意到经过讨论,非常少用的从下往上横排书写形式 (horizontal-bt) 被去除了。

保留了 direction 属性,但它和 CSS2.1 中的效果一样,仍然用于控制文本在行内是从左到右还是从右到左书写,以及 Unicode BIDI 双向混合文字的情况。

同时,新增了一个 text-orientation 属性用于控制行内字符的旋转,例如在典型的中文竖排文稿中,拉丁字符应该顺时针旋转 90 度。目前的草案规定了以下这些模式:

下图中左侧是 vertical-right/auto 的效果,右侧是 upright 的效果:

最后,新增了 text-combine 属性用于控制在竖排时同一行内要塞进多个非 CJK 字符的情况,在日文排版中称为“縦中横”。它有两个选择:

不过这个属性目前还很不成熟,仅仅初步把概念规范化了,短期内估计不会有浏览器尝试实现。此外这份草案还没考虑行内割注 (日文中称为 warichu) 的情况:

割注

割注

目前在 Mac OS X 下 WebKit 已经完整实现了这一版草案的 writing-mode,大部分的 bug 也都已经扫除 (其他平台的实现情况参见 Koan-Sin Tan 的说明),但是还没开始实现 text-orientation,然而要保证可用的竖排效果,text-orientation 的支持是不可或缺的。


14 Comments

vertical-lr 应该是只用于中国的蒙语吧。外蒙的蒙语用俄文字母,横排从左到右。

维吾尔语是横排从右到左。

Posted by Crane 鹤 on 29 December 2010 @ 4am

@Crane 鹤: 多谢指正,更正了。

Posted by jjgod on 29 December 2010 @ 5am

看来将来的电子书,电子杂志的阅读器都会是基于web的

Posted by Frank Zheng on 29 December 2010 @ 9am

「行内割注」,中文叫雙行夾注吧,古籍中常見。和日文不同的是,一般不加括號,而且字的大小是正文的二分之一(日文的割注貌似是四分之一)。

Posted by weakish on 29 December 2010 @ 6pm

@weakish: 中文也有叫割注的,目前数字化排版中支持得比较好的是 Yin Dian 给 LaTeX 开发的 gezhu 宏包: http://code.google.com/p/gezhu/

Posted by jjgod on 29 December 2010 @ 7pm

感觉现在 Web 前端的发展方向完全就是错的, 应该将 Flash 或者 Silverlight 播放器完整集成进浏览器中, 网站界面均用 Flex 和 SL 以 App 的方式来开发 (基于什么不重要, 只要大方向是 App 向就可以), 这样一来可以让 W3C 和 JS 玩蛋去从而解决各浏览器的兼容问题, 第二可以提供更好的用户体验, 第三也可以将开发环境由敲代码提升到可视编辑.

Posted by Digidea on 30 December 2010 @ 8am

@Digidea 那样的话肯定会打得不可开交,现在flash和silverlight都有兼容性和性能的问题,标准也不是完全公开,代码也不是开源的,很难说是通用标准的合适选择。另外,这也让web变得太重量级,依赖太多插件。至于可视化编辑,那只是工具问题,何况web早就有了可视化编辑工具。

Posted by Tian on 5 January 2011 @ 9am

@Digidea,解决兼容问题?Android上的兼容问题就在眼前

Posted by 钢盅郭子 on 6 January 2011 @ 1pm

@Digidea,同学,J2ME就走过这条路,兼容问题解决了吗?HTML+JavaScript已经是兼容性最好的解决方案了。兼容性本来就是需要开发者做出大量投入的,你臆想中的只是偷懒而已

Posted by 钢盅郭子 on 6 January 2011 @ 1pm

text-orientation这个属性是不是大多浏览器还没实现?writing-mode设为从上到下时字也旋转了

Posted by casemy on 4 January 2012 @ 10pm

是的。

Posted by jjgod on 6 January 2012 @ 10pm

问题还存在。比如 右->左 坚排, 那么初始页面 scrollbar 应该是在最右边的, 但是现在还是在最左边。

竖排下的 float , text-align 都有待文档。

Posted by lepture on 5 February 2012 @ 5pm

不错,为我们少数民族信息化做出了贡献; 我试过,蒙古文可以正常显示,但蒙古文不能整字换行; http://www.huraldai.com/test/

Posted by buren on 11 July 2012 @ 1pm

添加样式 word-break:keep-all; 之后可以整词换行了。太棒了; 大家现在看看效果吧!特别棒,IE8.0或以上版本浏览器都支持,但是360,搜狐等应该不支持。 http://www.huraldai.com/test/

Posted by buren on 11 July 2012 @ 2pm

Leave a Comment