ruby_enabler2.jsを利用した両面ルビのテスト

HTML5で『両面ルビ』なるものが定義されているので、JavaScriptとスタイルシートを使って先行実装してみようかと。

詳しくは こちらのブログ記事を参照してみてください。

狙い通りに表示可能な例

上下のルビテキストの形式が一致していれば(グループルビ或いはモノルビに統一されていれば)、ruby_enabler2.js を用いて両面ルビ風の表示が可能です。

CSSを適用することにより <ruby>〜</ruby> をインラインテーブルに組み立てて表示しています。

両面ルビ:新垣結衣あらがきゆいガッキー:グループルビ風
<ruby><rb>新垣結衣</rb><rtc><rt>あらがきゆい</rt></rtc><rtc><rt>ガッキー</rt></rtc></ruby>
両面ルビ:新垣結衣あらがきゆいガッキー:グループルビ風・タグを極力省略
<ruby>新垣結衣<rt>あらがきゆい<rtc>ガッキー</ruby>
両面ルビ:あらがき:モノルビ風
<ruby>
<rb>新</rb><rt>あら</rt><rb>垣</rb><rt>がき</rt><rb>結</rb><rt>ゆ</rt><rb>衣</rb><rt>い</rt>
<rtc><rt>ガ</rt><rt>ッ</rt><rt>キ</rt><rt>ー</rt></rtc>
</ruby>
両面ルビ:あらがき:モノルビ風・タグを極力省略
<ruby>新<rt>あら</rt>垣<rt>がき</rt>結<rt>ゆ</rt>衣<rt>い<rtc><rt>ガ<rt>ッ<rt>キ<rt>ー</ruby>

狙い通りに行かない例

上下のルビテキストの形式が一致していない場合は、上手く表示できません。

両面ルビ:あらがきガッキー:上がモノルビ風・下がグループルビ風 - 上手く表示できない
<ruby>新<rt>あら</rt>垣<rt>がき</rt>結<rt>ゆ</rt>衣<rt>い</rt><rtc>ガッキー</rtc></ruby>

こうなってしまうのは、スタイルシートを用いてテーブルレイアウトを表現する場合に、colspan(水平方向のセル結合)を指定する方法が無いためです。つまりCSSの仕様が将来的に変更されない限り、上記のような両面ルビを、スタイルシートを使って狙い通りに表示するのは不可能なわけですね。

[2015.01.19] こちらの記事のコメント欄で、素晴らしい解決方法を教えていただきました。近々、対応させてみたいと思います。