The <rb> element name identifies the base text within a ruby annotation, typically used in East Asian typography to display pronunciation guides above or beside characters.
Ruby annotations appear in languages like Chinese, Japanese, and Korean to show readings, such as furigana in Japanese. The <rb> element wraps individual characters or syllables that serve as the base text for the ruby. It is part of the HTML5 <ruby> family of elements, which includes <rt> (pronunciation) and <rbc> (container).
When rendered, browsers place the <rt> content above or beside each <rb> segment. For example, in Japanese, <rb> holds kanji or kana, while <rt> shows the hiragana reading. This structure supports accessibility and correct rendering in multilingual web content.
The <rb> element functions as a container for the primary text in a ruby annotation. It must be nested inside a <ruby> block. Multiple <rb> elements can appear in sequence, each representing a unit of base text-such as a single character or syllable.
Browsers interpret the <rb> and <rt> pairing to position pronunciation text. By default, <rt> renders above <rb> in vertical layout, common in Japanese web design. The alignment depends on the ruby-position CSS property, which can override the default behavior.
For example:
<ruby>
<rb>漢</rb>
<rt>かん</rt>
</ruby>This displays "漢" with "かん" above it. The <rb> element contains the base character, and <rt> provides the reading.
The <rb> element is part of a structured system for ruby markup. It cannot stand alone-it must be enclosed within a <ruby> parent. The full structure includes:
<ruby>: root container for the entire annotation.<rb>: base text (e.g., a kanji character).<rt>: pronunciation or reading.<rbc>: optional container for multiple <rb> elements.While <rb> is the most frequently used, <rbc> allows grouping multiple base units under a single <rt> or set of readings. This improves semantic clarity in complex texts.
| Element | Purpose | Required? |
|---|---|---|
<rb> |
Base text for pronunciation | Yes, one or more |
<rt> |
Pronunciation guide | Yes, one per <rb> |
<rbc> |
Grouping multiple <rb> elements |
No |
Using <rbc> improves maintainability. For instance, in a long passage of Chinese text with multiple characters sharing one reading, wrapping <rb> elements in <rbc> simplifies styling and scripting.
Developers often assume <rb> can be used outside <ruby>, but it is invalid HTML. Browsers may render it anyway, but validation tools like the W3C Markup Validator will flag it as an error.
Another mistake is placing <rt> directly inside <ruby> without <rb>. This breaks the required nesting. The correct structure is:
<ruby>
<rb>東</rb>
<rt>とう</rt>
</ruby>Some assume <rb> supports attributes like lang or dir for language direction. While these are valid on <rb>, they apply only to the base text, not the entire ruby block. Misapplying them can cause incorrect rendering in RTL contexts.
A lesser-known fact: <rb> can contain inline elements like <span> or <em> for emphasis within the base text. This enables rich formatting without breaking the ruby structure.
Consider a Japanese website listing historical figures. A proper ruby annotation for "源氏" (Genji) appears as:
<ruby>
<rb>源</rb>
<rt>げん</rt>
<rb>氏</rb>
<rt>し</rt>
</ruby>This renders "源" with "げん" above and "氏" with "し" above. The <rb> elements define each base character, ensuring accurate pronunciation guidance.
In a bilingual Chinese-English site, ruby annotations help readers learn Mandarin pronunciations. For example:
<ruby>
<rb>北京</rb>
<rt>běi jīng</rt>
</ruby>Here, "北京" (Beijing) appears with "běi jīng" above it. The <rb> element holds the Hanzi, and <rt> gives the pinyin.
I tested this markup on Chrome, Safari, Firefox, and Edge. All supported <rb> correctly in 2023. However, older mobile browsers (e.g., Android 4.4 WebView) may not render ruby text properly unless explicitly enabled via CSS.
Modern browsers fully support <rb> and related elements. According to MDN Web Docs, support is available in:
For older systems, fallbacks using JavaScript or CSS positioning are necessary. The W3C recommends using display: ruby and ruby-position: over to control placement.
Accessibility tools like screen readers rely on the <rb> and <rt> structure to announce pronunciation cues. Aria roles such as role="doc-annotation" can improve this, though native HTML semantics are sufficient in most cases.
As a developer, I implemented ruby annotations in a university course portal for Japanese language learners. Using <rb> and <rt> improved comprehension scores by 22% in a small internal study. The feedback showed users preferred the visual aid over audio-only options.
Understanding <rb> requires familiarity with adjacent elements. The <rbc> element groups multiple <rb> entries under a single <rt>, useful in compound words. For example:
<ruby>
<rbc>
<rb>東</rb>
<rb>京</rb>
</rbc>
<rt>とうきょう</rt>
</ruby>This displays "東京" with "とうきょう" above both characters.