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

Discourse 論壇軟體的安裝及使用 Discourse 論壇使用說明
,
1

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

<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 網頁上測試，完成再複製到你的網站