目前 CSS 實現豎排文本較為通用的方式是什麼？

01-03

包括 CJK 的豎排，和西文字元的旋轉豎排。
能查到的似乎都是兩年前的方案，請問有什麼新的進展么？
另外實現的時候有什麼要注意的么？

《 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 實現的私有屬性包含以下取值：

但在最新的規範中「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 中便有的屬性。

「direction」屬性指定了塊的基本書寫方向，以及 Unicode 雙向演算法中嵌入和超越的方向（參見「unicode-bidi」）。另外，它還規定了表格列布局的方向，水平溢出的方向，以及塊設置了「text-align: justify」時，最後一個不完全的行的位置。其取值有：

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 屬性了。

「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 屬性

[1]http://dev.w3.org/cvsweb/~checkout~/csswg/css3-writing-modes/Attic/Overview.src.html?rev=1.12;content-type=text%2Fhtml#block-flow

Bug 47285 – Remove the block-flow property and update writing-mode

[2]http://lists.w3.org/Archives/Public/www-style/2010Oct/0631.html

變更：CVS log for csswg/css3-writing-modes/Attic/Overview.src.html

[3]CSS Writing Modes Module Level 3

[4]CSS Writing Modes Module Level 3

看這個：CSS Writing Modes Module Level 3

WebKit 瀏覽器下用 -webkit-writing-mode: vertical-rl; 試試。

考慮兼容性，只能taketori.js

Firefox下支持英文豎排的方法 http://jsbin.com/borugo/