<ruby> - The Ruby Annotation Element

The `<ruby>` Element

Inline HTML5

The ruby annotation element represents small annotations rendered above, below, or next to base text, typically used for showing pronunciation of East Asian characters or providing translations.

Quick Example

<ruby>
漢 <rt>kan</rt>
字 <rt>ji</rt>
</ruby>

Result

Interactive code playground requires JavaScript. Here's the code:

<ruby>
漢 <rt>kan</rt>
字 <rt>ji</rt>
</ruby>

Syntax

<ruby>
  base text <rt>annotation</rt>
</ruby>

The <ruby> element contains base text and one or more <rt> (ruby text) elements for annotations.

Structure

A complete ruby annotation typically includes:

<ruby> - Container element
Base text - The main content being annotated
<rt> - Ruby text (the annotation)
<rp> - Ruby parentheses (optional, for fallback)

<ruby>
漢字 <rp>(</rp><rt>kanji</rt><rp>)</rp>
</ruby>

Result

Interactive code playground requires JavaScript. Here's the code:

<ruby>
漢字 <rp>(</rp><rt>kanji</rt><rp>)</rp>
</ruby>

Common Use Cases

Japanese Furigana

Showing pronunciation of kanji characters:

<ruby>
日<rt>に</rt>
本<rt>ほん</rt>
語<rt>ご</rt>
</ruby> (Japanese language)

Result

Interactive code playground requires JavaScript. Here's the code:

<ruby>
日<rt>に</rt>
本<rt>ほん</rt>
語<rt>ご</rt>
</ruby> (Japanese language)

Chinese Pinyin

<ruby>
中<rt>zhōng</rt>
文<rt>wén</rt>
</ruby> (Chinese)

Result

Interactive code playground requires JavaScript. Here's the code:

<ruby>
中<rt>zhōng</rt>
文<rt>wén</rt>
</ruby> (Chinese)

Korean Hanja Readings

<ruby>
大<rt>대</rt>
韓<rt>한</rt>
民<rt>민</rt>
國<rt>국</rt>
</ruby> (South Korea)

Result

Interactive code playground requires JavaScript. Here's the code:

<ruby>
大<rt>대</rt>
韓<rt>한</rt>
民<rt>민</rt>
國<rt>국</rt>
</ruby> (South Korea)

Character-by-Character Annotations

<p>The word <ruby>東<rt>tō</rt>京<rt>kyō</rt></ruby> means Tokyo.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The word <ruby>東<rt>tō</rt>京<rt>kyō</rt></ruby> means Tokyo.</p>

Group Annotations

Annotating multiple characters as a group:

<ruby>
明日 <rt>ashita</rt>
</ruby> means tomorrow.

Result

Interactive code playground requires JavaScript. Here's the code:

<ruby>
明日 <rt>ashita</rt>
</ruby> means tomorrow.

Translation Annotations

<ruby>
こんにちは <rt>hello</rt>
</ruby>

Result

Interactive code playground requires JavaScript. Here's the code:

<ruby>
こんにちは <rt>hello</rt>
</ruby>

With Fallback Parentheses

The <rp> element provides fallback for browsers that don’t support ruby:

<ruby>
漢<rp>(</rp><rt>kan</rt><rp>)</rp>
字<rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

<!-- In browsers without ruby support, displays: 漢(kan)字(ji) -->

Result

Interactive code playground requires JavaScript. Here's the code:

<ruby>
漢<rp>(</rp><rt>kan</rt><rp>)</rp>
字<rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

<!-- In browsers without ruby support, displays: 漢(kan)字(ji) -->

Real-World Examples

Japanese Text with Furigana

<p>
<ruby>私<rt>わたし</rt></ruby>は
<ruby>学<rt>がく</rt>生<rt>せい</rt></ruby>です。
</p>
<p>(I am a student.)</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
<ruby>私<rt>わたし</rt></ruby>は
<ruby>学<rt>がく</rt>生<rt>せい</rt></ruby>です。
</p>
<p>(I am a student.)</p>

Chinese Learning Material

<h4>Chinese Vocabulary</h4>
<ul>
<li><ruby>你<rt>nǐ</rt>好<rt>hǎo</rt></ruby> - Hello</li>
<li><ruby>谢<rt>xiè</rt>谢<rt>xie</rt></ruby> - Thank you</li>
<li><ruby>再<rt>zài</rt>见<rt>jiàn</rt></ruby> - Goodbye</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<h4>Chinese Vocabulary</h4>
<ul>
<li><ruby>你<rt>nǐ</rt>好<rt>hǎo</rt></ruby> - Hello</li>
<li><ruby>谢<rt>xiè</rt>谢<rt>xie</rt></ruby> - Thank you</li>
<li><ruby>再<rt>zài</rt>见<rt>jiàn</rt></ruby> - Goodbye</li>
</ul>

Language Learning App

