← Back to All Tags

<ruby>

Defines a ruby annotation container for East Asian typography

✨ HTML5

Definition and Usage

The <ruby> element specifies a ruby annotation, which is a small text displayed above or beside the base text, typically used in East Asian typography for pronunciation or translation guides.

The <ruby> element is used with the <rt> tag (ruby text) and optionally with the <rp> tag (ruby parentheses) for fallback support.

Ruby annotations are commonly used in:

  • Japanese: Furigana (hiragana or katakana reading guides above kanji)
  • Chinese: Pinyin (romanized pronunciation above characters)
  • Korean: Hanja pronunciation guides
  • Educational materials: Teaching pronunciation to language learners
  • Dictionaries: Showing pronunciation or definitions
Tip: The <ruby> tag is the container element that holds both the base text and the <rt> annotation text.
Note: Ruby annotations are essential for languages that use logographic writing systems, helping readers understand pronunciation and meaning.

Browser Support

The <ruby> tag is supported in all major browsers:

Chrome
Chrome
5.0+
Firefox
Firefox
38.0+
Safari
Safari
5.0+
Edge
Edge
79.0+
Opera
Opera
15.0+

Attributes

The <ruby> tag supports the Global Attributes in HTML.

The <ruby> tag also supports the Event Attributes in HTML.

Examples

Basic Japanese Furigana

Add furigana reading guide for Japanese kanji:

Example

<ruby>
  ζΌ’ε­—
  <rt>γ‹γ‚“γ˜</rt>
</ruby>

Chinese Pinyin

Add pinyin pronunciation for Chinese characters:

Example

<ruby>
  δΈ­ε›½
  <rt>Zhōngguó</rt>
</ruby>

With Fallback Parentheses

Include <rp> tags for browsers without ruby support:

Example

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

Multiple Ruby Annotations

Add annotations to multiple words in a sentence:

Example

<p>
  私は
  <ruby>ζ—₯本θͺž<rt>にほんご</rt></ruby>γ‚’
  <ruby>勉強<rt>べんきょう</rt></ruby>しています。
</p>

Complex Ruby Structure

Multiple characters with individual annotations:

Example

<ruby>
  明ζ—₯
  <rt>γ‚γ—γŸ</rt>
</ruby>は
<ruby>
  倩気
  <rt>てんき</rt>
</ruby>が
<ruby>
  良い
  <rt>γ‚ˆγ„</rt>
</ruby>です。

Styled Ruby Annotations

Customize ruby annotation appearance with CSS:

Example

<style>
  ruby {
    font-size: 28px;
    font-weight: 500;
  }

  rt {
    font-size: 14px;
    color: #745af2;
    font-weight: 600;
  }

  .highlight rt {
    background-color: #fff3cd;
    padding: 2px 4px;
    border-radius: 3px;
  }
</style>

<ruby class="highlight">
  εŒ—δΊ¬
  <rt>BΔ›ijΔ«ng</rt>
</ruby>

Ruby Structure Explained

A complete ruby annotation consists of the following components:

<ruby>
  base text
  <rp>(</rp>
  <rt>annotation</rt>
  <rp>)</rp>
</ruby>
  • <ruby>: Container element for the entire annotation
  • Base text: The main text to be annotated (e.g., kanji characters)
  • <rt>: The annotation text displayed above/beside the base text
  • <rp>: Optional fallback parentheses for browsers without ruby support

East Asian Typography

Ruby annotations are an essential part of East Asian typography, serving several important purposes:

  • Pronunciation Guides: Help readers pronounce unfamiliar or complex characters
  • Language Learning: Essential tool for students learning Japanese, Chinese, or Korean
  • Children's Literature: Make books accessible to young readers who haven't learned all characters yet
  • Technical Terms: Provide pronunciation for specialized vocabulary or jargon
  • Proper Names: Clarify pronunciation of names, especially foreign names written in local script
  • Accessibility: Help readers with reading difficulties or visual impairments

Use Cases

  • Japanese Furigana: Hiragana or katakana pronunciation above kanji characters
  • Chinese Pinyin: Romanized pronunciation system to help with character reading
  • Korean Hanja: Hangul pronunciation guides for Chinese characters used in Korean
  • Educational Materials: Textbooks, learning apps, and language courses
  • Manga and Comics: Adding reading guides for younger audiences
  • News Articles: Helping readers with difficult or uncommon characters
  • Dictionaries: Showing pronunciation alongside word definitions

Try it Yourself

Interactive Example

Here are live examples of ruby annotations:

Japanese: ζ—₯ζœ¬γ«γ»γ‚“

Chinese: εŒ—δΊ¬BΔ›ijΔ«ng

Korean: ι¦–ηˆΎμ„œμšΈ

Best Practices

  • Always include <rp> tags for fallback support in older browsers
  • Use appropriate font sizes - ruby text should be smaller but still readable
  • Structure ruby properly: place <rt> immediately after the base text it annotates
  • Keep annotations concise and relevant to the base text
  • Consider your audience - not all readers need ruby annotations
  • Test in multiple browsers to ensure consistent rendering
  • Use CSS to style ruby text for better visual hierarchy
  • Ensure proper character encoding (UTF-8) for East Asian characters
  • Don't overuse ruby - annotate only where necessary

Default CSS Settings

Most browsers will display the <ruby> element with the following default values:

Default CSS

ruby {
  display: ruby;
}

rt {
  display: ruby-text;
  font-size: 50%;
  line-height: 1;
}

Related Tags

  • <rt>

    Defines ruby text annotation

  • <rp>

    Defines fallback parentheses

  • <rb>

    Defines ruby base text

  • <rtc>

    Defines ruby text container

  • <rbc>

    Defines ruby base container