Obsidian裡生成破音字注音國字的方法

我寫過與注音(或日文假名標註)相關的影片：

重點彙總如下：

1. 注音字型檔

直接使用帶有注音的字型檔就能直接將國字顯示成帶有注音的國字。操作步驟：

由 ButTaiwan/bpmfvs: 注音IVS字型規格 Bopomofo IVS Font Specification 下載能免費使用的ㄅ注音芫荽字型，並安裝到Windows系統，字型檔路徑：C:\Users\使用者帳號\AppData\Local\Microsoft\Windows\Fonts\BpmfIansui-Regular.ttf
在Obsidian安裝資料夾/.obsidian/snippets/資料夾裡建立一個任意名稱且副檔名為.css的文字檔，輸入下列內容：

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

到Obsidian設定→【外觀】→【CSS片段】→點擊其右側的重整圖示，讓建立的CSS檔生效
筆記裡輸入下列內容測試是否能正確顯示注音 (周敦頤《愛蓮說》)：

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

▼ 顯示結果

注音顯示正常，但可惜「鮮」是破音字，注音是「ㄒㄧㄢˇ」三聲才對。

2. 使用HTML的`<ruby>`標籤

在HTML裡可以使用<ruby>與<rt>標籤來標註注音，格式如下：

title: 鮮的破音字注音
`<ruby>鮮<rt>ㄒㄧㄢˇ</rt></ruby>`
在`<ruby>`後插入國字，`<rt>`後插入注音

▼ 注音預設顯示在上方，也能用 <ruby style="ruby-position:under"> 改到下方

![gh|100](https://raw.githubusercontent.com/emisjerry/upgit/master/2025/1762333662000pqfcca.png)
---
![gh|100](https://raw.githubusercontent.com/emisjerry/upgit/master/2025/17623338590004hg1ec.png)

但有沒有辦法把注音移動到國字右側呢？畢竟注音在右比較符合我們一般的使用慣例。

用Markdown Furigawa外掛簡化輸入

<ruby>鮮<rt>ㄒㄧㄢˇ</rt></ruby>可以用 {鮮|ㄒㄧㄢˇ} 來簡化輸入。

3. 以CSS調整注音位置

再新增另一個CSS類別 .yin2 以調整注音位置到國字右側：

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

ruby {
  font-size: 3em;
  /* 確保 ruby 註釋的位置是「上/右」方 */
  ruby-position: over; 
}

.yin2 {
  /* 將文字排版方向設定為從右到左的垂直方向 */
  writing-mode: vertical-rl;
}

.yin2 rt {
  /* 告訴瀏覽器：這個元素內的文字要保持直立，不隨容器的 writing-mode 旋轉 */
  text-orientation: upright;
  /* 讓注音符號字體小一點，更像注音樣式 */
  font-size: 0.6em;
}

在筆記裡插入下列內容：

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

▼ 顯示結果：注音顯示在右側了

WARNING

在套用 .yin2 類別後，若使用Furigawa外掛會導致顯示不正常，因此只能使用<ruby>標籤。

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=國文

＃＃

#resources #blog #obsidian #obsidian-plugins