<div class="flashcard">
<h4>Word of the Day</h4>
<p class="word">
  <ruby>
    桜<rp>(</rp><rt>さくら</rt><rp>)</rp>
  </ruby>
</p>
<p class="meaning">Cherry blossom</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="flashcard">
<h4>Word of the Day</h4>
<p class="word">
  <ruby>
    桜<rp>(</rp><rt>さくら</rt><rp>)</rp>
  </ruby>
</p>
<p class="meaning">Cherry blossom</p>
</div>

Dictionary Entry

<dl>
<dt>
  <ruby>
    水<rp>(</rp><rt>みず</rt><rp>)</rp>
  </ruby>
</dt>
<dd>Water</dd>

<dt>
  <ruby>
    火<rp>(</rp><rt>ひ</rt><rp>)</rp>
  </ruby>
</dt>
<dd>Fire</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<dl>
<dt>
  <ruby>
    水<rp>(</rp><rt>みず</rt><rp>)</rp>
  </ruby>
</dt>
<dd>Water</dd>

<dt>
  <ruby>
    火<rp>(</rp><rt>ひ</rt><rp>)</rp>
  </ruby>
</dt>
<dd>Fire</dd>
</dl>

Styling

Customize ruby annotation appearance:

<style>
ruby {
  font-size: 1.2em;
}
rt {
  font-size: 0.6em;
  color: #0066cc;
}
rp {
  color: #999;
}
</style>

<ruby>
東<rt>tō</rt>
京<rt>kyō</rt>
</ruby>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
ruby {
  font-size: 1.2em;
}
rt {
  font-size: 0.6em;
  color: #0066cc;
}
rp {
  color: #999;
}
</style>

<ruby>
東<rt>tō</rt>
京<rt>kyō</rt>
</ruby>

Position Ruby Below

<style>
.ruby-below {
  ruby-position: under;
}
.ruby-below rt {
  color: #d73a49;
}
</style>

<p class="ruby-below">
<ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.ruby-below {
  ruby-position: under;
}
.ruby-below rt {
  color: #d73a49;
}
</style>

<p class="ruby-below">
<ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>
</p>

Complex Ruby Examples

Multiple Annotations

<ruby>
<rb>旧</rb>
<rb>金</rb>
<rb>山</rb>
<rt>サン</rt>
<rt>フラン</rt>
<rt>シスコ</rt>
</ruby> (San Francisco)

Result

Interactive code playground requires JavaScript. Here's the code:

<ruby>
<rb>旧</rb>
<rb>金</rb>
<rb>山</rb>
<rt>サン</rt>
<rt>フラン</rt>
<rt>シスコ</rt>
</ruby> (San Francisco)

Mixed Content

<p>
Welcome to
<ruby>日<rt>に</rt>本<rt>ほん</rt></ruby>!
Enjoy your stay.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
Welcome to
<ruby>日<rt>に</rt>本<rt>ほん</rt></ruby>!
Enjoy your stay.
</p>

Browser Support

Browser	Version	Notes
Chrome	5+	Full support
Firefox	38+	Full support
Safari	5+	Full support
Edge	79+	Full support
IE	5.5+	Partial support

Modern browsers have good support for ruby annotations. Use <rp> for fallback in older browsers.

Accessibility

Screen readers may read both the base text and the ruby annotation, which can be helpful for learning pronunciation.

Language Declaration

Always specify the language for proper screen reader pronunciation:

<p lang="ja">
  <ruby>日<rt>に</rt>本<rt>ほん</rt></ruby>
</p>

Don’t Overuse

Too many annotations can be overwhelming:

Excessive
Selective

<!-- Every character annotated -->
<ruby>私<rt>わたし</rt></ruby><ruby>は<rt>は</rt></ruby>...

<!-- Only difficult characters annotated -->
<ruby>私<rt>わたし</rt></ruby>は学生です

Use Cases Summary

Language	Use	Example
Japanese	Furigana for kanji	`<ruby>漢字<rt>かんじ</rt></ruby>`
Chinese	Pinyin pronunciation	`<ruby>中文<rt>zhōngwén</rt></ruby>`
Korean	Hanja readings	`<ruby>韓國<rt>한국</rt></ruby>`
Any	Translation notes	`<ruby>text<rt>translation</rt></ruby>`

Ruby text annotation element. Learn more →

Ruby fallback parentheses. Learn more →

<ruby> - The Ruby Annotation Element

The <ruby> Element

Quick Example

Syntax

Structure

Common Use Cases

Japanese Furigana

Chinese Pinyin

Korean Hanja Readings

Character-by-Character Annotations

Group Annotations

Translation Annotations

With Fallback Parentheses

Real-World Examples

Japanese Text with Furigana

Chinese Learning Material

Language Learning App

Dictionary Entry

Styling

Position Ruby Below

Complex Ruby Examples

Multiple Annotations

Mixed Content

Browser Support

Accessibility

Screen Reader Behavior

Language Declaration

Don’t Overuse

Use Cases Summary

Related Elements

Specifications

The `<ruby>` Element