導言
語法總覽
基本的 Ruby 標註由三個相關的HTML標籤組成：<ruby>、<rt> 和 <rp>。其中,<ruby> 作為容器包覆整組標註;<rt>( ruby text )則是實際顯示註解文字的元素;<rp>( ruby parentheses )用於在不支援 Ruby 的舊瀏覽器中提供括號內容的備援顯示。下面是一個簡單的語法範例：
<ruby>
漢<rp>(</rp><rt>hàn</rt><rp>)</rp>
字<rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>
上述標籤結構表示「漢字」兩個字以及它們各自的拼音註解。"漢"字內的 <rt> 顯示 hàn 的拼音註釋,"字"則對應 zì 的拼音。<rp>(</rp> 和 <rp>)</rp> 則是在不支援 <ruby> 的環境下,用括號將註音內容括起來作為後備顯示(例如老舊瀏覽器會顯示「漢(hàn)字(zì)」)。需要注意的是,<rt> 必須置於 <ruby> 裡面,否則瀏覽器不會正確顯示註解。另外,每個 <ruby> 元素的開始和結束標籤都是不可省略的,正確的層級關係應確保 <rt> 和 <rp> 都是 <ruby> 的子元素。
在實際使用中,<ruby> 容器內可以直接放置文字作為標註的基礎(稱為 base text),也可以顯式使用 <rb>( ruby base )元素將基礎文字框起來。然而,一般簡單場合可直接將漢字等基礎文字置於 <ruby> 中,瀏覽器會默認將文字節點視作標註對象。因此典型寫法如以上範例即可完成標註。如果需要對一個詞或多個字使用同一則註解,可以將多個文字放在一起後跟一個 <rt>;反之,對每個字逐一註音則是每個字後都緊跟一個 <rt> 元素。<rp> 元素則是可選的,建議在需要兼容舊版瀏覽器時使用,以在不支援 <ruby> 的情況下提供諸如括號的備用顯示內容。
中文注音應用
在中文教學情境中,<ruby> 常被用來為漢字標示注音符號(也稱 Bopomofo),以輔助拼讀。這對於台灣正體中文的學習特別常見,下例示範如何使用 <ruby> 搭配 <rt> 顯示每個漢字的注音符號：
<ruby>注<rt>ㄓㄨˋ</rt>音<rt>ㄧㄣ</rt></ruby>
上述程式碼會將「注音」兩字分別添加注音符號「ㄓㄨˋ」與「ㄧㄣ」作為註解顯示在字的上方。讀者在瀏覽器中看到的效果,就是「注」字頂上有小字標出"ㄓㄨˋ","音"字頂上標出"ㄧㄣ",如同一般教材中的注音標示。大多數現代瀏覽器會自動將 <rt> 內容以較小字級呈現,與下方的漢字對齊且不會影響行距。開發者可以放心地直接使用注音符號文字,瀏覽器均支援將其正確顯示在漢字上方。
在需要照顧更舊的瀏覽器時,我們可以引入 <rp> 元素提供備援,例如：
<ruby>
注<rp>(</rp><rt>ㄓㄨˋ</rt><rp>)</rp>
音<rp>(</rp><rt>ㄧㄣ</rt><rp>)</rp>
</ruby>
如果使用者的瀏覽器無法識別 <ruby>,則會退而顯示為「注(ㄓㄨˋ)音(ㄧㄣ)」的形式。不過隨著 HTML5 早已成為主流標準,主流瀏覽器對 <ruby> 的支援相當完善,若您的受眾使用的瀏覽器較新,<rp> 可視情況省略。
多語系應用
<ruby> 與 <rt> 的組合不僅適用於中文注音,在日文以及其他語言的輔助發音場景也非常實用。在日文中,這種注音小字稱為 振假名(ふりがな,furigana),用來標註漢字的讀音。舉例而言,下列 HTML 將日文漢字「漢字」標上平假名讀音：
<ruby>漢字<rt>かんじ</rt></ruby>
結果會在「漢字」上方顯示「かんじ」的假名讀音。類似地,我們可以將整個日文字或片語作為基礎文字,一次提供對應讀音。例如「東京」兩字組成一個詞,可標註為：
<ruby>東京<rt>とうきょう</rt></ruby>
這會在「東京」上方居中顯示「とうきょう」(とうきょう是"東京"的整體發音)。實際排版時,瀏覽器會自動處理多字基礎與註釋長度不同的對齊問題,確保呈現美觀。一般來說,日文的假名註音會均勻分布在對應的漢字上方並置中對齊。
透過 <ruby> 標籤,英文字將以小字形態出現在日文「絵文字」上方,提供讀者該詞彙的英文發音說明。這顯示了 <ruby> 的靈活性：不僅可以用來標示相同語言的發音(如日文漢字配假名),也能用於跨語言註解(如外語詞彙的翻譯或發音指引)。甚至在韓文內容中,我們也可以使用 <ruby> 來標示漢字詞源或發音,例如將韓文 "강남대로" 加注對應的漢字 "江南大路" 作為輔助資訊。總之,<ruby> 元素為多語言文本提供了一種語義清晰、標準化的註解方式,大幅提升了國際化網站的內容可讀性。
版面與樣式控制
利用 CSS,我們可以進一步控制 <ruby> 標註的呈現樣式,確保版面美觀且符合設計需求。以下是幾個實用的技巧：
字體與大小調整
瀏覽器預設會將 <rt> 內容顯示為較小的字體,以區別於主體文字。但我們可以自行透過 CSS 調整。例如,將所有注釋文字設為灰色並稍微縮小字級：
rt {
font-size: 0.8em;
color: #555;
}
這段樣式會使 <rt> 元素的文字大小為基準字體的 80%,顏色變為灰色,以呈現更柔和的註音效果。同樣地,你可以針對 <ruby> 元素設定字型或行高,讓整組標註更符合設計要求。
間距與對齊
當註解文字較長或較短時,可能需要控制其在基礎文字上的對齊方式。CSS 提供了 Ruby 排版模組屬性,如 ruby-align 可以調整多個註釋與基礎文字的對齊分布。例如：
ruby {
ruby-align: center;
}
這將使註音文字在對應的基礎文字上方置中對齊(即使註音文字長度不一,瀏覽器會自動在字間分配空間,使其整體居中)。ruby-align 的其他常見值還有 start(註音與基礎文字起始處對齊)、space-between(註音若短於基礎文字,則兩端對齊,中間留空)等,可依需求選擇。
註解位置控制
預設情況下,針對橫排文字,<rt> 註解會顯示在基礎文字上方;對於直排文字(如日文直書或古籍中文直排),註解則在文字右側顯示。如果我們想強制改變註解位置,可以使用 CSS 的 ruby-position 屬性。例如：
ruby {
ruby-position: under;
}
這將使註音內容顯示在基礎文字下方(對橫排文字而言),常用於某些設計需將註釋置底的情況。相對地,ruby-position: over; 表示註解在上方——但由於這是預設行為,較少需特別指定。需要注意,有些舊版瀏覽器曾使用非標準屬性(如 -webkit-ruby-position),但在現今環境中皆應使用標準的 ruby-position。
行高與間行
如果你調整了 <rt> 的字體大小或使用了較多行的註解,務必留意行距(line-height)。預設情況下,瀏覽器會自動為帶有 Ruby 的行留出適當空間。然而,自行修改 CSS 可能導致註音文字與上下行重疊或留白過大。建議在調整 <rt> 字體後,檢查不同瀏覽器中的呈現效果,必要時透過調整父元素的 line-height 或對 <ruby> 使用 display: ruby 等方式來微調排版,確保主體文本和註音之間的距離適中、不影響閱讀。
透過以上這些 CSS 控制技巧,我們可以讓 <ruby> 標籤的註音呈現更符合預期的版面風格。同時保有 <ruby> 元素語義上的優勢(例如對搜尋引擎和輔助技術更加友善),而不用退回以圖片或手工排版的方式來實現。
常見錯誤與排解
初次嘗試 <ruby> 標註時,開發者可能會遇到一些容易犯的錯誤。以下列出幾個常見誤用情形以及對應的解決方案：
問與答單元（FAQ）
以上即是 <ruby> 與 <rt> 在多語系及中文注音顯示上的完整教學。通過正確運用這些標籤,搭配必要的 <rp> 備援和 CSS 樣式調整,我們可以輕鬆實現專業且美觀的注音排版效果。希望本教程能幫助有基本 HTML 知識的您順利掌握 Ruby 標註技巧,讓網站內容在語言學習和跨語系場景中更具親和力和易讀性。祝您在實作中玩得開心,打造出令使用者讚賞的多語言網頁！
