<ruby>Note<rp>(</rp><rt>zhù yīn fú hào</rt><rp>)</rp></ruby> - Translate this sentence into English, output plain text only, do not output any other content

The <ruby> tag in HTML is used to add phonetic annotations to East Asian characters, commonly employed for pinyin or kana annotations in languages like Japanese and Chinese. It combines three sub-tags—<ruby>, <rt>, and <rp>—to associate base text with its phonetic annotations.

Basic Structure of the <ruby> Tag

The typical structure of a <ruby> tag includes the following components:

• Base text: The character or phrase to be annotated
• Annotation text: Defined using the <rt> tag
• Fallback parentheses: Provided via the <rp> tag for browsers that do not support <ruby>

<ruby>
  漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
  字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

Core Sub-Tags Explained

<rt> Tag

Container for phonetic content, displayed above the base text (horizontal writing) or to its right (vertical writing). Supports custom CSS styling:

<ruby>
  東京<rt style="color: red; font-size: 0.6em">とうきょう</rt>
</ruby>

<rp> Tag

Provides fallback display for browsers that do not support ruby. Content is hidden in compatible browsers:

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

Practical Use Cases

Chinese Pinyin Annotation

Associating Chinese characters with pinyin:

<ruby>
  中<rp>(</rp><rt>zhōng</rt><rp>)</rp>
  国<rp>(</rp><rt>guó</rt><rp>)</rp>
</ruby>

Japanese Kana Annotation

Commonly used in Japanese learning materials:

<ruby>
  桜<rp>(</rp><rt>さくら</rt><rp>)</rp>
  前線<rp>(</rp><rt>ぜんせん</rt><rp>)</rp>
</ruby>

Multi-Character Annotation

Comparing whole-word vs. per-character annotation:

<!-- Whole-word annotation -->
<ruby>日本語<rt>にほんご</rt></ruby>

<!-- Per-character annotation -->
<ruby>
  日<rt>に</rt>
  本<rt>ほん</rt>
  語<rt>ご</rt>
</ruby>

Advanced Styling Control

Achieving complex layouts with CSS:

Adjusting Annotation Position

rt {
  font-size: 50%;
  padding-left: 0.2em;
  transform: translateY(-0.5em);
}

Vertical Text Support

.v-ruby {
  writing-mode: vertical-rl;
}

<div class="v-ruby">
  <ruby>漢<rt>かん</rt></ruby>
</div>

Browser Compatibility Solutions

Fallback solutions for older browsers:

Pure CSS Implementation

<span class="ruby">漢
  <span class="rt">かん</span>
</span>

<style>
.ruby { position: relative }
.rt {
  position: absolute;
  bottom: 100%;
  font-size: 50%;
}
</style>

JavaScript Polyfill

document.querySelectorAll('ruby').forEach(ruby => {
  if (!ruby.querySelector('rt')) return;
  const fallback = document.createElement('span');
  fallback.className = 'ruby-fallback';
  fallback.textContent = `(${ruby.querySelector('rt').textContent})`;
  ruby.appendChild(fallback);
});

Special Character Handling

Dealing with rare characters or unique layout requirements:

<ruby>
  𠮷<rp>(</rp><rt>つちよし</rt><rp>)</rp>
</ruby>

<ruby>
  <span style="font-size: 1.2em">鬱</span>
  <rt>うつ</rt>
</ruby>

Dynamic Content Generation

Creating ruby tags dynamically with JavaScript:

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

document.body.appendChild(createRuby('鱻', 'xiān'));

Typography Considerations

1. Font pairing: Ensure harmonious font combinations for base text and annotations
2. Line height adjustment: Annotations may affect line spacing; set line-height accordingly
3. Responsive design: Adjust annotation font size on small screens

@media (max-width: 480px) {
  rt {
    font-size: 40%;
  }
}