Definition and Usage

The <rp> element establishes what to show in browsers that do not support ruby annotations.

Ruby annotations are small annotations displayed above or beside base text, primarily used in East Asian typography to provide pronunciation guidance or meaning clarification.

The <rp> element is used to provide parentheses around a ruby text, to be shown by browsers that do not support ruby annotations.

The <rp> tag must be used as a child of a <ruby> element, and it should contain only text (typically opening or closing parentheses).

Attributes

The <rp> tag has no specific attributes.

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

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

Examples

Basic Japanese Ruby Annotation

Show pronunciation for a Japanese kanji character:

<ruby>
  " <rp>(</rp><rt>kan</rt><rp>)</rp>
  W <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

Chinese Pinyin

Add pinyin pronunciation to Chinese characters:

<p>
  <ruby>
    - <rp>(</rp><rt>zhMng</rt><rp>)</rp>
     <rp>(</rp><rt>gu</rt><rp>)</rp>
  </ruby>
  means "China"
</p>

Multiple Ruby Annotations

Display multiple ruby annotations in a sentence:

<p>
  <ruby>
    q <rp>(</rp><rt>hF</rt><rp>)</rp>
     <rp>(</rp><rt>MF</rt><rp>)</rp>
  </ruby>
  (Tokyo)
</p>

Parentheses Fallback Demonstration

The <rp> tag provides fallback for browsers without ruby support:

<!-- In browsers that support ruby: displays annotation above -->
<!-- In browsers without ruby support: displays (annotation) in parentheses -->

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

What is Ruby Annotation?

Ruby annotation is a small supplementary text placed above or beside base characters, primarily used in East Asian typography. The name "ruby" comes from a British typesetting term for 5.5-point type.

Common Uses:

• Japanese: Furigana (hiragana) above kanji to show pronunciation
• Chinese: Pinyin or Zhuyin above characters for pronunciation
• Korean: Pronunciation guides for hanja (Chinese characters)
• Educational Materials: Teaching pronunciation to language learners
• Specialized Content: Names, technical terms, or rare characters

Browser Support for Ruby

Modern browsers support ruby annotations, making the <rp> tag's fallback feature less critical today. However, it's still considered best practice to include it:

• Supporting Browsers: Chrome 5+, Firefox 38+, Safari 5+, Edge 79+, Opera 15+
• Display: Browsers that support ruby hide the <rp> content
• Fallback: Older browsers display the parentheses for clarity
• Accessibility: Screen readers may handle ruby content differently

East Asian Typography

Ruby annotations are an essential part of East Asian typography:

Japanese (Furigana)

• Hiragana characters placed above or beside kanji
• Helps readers pronounce difficult or rare kanji
• Common in children's books, manga, and language learning materials

Chinese (Pinyin/Zhuyin)

• Pinyin romanization or Zhuyin symbols above characters
• Essential for language learners and children
• Helps with character pronunciation and tone

Korean (Hanja)

• Hangul pronunciation guides for Chinese characters (hanja)
• Used in formal documents and educational materials
• Helps readers unfamiliar with hanja

Ruby Element Structure

The <rp> tag is part of a ruby annotation structure:

<ruby>
  Base Text
  <rp>(</rp>
  <rt>Annotation</rt>
  <rp>)</rp>
</ruby>

Element Descriptions:

• <ruby>: Container for the entire ruby annotation
• Base Text: The main text (e.g., kanji, Chinese characters)
• <rt>: Ruby text - the annotation (e.g., pronunciation)
• <rp>: Ruby parenthesis - fallback parentheses for non-supporting browsers

Try it Yourself

Best Practices

• Always use <rp> tags for fallback support, even though most modern browsers support ruby
• Include both opening and closing parentheses: one <rp> before and one after the <rt> tag
• The <rp> tag must be a direct child of the <ruby> element
• Use parentheses ( ) as the standard fallback characters
• Ensure the <rt> tag contains the actual annotation text
• Test your ruby annotations across different browsers and devices
• Consider accessibility - screen readers may read ruby content differently
• Use appropriate character encodings (UTF-8) for East Asian characters

Advanced Ruby Markup

For more complex ruby annotations, HTML5 provides additional elements:

• <rb>: Ruby base - explicitly marks the base text (rarely used, as base text can be implicit)
• <rtc>: Ruby text container - for complex ruby with multiple levels of annotation
• <rbc>: Ruby base container - groups multiple ruby bases together

Styling Ruby Annotations

You can style ruby annotations with CSS:

<style>
  ruby {
    font-size: 24px;
  }

  rt {
    font-size: 12px;
    color: #745af2;
  }

  /* Style fallback parentheses (only visible in non-supporting browsers) */
  rp {
    color: #999;
    font-size: 14px;
  }
</style>

<ruby>
  "W <rp>(</rp><rt>Kanji</rt><rp>)</rp>
</ruby>

Default CSS Settings

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

rp {
  display: none;
}

The display: none hides the parentheses in browsers that support ruby annotations. Browsers without ruby support treat <rp> as inline text.

Related Tags

• <ruby>

  Defines a ruby annotation

• <rt>

  Defines ruby text (annotation)

• <rb>

  Defines ruby base text

• <rtc>

  Defines ruby text container

• <rbc>

  Defines ruby base container