<rp> - The Ruby Fallback Parenthesis Element

The `<rp>` Element

Inline HTML5

The ruby fallback parenthesis element provides fallback parentheses for browsers that don’t support ruby annotations, ensuring readable text in all environments.

Quick Example

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

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>

Syntax

<ruby>
  base <rp>(</rp><rt>annotation</rt><rp>)</rp>
</ruby>

The <rp> element wraps parentheses that will only display in browsers without ruby support.

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

Displays: 漢 with “kan” above

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

Displays: 漢(kan)

Purpose

The <rp> element ensures graceful degradation:

In modern browsers: parentheses are hidden, ruby displays normally
In older browsers: parentheses display, making annotations readable

Common Use Cases

Japanese Furigana with Fallback

<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>

Chinese Pinyin with Fallback

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

Result

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

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

Korean Annotations

<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>

Translation Notes

<ruby>
こんにちは <rp>(</rp><rt>hello</rt><rp>)</rp>
</ruby>

Result

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

<ruby>
こんにちは <rp>(</rp><rt>hello</rt><rp>)</rp>
</ruby>

Structure Pattern

The standard pattern for ruby with fallback:

<ruby>
  base text
  <rp>(</rp>
  <rt>annotation</rt>
  <rp>)</rp>
</ruby>

Real-World Examples

Language Learning Material

<p>
Practice these words:
</p>
<ul>
<li><ruby>私<rp>(</rp><rt>わたし</rt><rp>)</rp></ruby> - I, me</li>
<li><ruby>学生<rp>(</rp><rt>がくせい</rt><rp>)</rp></ruby> - student</li>
<li><ruby>先生<rp>(</rp><rt>せんせい</rt><rp>)</rp></ruby> - teacher</li>
</ul>

Result

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

<p>
Practice these words:
</p>
<ul>
<li><ruby>私<rp>(</rp><rt>わたし</rt><rp>)</rp></ruby> - I, me</li>
<li><ruby>学生<rp>(</rp><rt>がくせい</rt><rp>)</rp></ruby> - student</li>
<li><ruby>先生<rp>(</rp><rt>せんせい</rt><rp>)</rp></ruby> - teacher</li>
</ul>

Document with Mixed Support

<article>
<p>
  The city of
  <ruby>
    東<rp>(</rp><rt>とう</rt><rp>)</rp>
    京<rp>(</rp><rt>きょう</rt><rp>)</rp>
  </ruby>
  is Japan's capital.
</p>
</article>

Result

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

<article>
<p>
  The city of
  <ruby>
    東<rp>(</rp><rt>とう</rt><rp>)</rp>
    京<rp>(</rp><rt>きょう</rt><rp>)</rp>
  </ruby>
  is Japan's capital.
</p>
</article>

Vocabulary List

<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>

<dt><ruby>土<rp>(</rp><rt>つち</rt><rp>)</rp></ruby></dt>
<dd>earth</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>

<dt><ruby>土<rp>(</rp><rt>つち</rt><rp>)</rp></ruby></dt>
<dd>earth</dd>
</dl>

Alternative Fallback Characters

You can use different parenthesis styles:

<!-- Square brackets -->
<ruby>
漢 <rp>[</rp><rt>kan</rt><rp>]</rp>
</ruby>

<!-- Curly braces -->
<ruby>
字 <rp>{</rp><rt>ji</rt><rp>}</rp>
</ruby>

<!-- Angle brackets -->
<ruby>
文 <rp>⟨</rp><rt>bun</rt><rp>⟩</rp>
</ruby>

Result

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

<!-- Square brackets -->
<ruby>
漢 <rp>[</rp><rt>kan</rt><rp>]</rp>
</ruby>

<!-- Curly braces -->
<ruby>
字 <rp>{</rp><rt>ji</rt><rp>}</rp>
</ruby>

<!-- Angle brackets -->
<ruby>
文 <rp>⟨</rp><rt>bun</rt><rp>⟩</rp>
</ruby>

