Obsidianで破音字に注音付きの国字を生成する方法

私はこれまで、注音（または日本語の振り仮名）に関連する動画を作成しました。

• 動画 Obs040｜Furigawaプラグイン日：学習の強い味方！中国語の注音やピンインを拡張表示
• 動画 Anki08｜注音符号付き漢字カードの作成手順

要点は以下の通りです。

1. 注音フォントファイル

注音付きのフォントファイルを使えば、漢字を注音付きで表示できます。手順は以下の通りです。

1. ButTaiwan/bpmfvs: 注音IVSフォント仕様 Bopomofo IVS Font Specification から無料の「ㄅ注音芫荽」フォントをダウンロードし、Windowsにインストールします。フォントファイルのパスは
   C:\Users\ユーザー名\AppData\Local\Microsoft\Windows\Fonts\BpmfIansui-Regular.ttf

2. Obsidianインストールフォルダ/.obsidian/snippets/ に任意の名前で拡張子 .css のテキストファイルを作成し、以下を入力します：

/* === 
  font-family: "文鼎標楷注音";
*/
.yin {
  font-size: 3em;
  font-family: "ㄅ注音芫荽";
}

3. Obsidianの設定 → 【外観】 → 【CSSスニペット】 → 右側の更新アイコンをクリックし、作成したCSSを有効化します。

4. メモに以下を入力し、注音が正しく表示されるか確認します（周敦頤 『愛蓮説』）：

<span class="yin">陶後鮮有聞</span>

▼ 表示例

注音は正常に表示されますが、「鮮」は異読字で、この場合は注音が「ㄒㄧㄢˇ」三声であるのが正しいです。

2. HTMLの<ruby>タグを使う

HTMLでは <ruby> と <rt> タグで注音を指定できます。書式は以下の通りです。

▼ 注音はデフォルトで上に表示されますが、<ruby style="ruby-position:under"> で下に表示することも可能です。

では、注音を漢字の右側に表示する方法はないでしょうか？右側表示のほうが一般的な使い方に近いです。

3. CSSで注音位置を調整する

漢字の右側に注音を表示するため、新たに .yin2 クラスを作成します。

/* === 
  font-family: "文鼎標楷注音";
*/
.yin {
  font-size: 3em;
  font-family: "ㄅ注音芫荽";
}

ruby {
  font-size: 3em;
  /* 注釈位置を上または右に設定 */
  ruby-position: over; 
}

.yin2 {
  /* 縦書きで右から左への表示に設定 */
  writing-mode: vertical-rl;
}

.yin2 rt {
  /* 縦書きでも文字の向きを固定 */
  text-orientation: upright;
  /* 注音の文字サイズを小さくして見やすく */
  font-size: 0.6em;
}

メモに以下を入力します：

陶後<span class="yin2"><ruby>鮮<rt>ㄒㄧㄢˇ</rt></ruby></span>有聞：少。

▼ 表示例：注音が漢字の右側に表示されます。

3.1. AutoHotkeyで入力を高速化

異読字は頻繁には使いませんが、以下のAutoHotkey v2スクリプトで効率的に入力できます。

^+y:: {
  send "^x"
  ClipWait 10
  if (A_Clipboard) {
    sendText "<span class='yin2'>" . A_Clipboard . "</span>"
  }
}

;; ruby
^+r:: {
  send "^x"
  ClipWait 10
  if (A_Clipboard) {
    sendText "<ruby>" . A_Clipboard . "<rt></rt></ruby>"
  }
}

使用したい漢字をクリップボードにコピー後、Ctrl+Shift+Y を押すと必要なタグ付き形式が生成されます。

4. 💡 関連リンク

✅ 解説記事（繁体字中国語）： https://jdev.tw/blog/9015/
✅ Explanation article (English)
✅ 解説記事（日本語）

✅ 中学生向け 国語 Ankiデッキ共有： https://jdev.tw/newlife/?tag=國文