ruby_enabler2.jsを利用した両面ルビのテスト
狙い通りに表示可能な例
上下のルビテキストの形式が一致していれば(グループルビ或いはモノルビに統一されていれば)、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>
<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] こちらの記事のコメント欄で、素晴らしい解決方法を教えていただきました。近々、対応させてみたいと思います。