iBooks 3 日語豎排的效果里，『振り仮名』是如何實現的？

01-06

我不懂日語，不知道那些行間的字是做什麼用的。是否類似橫排本的「下標」標籤&呢？如果想要在中文豎排中實現同樣的效果，是否可行呢？要如何做呢？

不是下標，這種小字叫 ruby，日文裏橫排豎排都有，應該就是通過 HTML 的 & 標籤實現的（epub 文件就是 HTML 而已）。

例如一個 epub 文件裡面有這樣的寫法：

&&雨&あめ&&ニモマケズ&&

那麼這個 epub 在 iBooks 3 裏顯示出來就是這樣：

這些行間字叫做注音，在日語中有些字、詞的讀音是不固定的，有時會將正確的發音用假名進行標註，類似我們的拼音。

在HTML中，有專門的ruby標籤來實現注音。規範參考：http://www.w3.org/TR/1998/WD-ruby-19981221/

如&中國&zhong guo&&可以達到下圖的拼音效果

ruby在不同的瀏覽器中的實現是有差異的，例如ruby-overhang樣式只有IE支持，而同樣的ruby在Safari和Safari mobile裡面都是不一樣的。這在應用時需要注意實際運行的環境。

在樓主的問題里，除了注音還涉及豎排的問題。在webkit中豎排是通過writing-mode實現的。參考：http://dev.w3.org/csswg/css3-writing-modes/

如下例就實現了帶注音的豎排。

.tnt {-webkit-writing-mode:vertical-rl;-webkit-text-orientation: upright;}

&AA&aaa&&在表現文字的豎排在文字處理辦公軟體中非常容易就可以實現。

要豎排文字的左右閱讀方向，可以通過writing-mode的值來實現，如vertical-rl是豎排從右向左，而vertical-lr是豎排從左向右。而控制單個文字朝向則需要text-orientation來幫助。

對於單個文字的朝向除了依賴text-orientation意外，還依賴於使用的字體。如在iOS上，當設置為豎排後，瀏覽器會優先獲取豎排字形，達到所需的效果。

而在Windows上，我們則需要手動來設置使用豎排字體來獲得同樣的效果。如果不指定，則如下圖

設置為『@微軟雅黑"後，則成為

如果此時指定的字體沒有豎排字體的話，則只能採用一些變通的方式來解決了，例如套用{-webkit-transform: rotate(-90deg);}

使用 HTML 標籤 ruby 實現的。參考 http://www.w3.org/TR/1998/WD-ruby-19981221/。

更新：也可以用於標註拼音。

吐槽知乎：竟然不能為文本選擇字體？我要給 ruby 加上等寬字體啊。

你可以看看這個，是用Tex做的pdf。仁丹の町名看板をよすがに京めぐり

能實現豎排下的ruby功能