<rt> - The Ruby Text Element

The `<rt>` Element

Inline HTML5

The ruby text element specifies the ruby text component of a ruby annotation, providing pronunciation, translation, or transliteration information for East Asian typography.

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 text</rt>
</ruby>

The <rt> element must be used inside a <ruby> element and contains the annotation for the base text.

Common Use Cases

Japanese Furigana

<ruby>東<rt>とう</rt>京<rt>きょう</rt></ruby> (Tokyo)

Result

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

<ruby>東<rt>とう</rt>京<rt>きょう</rt></ruby> (Tokyo)

Chinese Pinyin

<ruby>北<rt>běi</rt>京<rt>jīng</rt></ruby> (Beijing)

Result

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

<ruby>北<rt>běi</rt>京<rt>jīng</rt></ruby> (Beijing)

Korean Pronunciation

<ruby>韓<rt>한</rt>國<rt>국</rt></ruby> (Korea)

Result

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

<ruby>韓<rt>한</rt>國<rt>국</rt></ruby> (Korea)

Pronunciation Guide

<p>Learn to say:
<ruby>
  こ<rt>ko</rt>
  ん<rt>n</rt>
  に<rt>ni</rt>
  ち<rt>chi</rt>
  は<rt>wa</rt>
</ruby>
</p>

Result

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

<p>Learn to say:
<ruby>
  こ<rt>ko</rt>
  ん<rt>n</rt>
  に<rt>ni</rt>
  ち<rt>chi</rt>
  は<rt>wa</rt>
</ruby>
</p>

Translation Notes

<ruby>
さくら <rt>cherry blossom</rt>
</ruby>

Result

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

<ruby>
さくら <rt>cherry blossom</rt>
</ruby>

Word-Level Annotations

<ruby>
明日 <rt>tomorrow</rt>
</ruby> will be sunny.

Result

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

<ruby>
明日 <rt>tomorrow</rt>
</ruby> will be sunny.

Multiple `<rt>` Elements

You can have multiple ruby text elements for different parts:

<ruby>
生<rt>せい</rt>
年<rt>ねん</rt>
月<rt>がっ</rt>
日<rt>ぴ</rt>
</ruby> (date of birth)

Result

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

<ruby>
生<rt>せい</rt>
年<rt>ねん</rt>
月<rt>がっ</rt>
日<rt>ぴ</rt>
</ruby> (date of birth)

Styling

Customize ruby text appearance:

<style>
rt {
  font-size: 0.5em;
  color: #0066cc;
  font-weight: 600;
}
</style>

<ruby>
日<rt>に</rt>
本<rt>ほん</rt>
</ruby>

Result

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

<style>
rt {
  font-size: 0.5em;
  color: #0066cc;
  font-weight: 600;
}
</style>

<ruby>
日<rt>に</rt>
本<rt>ほん</rt>
</ruby>

Colored Annotations

<style>
.pronunciation rt {
  color: #d73a49;
}
.translation rt {
  color: #28a745;
  font-style: italic;
}
</style>

<p class="pronunciation">
<ruby>東<rt>とう</rt>京<rt>きょう</rt></ruby>
</p>
<p class="translation">
<ruby>東京<rt>Tokyo</rt></ruby>
</p>

Result

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

<style>
.pronunciation rt {
  color: #d73a49;
}
.translation rt {
  color: #28a745;
  font-style: italic;
}
</style>

<p class="pronunciation">
<ruby>東<rt>とう</rt>京<rt>きょう</rt></ruby>
</p>
<p class="translation">
<ruby>東京<rt>Tokyo</rt></ruby>
</p>

Real-World Examples

Language Learning Card

<div class="flashcard">
<p class="word">
  <ruby>
    私<rt>わたし</rt>
  </ruby>
</p>
<p class="meaning">I, me</p>
<p class="example">
  <ruby>私<rt>わたし</rt></ruby>は学生です。
</p>
</div>

Result

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

<div class="flashcard">
<p class="word">
  <ruby>
    私<rt>わたし</rt>
  </ruby>
</p>
<p class="meaning">I, me</p>
<p class="example">
  <ruby>私<rt>わたし</rt></ruby>は学生です。
</p>
</div>

Dictionary Entry

<article class="dictionary">
<h4>
  <ruby>
    水<rt>みず</rt>
  </ruby>
</h4>
<p><strong>Meaning:</strong> water</p>
<p><strong>Type:</strong> noun</p>
</article>

Result

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

<article class="dictionary">
<h4>
  <ruby>
    水<rt>みず</rt>
  </ruby>
</h4>
<p><strong>Meaning:</strong> water</p>
<p><strong>Type:</strong> noun</p>
</article>

Song Lyrics

<div class="lyrics">
<p>
  <ruby>春<rt>はる</rt></ruby>が
  <ruby>来<rt>き</rt></ruby>た
</p>
<p class="translation">Spring has come</p>
</div>

Result

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

<div class="lyrics">
<p>
  <ruby>春<rt>はる</rt></ruby>が
  <ruby>来<rt>き</rt></ruby>た
</p>
<p class="translation">Spring has come</p>
</div>

Position Above or Below

Control ruby text position with CSS:

<style>
.above { ruby-position: over; }
.below { ruby-position: under; }
</style>

<p class="above">
Above: <ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>
</p>
<p class="below">
Below: <ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>
</p>

Result

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

<style>
.above { ruby-position: over; }
.below { ruby-position: under; }
</style>

<p class="above">
Above: <ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>
</p>
<p class="below">
Below: <ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>
</p>

With Fallback

Using <rp> for browsers without ruby support:

<ruby>
日<rp>(</rp><rt>に</rt><rp>)</rp>
本<rp>(</rp><rt>ほん</rt><rp>)</rp>
</ruby>

Result

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

<ruby>
日<rp>(</rp><rt>に</rt><rp>)</rp>
本<rp>(</rp><rt>ほん</rt><rp>)</rp>
</ruby>

Accessibility

Screen readers may announce both base text and ruby text, which can help with pronunciation learning.

Language Attribute

Specify language for proper pronunciation:

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

Keep It Simple

Make annotations clear and concise:

Clear
Too Complex

<ruby>漢<rt>kan</rt></ruby>

<ruby>漢<rt>kan (Chinese character)</rt></ruby>

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

The <rt> element is well-supported in modern browsers.

Container for ruby annotations. Learn more →

Fallback parentheses for ruby. Learn more →

<rt> - The Ruby Text Element

The <rt> Element

Quick Example

Syntax

Common Use Cases

Japanese Furigana

Chinese Pinyin

Korean Pronunciation

Pronunciation Guide

Translation Notes

Word-Level Annotations

Multiple <rt> Elements

Styling

Colored Annotations

Real-World Examples

Language Learning Card

Dictionary Entry

Song Lyrics

Position Above or Below

With Fallback

Accessibility

Screen Reader Behavior

Language Attribute

Keep It Simple

Browser Support

Related Elements

Specifications

The `<rt>` Element

Multiple `<rt>` Elements