<ruby> 註釋元素。用於旁註標記,例如標示東亞文字的發音

語言教學文件,特別是東亞的文字,常有上方標註的需求。例如:漢字的注音、日文的 漢字 + 平假名 等。

<ruby>: The Ruby Annotation element 就是提供這類需求的語法。

寫的方式並不難,有固定的語法:把 文章內文標註文字,用下方的語法包起來。

如果是詞,就寫在一起;如果是字,就分別寫。

<ruby>
  文章內文 <rp>(</rp><rt>標註文字</rt><rp>)</rp>
</ruby>

詞的表現

標註文字會連在一起。

畫面呈現範例

明日 (あした)

明日 (Ashita)

上述畫面之語法

<ruby>
明日 <rp>(</rp><rt>あした</rt><rp>)</rp> 
</ruby>

<ruby>
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> 
</ruby>

字的表現

一個字一個字分別標註。

畫面呈現範例

(ten)(ki)

(てん)()

上述畫面之語法

<ruby>
  天 <rp>(</rp><rt>ten</rt><rp>)</rp>
  気 <rp>(</rp><rt>ki</rt><rp>)</rp>
</ruby>

<ruby>
  天 <rp>(</rp><rt>てん</rt><rp>)</rp>
  気 <rp>(</rp><rt>き</rt><rp>)</rp>
</ruby>

放在一句話中的範例

畫面呈現範例

明日 (あした) (てん)() になあれ

上述畫面之語法

<ruby>
明日 <rp>(</rp><rt>あした</rt><rp>)</rp> 
</ruby>
<ruby>
天 <rp>(</rp><rt>てん</rt><rp>)</rp>
気 <rp>(</rp><rt>き</rt><rp>)</rp>
</ruby>
になあれ

畫面呈現範例
はじめまして。
(わたし)
はアンナです。

上述畫面之語法

<!-- 為避免換行,這裡把 <ruby> 和 </ruby> 分別接在【前文後方】和【後文前方】-->
はじめまして。<ruby>
私 <rp>(</rp><rt>わたし</rt><rp>)</rp> 
</ruby> はアンナです。

<!-- 當然,你要寫在同一行也可以 -->
はじめまして。<ruby>私<rp>(</rp><rt>わたし</rt><rp>)</rp> </ruby>はアンナです。

參考資料:Mozilla MDN Web Docs

可以直接在 MDN 網頁上測試,完成再複製到你的網站