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/.
<link href="https://github.com/untunt/kanbunHTML/blob/main/kanbun.css" rel="stylesheet" />
<script src="https://github.com/untunt/kanbunHTML/raw/main/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.
Different components after kanji are annotated by different brackets:
( ): furigana (振り仮名){ }: okurigana (送り仮名) (these brackets can be omitted)‹ ›: furigana (振り仮名) of saidokumoji (再読文字)« »: okurigana (送り仮名) of saidokumoji (再読文字)[ ]: kaeriten (返り点)This is the recommended order of components after one kanji in kanbun annotation. However, in practice, they will be displayed correctly in any order.
Several class values can be given to the kanbun <div>:
kanbun: Display in kanbun stylebetagumi: 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 otherfurigana-center-align: When using solid setting (ベタ組), align furigana (振り仮名) to the center of kanji when it is the only kana of this kanjishow-borders: Show borders of elements (for debugging)