如何在網頁中豎排顯示中文？

11-28

我用canvas自己畫的，兼容所有現代瀏覽器。根據canvas和字元（包括間隔）的尺寸，算一下每個字元的位置就行了。

[更新] 有人把本問題的回答總結了一下，並用竹取排成了竪排：

http://kaix.in/daddy/2011/03/vertical-writing-mode/?utm_source=kaix.inutm_medium=twitter

2010 年 12 月 28 日更新：Jjgod 剛寫了一篇新文章：網頁 CJK 豎排的最新進展

网页 CJK 竖排的最新进展

目前為止有很多人做了嘗試，比較突出的有日本的 JavaScript 豎排引擎涅槃（nehan）：

http://code.google.com/p/nehan/

以及 @metaphox（知乎上的 @吳濤）根據涅槃改寫的 Vertick:

http://vertick.metaphox.name/

另外 CSS 裡亦有豎排支持屬性，但目前還不是所有瀏覽器都支持。

豎排面臨的另一個重要問題是標點的位置。簡體中文字體的逗號通常位於字框（em square）左下角，若直接用來做豎排文字會很悲劇。某些繁體中文字體的逗號位於字框中心，則不存在這一問題。豎排標點的另一處理方法是置於字框右上角，這也是日本紙書的做法。

這個網站雖然是用 Flash 實現的竪排，不足為訓，但效果很好：

http://macromarionette.com/

以前在項目裡面搞過，比較通俗一點的作法是設定每一縱行容器的寬度等於字體寬度，以達到換行的效果，至於說標點符號只能居中了。

1.關於CSS對直排的支持，桑林志中有過探討，不過其中的資料鏈接大多已不能打開。簡言之：一是使用writing-mode: tb-lr; 和 layout-flow: vertical-ideographic; 二是使用column-width和column-gap屬性。雖然早在2001年，添加writing-mode支持的草案被提出，但最後並沒有成為標準。當年只有微軟的Internet Explorer能直接支持豎排方式。

2.所以有Geeker去使用JS排出豎排文字的效果，除了Lawrence Li提到的Nehan，另一個叫Taketori JS (竹取 JS)。

下面引自timdream的博客：

「涅槃比較算是硬幹的排版程式；Nehan 2 要求需要直排的文字放進 &
，HTML 拿來 inspect 發現 Javascript 會把文字排進表格 …。另外他也發明了一些 tag 來表達排版需求（例如「&」）因為這些設計會打破 HTML 的語意所以後來就不研究這個程式了。

竹取 JS 相較來說就沒有上面的問題：程式會用 CSS 的 transform 把整個 block 轉 +90 度，然後偵測裡面的漢字一個一個用 & 包起來轉 -90 度，處理斷行歸則與標點等等。當初發現它的手法的時候覺得超奸詐的；因為這樣用可以處理幾乎所有 HTML 的排版，像是表格、margin、padding 等等。呈現的結果相當優秀，開發商 cmonos 當初會開發竹取 JS 也是用在他們所謂「支援直排文字的 CMS」上，也有實際的網站例子（看這餐廳超有 fu 的 Menu 啊）

竹取 JS 也提供 bookmarklet 可以把任何網站變成直行…… 效果怎麽樣就大家自己去玩吧（電腦玩物有寫一篇介紹的文章）

前述在標點符號和字型選擇的部分因為只有針對日文字型做處理，我就把 fork 出來把該改的東西加進去了。之前在 Twitter 上面提到竹取的時候竟然就被在京都的原開發者回了話。來回對話之後，對方很好心的把 zip 包放上 Github 讓我可以直接 clone 跟 fork，另外也說了竹取的目標是提供 CSS3 瀏覽器支援之前的「暫時解」。這跟我們這邊想要努力的方向是相同的……希望有一天可以直接把 & 拿掉加上兩行 CSS 然後得到相同的結果。
W3C HTML5 Chinese Interest Group
如果您對接下來的發展有興趣的話，歡迎加入 W3C 的 HTML5 中文興趣小組；這裡有簡繁中文與英文的討論，主要的議題就是環繞在直排、中文序數、標音等等中文與東亞語言的議題，還有 HTML5 一般性的討論。

說到中文排版，在網路上問了一些懂出版的朋友，發現一個很尷尬的事情：日文的斷行規則是是 JIS X 4051 日本國家標準；在台灣，規則是各家出版社各個編輯口耳相傳的「習慣」。在 Wikipedia 上，排版斷行規則的文章也只有日文版、韓文版、英文版就是沒有中文版。技術上，業界也不會遇到真正有動機去影響直排實作網路標準的廠商。是說就排版規則這件事情，JIS 標準絕對夠用（除了注音符號聲符的排版），繁體中文使用者只要站在日文使用者後面增加氣勢(?)就好，但是我們可以搞到這樣，應該有一些需要反省的原因吧。」

引用來源：

1. http://zh.wikipedia.org/zh-cn/%E6%9D%B1%E4%BA%9E%E6%96%87%E5%AD%97%E6%8E%92%E5%88%97%E6%96%B9%E5%90%91 （wiki）

2. http://www.after9.cn/tag/%E6%96%87%E6%9C%AC%E7%AB%96%E6%8E%92

3. http://blog.timc.idv.tw/posts/han-vertical-writing-in-css3-and-javascript/（timdream）

4. http://yan.me/dia/819 （桑林志）

5. https://github.com/cmonos/TAKETORI-JS （竹取JS）

用&

標籤就好啦

自己看源碼：潤言投資諮詢有限公司
09年的作品