@snsk @dagezi 漢文については、以前、W3C のワークショップで議題としたことがありました。 http://t.co/WaBNatYfvA このときに分かったのですが、CSS3 に最近は行ったRubyの新しい仕様と、OpenType の仕様を使えば漢文は表現できます

— IKEUCHI Yasuki (@ikeyasu) February 7, 2014

…という話を真に受けて、HTML5 で漢文を組版してみる。

配置について

漢文訓読文における、訓点（返り点・送り仮名）および振り仮名の配置はだいたいつぎのようになっている。

漢文訓読文レイアウト例
  • 返り点は、漢字のすぐ下に左に寄せて表記される
  • 送り仮名と振り仮名は、配置は同一ブロック内であって、漢字の横に表記される
  • 送り仮名が漢字の右下ちょうど外に出る程度に上下方向の位置は調整する

これを元に次の方針でタグ打ちをすることにした。

  • 返り点は、サイズの小さな文字として扱う。返り点そのものは Unicode の U+3191〜 のを使用する。
  • 振り仮名は、標準的に HTML5 ruby を使用する
  • 送り仮名も HTML5 ruby を用いるが、漢字の後ろの空白あるいは返り点の ruby となる扱いで送り仮名を配置する
  • 送り仮名の上下方向の位置については諦める

具体的には下記の通りとなる

<ruby>
  <rb>以</rb>
  <rb class="kaeriten">&#12696;</rb>
  <rtc>
    <rt>もつ</rt>
    <rt>テ</rt>
  </rtc>
</ruby>
<style>
.kaeriten {
  font-size: xx-small;
  vertical-align: sub;
  ruby-align: start;
}
</style>

ここで<rb>要素を緑枠、<rt>要素を青枠で囲んで図に示すと次のようになる。

HTML5 Complex Ruby による漢文レイアウト

もう少し複雑な例として、本記事の標題を例にあげる。

如何ニシテ 用㆓ヒテ HTML5 Complex Ruby㆒ヲ 寫㆓スカ 漢文訓讀文㆒ヲ。

「如何にしてHTML5 Complex Rubyを用いて漢文訓読文を写すか」ライブビュー
「如何にしてHTML5 Complex Rubyを用いて漢文訓読文を写すか」Firefoxレンダリング

Complex Ruby を使わない場合

  • 返り点は、<sub>として扱う。返り点そのものは Unicode の U+3191〜 のを使用する。
  • 振り仮名は、標準的に Basic HTML5 ruby を使用する
  • 送り仮名は、<sup>として扱う。
如何<sup>ニシテ</sup>
用<sub class="kaeriten">&#12691;</sub><sup>ヒテ</sup>
HTML5 Complex Ruby<sub class="kaeriten">&#12690;</sub><sup>ヲ</sup>
寫<sub class="kaeriten">&#12691;</sub><sup>スカ</sup>
漢文訓讀文<sub class="kaeriten">&#12690;</sub><sup>ヲ</sup>。

如何ニシテ 用㆓ヒテ HTML5 Complex Ruby㆒ヲ 寫㆓スカ 漢文訓讀文㆒ヲ。

ruby不使用版「如何にしてHTML5 Complex Rubyを用いて漢文訓読文を写すか」ライブビュー

Complex Ruby を使わない場合との差、おわかりいただけるであろうか。

使用例

荷宇ハ 生マレテ 十月ニシテ 而 喪㆓うしなフ 其ノ 母㆒ヲ。 及㆑ビ 有㆑ルニ 知、 即チ 時時、 念㆑おもヒテ 母ヲ 不㆑ 置カ、 弥いよいよ 久シクシテ 弥 篤あつシ。 哀㆓かなシム 其ノ 身ノ 不㆒㆑ヲ 能㆔ハ 一日トシテ 事㆓フル 乎 母㆒ニ 也。 哀㆓かなシム 母之言語動作モ 亦まタ 未㆒㆑ダルヲ 能㆑ハ 識しル 也。

――平成二十八年度大学入試センター試験国語より（盧文弨『抱経堂文集』より）
盧文弨『抱経堂文集』の一節、ライブビュー
盧文弨『抱経堂文集』の一節、ライブビュー

これは次のソースから得られる。

