kanbunHTML

This is a kanbun kundoku (漢文訓読) HTML display solution (probably the best) supporting both fixed inter-character spacing setting (アキ組) and solid setting (ベタ組) setting. It converts annotated kanbun text to HTML and displays it.

An example converter: phesoca.com/kanbun-html/.

Usage

<link href="kanbun.css" rel="stylesheet" />
<script src="kanbun.js"></script>
<div class="kanbun okurigana-sinking" id="sample">
  <p>感ジテハ[レ]時ニ花ニモ濺(そそ)ギ[レ]淚ヲ，恨ミデハ[レ]別レヲ鳥ニモ驚カス[レ]心ヲ。</p>
  <p>孤之有ルハ[二]孔明[一]，猶ホ‹ごと›«キ»[二]魚之有ルガ[一レ]水也。</p>
</div>
<script>convertKanbunDiv(document.getElementById("sample"));</script>

Put annotated kanbun paragraphs in a <div>, and call convertKanbunDiv() to convert them to HTML.

Kanbun Annotation

Different components after kanji are annotated by different brackets:

• ( ): furigana (振り仮名)
• { }: okurigana (送り仮名) (these brackets can be omitted)
• ‹ ›: furigana (振り仮名) of saidokumoji (再読文字)
• « »: okurigana (送り仮名) of saidokumoji (再読文字)
• [ ]: kaeriten (返り点)
• Punctuation (no annotation)

This is the recommended order of components after one kanji in kanbun annotation. However, in practice, they will be displayed correctly in any order.

Class Description

Several class values can be given to the kanbun <div>:

• kanbun: Display in kanbun style
• betagumi: Use solid setting (ベタ組) (the default is fixed inter-character spacing setting (アキ組))
• okurigana-sinking: Make okurigana (送り仮名) sink 1/4 em height when without furigana (振り仮名)
• split-touching-kana: When using solid setting (ベタ組), insert 1/4 em spacing between two adjacent kanji if their kana touch with each other
• furigana-center-align: When using solid setting (ベタ組), align furigana (振り仮名) to the center of kanji when it is the only kana of this kanji
• show-borders: Show borders of elements (for debugging)

Special Thanks

• Ng Ching-hung
• 三日月綾香
• 思無邪SyiMyuZya

References

• 青空文庫. 訓点. 注記一覧, 2012.
• 青空文庫. 入力-2. 工作員作業マニュアル, 2012.
• 小林敏. 漢文の配置処理. 日本語組版とつきあう, 2016.
  1. 漢文を構成する要素
  2. 漢文の句読点や返り点の配置処理
  3. 漢文の送り仮名・読み仮名の配置処理
• cat_in_136. 如何用HTML5 Complex Ruby寫漢文訓讀文。, 2016.
• kawabata. 漢文訓読JavaScript. 2013. (also 漢字データベースプロジェクト)
• Elika J. Etemad, et al. CSS Ruby Annotation Layout Module Level 1. W3C Working Draft, 2021.
• 千葉弘幸, et al. 日本語組版処理の要件. W3C Working Group Note, 2020.