<rp>-Phonetic fallback parentheses

The <rp> tag in HTML is used to provide fallback parentheses for <ruby> annotations, displaying them when the browser does not support <ruby>. It is typically used in conjunction with <rt> and <ruby> to ensure that phonetic or annotation content remains readable in incompatible environments.

Basic Function of the <rp> Tag

<rp>, short for "Ruby Parenthesis," is specifically designed for compatibility with <ruby> annotations. When a browser cannot render <ruby>, the parentheses within <rp> will wrap the <rt> content, creating a readable format like (pronunciation). Modern browsers generally support <ruby>, but some older versions or specific environments still require compatibility handling.

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

In browsers that support <ruby>, this displays as "漢" with the small text "han" above it; in unsupported browsers, it appears as "漢(han)".

Collaboration with Other Ruby Tags

<rp> must be used in combination with the following tags:

• <ruby>: Defines the phonetic annotation container
• <rt>: The actual phonetic content
• <rb> (optional): Defines the base text being annotated

A typical structure is as follows:

<ruby>
  <rb>漢</rb>
  <rp>(</rp><rt>hàn</rt><rp>)</rp>
</ruby>

Practical Use Cases

East Asian Text Phonetic Annotations

Japanese kanji with furigana:

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

Rare Character Annotations

Chinese rare characters with pinyin:

<ruby>
  龘 <rp>(</rp><rt>dá</rt><rp>)</rp>
</ruby>

Multilingual Learning Materials

German words with pronunciation:

<ruby>
  Streichholzschächtelchen <rp>[</rp><rt>ʃtʁaɪ̯çhɔlt͡sˌʃɛçtəlçən</rt><rp>]</rp>
</ruby>

Advanced Usage Examples

Nested Complex Structures

<ruby>
  <ruby>
    漢 <rp>(</rp><rt>han</rt><rp>)</rp>
  </ruby>
  <rp>(</rp><rt>Chinese character</rt><rp>)</rp>
</ruby>

Custom Styling with CSS

<style>
  rp { color: gray; font-size: 0.8em; }
  rt { font-family: "IPAmjMincho", serif; }
</style>
<ruby>
  東京 <rp>〖</rp><rt>とうきょう</rt><rp>〗</rp>
</ruby>

Browser Compatibility Considerations

Although modern browsers (Chrome, Firefox, Safari, Edge) support <rp>, note the following:

• IE9+ offers partial support and may require polyfills
• Some readers may ignore <rp>
• Mobile browser rendering may vary

Code to detect support:

const isRpSupported = () => {
  const ruby = document.createElement('ruby');
  ruby.innerHTML = '<rp>(</rp><rt>test</rt><rp>)</rp>';
  document.body.appendChild(ruby);
  const supported = ruby.offsetHeight === ruby.firstChild.offsetHeight;
  document.body.removeChild(ruby);
  return !supported;
};

Accessibility Best Practices

1. Ensure <rp> content is hidden from screen readers:

<rp aria-hidden="true">(</rp>

2. Add lang attributes to <rt>:

<ruby>
  日本語 <rp>(</rp><rt lang="ja">にほんご</rt><rp>)</rp>
</ruby>

3. Provide alternative text:

<ruby aria-label="kanji with furigana">
  漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
</ruby>

Integration with Other Technologies

Dynamic Generation with JavaScript

function addRuby(base, ruby) {
  const element = document.createElement('ruby');
  element.innerHTML = `${base}<rp>(</rp><rt>${ruby}</rt><rp>)</rp>`;
  return element;
}

Usage in React Components

function RubyText({ base, ruby }) {
  return (
    <ruby>
      {base}
      <rp>(</rp><rt>{ruby}</rt><rp>)</rp>
    </ruby>
  );
}

Historical Context and Technical Specifications

<rp> was first standardized in HTML5, originating from East Asian typography needs. The W3C specification explicitly states:

"The rp element provides parentheses around rt content for browsers that do not support ruby annotations."

Rendering rules in the HTML Living Standard:

1. When <ruby> is supported: Ignore <rp> content
2. When unsupported: Display <rp> content as wrapping symbols for <rt>

Common Issue Troubleshooting

Reasons Parentheses May Not Appear

1. Forgetting to close the <rp> tag
2. CSS setting rp { display: none; }
3. Nested within an invisible parent element

Solutions for Style Conflicts

When custom <rt> styles affect layout:

rt {
  text-align: center;
  line-height: normal;
  white-space: nowrap;
}

Performance Optimization Tips

1. Avoid overuse: Only add <rp> when fallback is needed
2. Maintain structure in minified scenarios:

<ruby><rb>漢</rb><rp>(</rp><rt>han</rt><rp>)</rp></ruby>

3. Preload ruby fonts:

<link rel="preload" href="ruby-font.woff2" as="font" type="font/woff2" crossorigin>

Internationalization Considerations

Regional parenthesis preferences:

• Chinese: （）
• Japanese: 「」
• Korean: 〈〉
• Western: []

Example adaptation:

<ruby>
  韓國 <rp>〈</rp><rt lang="ko">한국</rt><rp>〉</rp>
</ruby>