<p class="kanbun" style="margin: 1em;">
<ruby><rb>荷宇</rb><rtc><rt></rt><rt>ハ</rt></rtc></ruby>
<ruby><rb>生</rb><rtc><rt></rt><rt>マレテ</rt></rtc></ruby>
<ruby><rb>十月</rb><rtc><rt></rt><rt>ニシテ</rt></rtc></ruby>
<ruby><rb>而</rb></ruby>
<ruby><rb>喪</rb><rb class="kaeriten">&#12691;</rb><rtc><rt>うしな</rt><rt>フ</rt></rtc></ruby>
<ruby><rb>其</rb><rtc><rt></rt><rt>ノ</rt></rtc></ruby>
<ruby><rb>母</rb><rb class="kaeriten">&#12690;</rb><rtc><rt></rt><rt>ヲ</rt></rtc></ruby>。
<ruby><rb>及</rb><rb class="kaeriten">&#12689;</rb><rtc><rt></rt><rt>ビ</rt></rtc></ruby>
<ruby><rb>有</rb><rb class="kaeriten">&#12689;</rb><rtc><rt></rt><rt>ルニ</rt></rtc></ruby>
<ruby><rb>知</rb></ruby>、
<ruby><rb>即</rb><rtc><rt></rt><rt>チ</rt></rtc></ruby>
<ruby><rb>時時</rb></ruby>、
<ruby><rb>念</rb><rb class="kaeriten">&#12689;</rb><rtc><rt>おも</rt><rt>ヒテ</rt></rtc></ruby>
<ruby><rb>母</rb><rtc><rt></rt><rt>ヲ</rt></rtc></ruby>
<ruby><rb>不</rb><rb class="kaeriten">&#12689;</rb></ruby>
<ruby><rb>置</rb><rtc><rt></rt><rt>カ</rt></rtc></ruby>、
<ruby><rb>弥</rb><rtc><rt>いよいよ</rt></rtc></ruby>
<ruby><rb>久</rb><rtc><rt></rt><rt>シクシテ</rt></rtc></ruby>
<ruby><rb>弥</rb></ruby>
<ruby><rb>篤</rb><rtc><rt>あつ</rt><rt>シ</rt></rtc></ruby>。
<ruby><rb>哀</rb><rb class="kaeriten">&#12691;</rb><rtc><rt>かな</rt><rt>シム</rt></rtc></ruby>
<ruby><rb>其</rb><rtc><rt></rt><rt>ノ</rt></rtc></ruby>
<ruby><rb>身</rb><rtc><rt></rt><rt>ノ</rt></rtc></ruby>
<ruby><rb>不</rb><rb class="kaeriten">&#12690;&#12689;</rb><rtc><rt></rt><rt>ヲ</rt></rtc></ruby>
<ruby><rb>能</rb><rb class="kaeriten">&#12692;</rb><rtc><rt></rt><rt>ハ</rt></rtc></ruby>
<ruby><rb>一日</rb><rtc><rt></rt><rt>トシテ</rt></rtc></ruby>
<ruby><rb>事</rb><rb class="kaeriten">&#12691;</rb><rtc><rt></rt><rt>フル</rt></rtc></ruby>
<ruby><rb>乎</rb></ruby>
<ruby><rb>母</rb><rb class="kaeriten">&#12690;</rb><rtc><rt></rt><rt>ニ</rt></rtc></ruby>
<ruby><rb>也</rb></ruby>。
<ruby><rb>哀</rb><rb class="kaeriten">&#12691;</rb><rtc><rt>かな</rt><rt>シム</rt></rtc></ruby>
<ruby><rb>母之言語動作</rb><rtc><rt></rt><rt>モ</rt></rtc></ruby>
<ruby><rb>亦</rb><rtc><rt>ま</rt><rt>タ</rt></rtc></ruby>
<ruby><rb>未</rb><rb class="kaeriten">&#12690;&#12689;</rb><rtc><rt></rt><rt>ダ</rt></rtc><rtc class="okurikana-2nd"><rt></rt><rt>ルヲ</rt></rtc></ruby>
<ruby><rb>能</rb><rb class="kaeriten">&#12689;</rb><rtc><rt></rt><rt>ハ</rt></rtc></ruby>
<ruby><rb>識</rb><rtc><rt>し</rt><rt>ル</rt></rtc></ruby>
<ruby><rb>也</rb></ruby>。
</p>

<style scope="scope">
.kanbun {
  line-height: 150%;
}
.kanbun rb.kaeriten {
  font-size: xx-small;
  vertical-align: sub;
  ruby-align: start;
}
.kanbun .okurikana-2nd {
  ruby-position: under;
}
</style>

所感

確かに書けるが、あまりにも小手先な感じであってすっきりしない （特に返り点の配置）し、 ソースコードは人が書くレベルではない長文になっている。 したがって、あまり実用的ではない。

その他気になった点として、

  • 「一レ点」などが別々に表示されて、返り点の合字が対応したフォントが標準添付されると、 「一レ点」などがいい感じになるであろう。
  • 禁則処理が適切でない場所で行われることがあった。<nobr>を使えばいいものの、何らかの解決策が必要。

参考文献