Styling

The <rp> element is typically hidden in supporting browsers:

<style>
/* Modern browsers hide rp by default */
rp {
  display: none;
}

/* Custom styling for fallback */
.custom-fallback rp {
  color: #999;
  font-size: 0.9em;
}
</style>

<div class="custom-fallback">
<ruby>
  日<rp>(</rp><rt>に</rt><rp>)</rp>
  本<rp>(</rp><rt>ほん</rt><rp>)</rp>
</ruby>
</div>

Result

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

<style>
/* Modern browsers hide rp by default */
rp {
  display: none;
}

/* Custom styling for fallback */
.custom-fallback rp {
  color: #999;
  font-size: 0.9em;
}
</style>

<div class="custom-fallback">
<ruby>
  日<rp>(</rp><rt>に</rt><rp>)</rp>
  本<rp>(</rp><rt>ほん</rt><rp>)</rp>
</ruby>
</div>

When to Use `<rp>`

With <rp> (Recommended)
Without <rp>

<!-- Graceful degradation -->
<ruby>
  漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

Works in all browsers with readable fallback.

<!-- No fallback -->
<ruby>
  漢 <rt>kan</rt>
  字 <rt>ji</rt>
</ruby>

May be unreadable in browsers without ruby support.

Browser Behavior

Browser	Ruby Support	`<rp>` Behavior
Modern Chrome/Firefox/Safari	Yes	Hidden
IE 5.5-10	Partial	Visible
Very old browsers	No	Visible

Complete Example

<article lang="ja">
<h3>Japanese Vocabulary</h3>
<p>
  <ruby>
    私<rp>(</rp><rt>わたし</rt><rp>)</rp>
  </ruby>は
  <ruby>
    学<rp>(</rp><rt>がく</rt><rp>)</rp>
    生<rp>(</rp><rt>せい</rt><rp>)</rp>
  </ruby>です。
</p>
<p>(I am a student.)</p>
</article>

Result

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

<article lang="ja">
<h3>Japanese Vocabulary</h3>
<p>
  <ruby>
    私<rp>(</rp><rt>わたし</rt><rp>)</rp>
  </ruby>は
  <ruby>
    学<rp>(</rp><rt>がく</rt><rp>)</rp>
    生<rp>(</rp><rt>せい</rt><rp>)</rp>
  </ruby>です。
</p>
<p>(I am a student.)</p>
</article>

Accessibility

Screen readers typically ignore <rp> elements in modern browsers, reading only the base text and ruby annotations.

Ensure Readability

The fallback parentheses ensure text remains readable even when ruby annotations aren’t visually displayed.

Best Practices

Always use <rp> for maximum compatibility
Use standard parentheses () unless you have a specific reason
Place <rp> correctly - before and after each <rt> element
Test in multiple browsers to ensure fallback works

Browser Support

Browser	Version	Notes
Chrome	5+	Hides `<rp>` automatically
Firefox	38+	Hides `<rp>` automatically
Safari	5+	Hides `<rp>` automatically
Edge	79+	Hides `<rp>` automatically
IE	5.5+	Shows `<rp>` in fallback mode

All modern browsers properly handle <rp> elements, hiding them when ruby is supported.

Container element for ruby annotations. Learn more →

Ruby text annotation element. Learn more →

<rp> - The Ruby Fallback Parenthesis Element

The <rp> Element

Quick Example

Syntax

How It Works

Purpose

Common Use Cases

Japanese Furigana with Fallback

Chinese Pinyin with Fallback

Korean Annotations

Translation Notes

Structure Pattern

Real-World Examples

Language Learning Material

Document with Mixed Support

Vocabulary List

Alternative Fallback Characters

Styling

When to Use <rp>

Browser Behavior

Complete Example

Accessibility

Screen Reader Behavior

Ensure Readability

Best Practices

Browser Support

Related Elements

Specifications

The `<rp>` Element

When to Use `<rp>`