<rp>
Overview
The <rp> element provides fallback parentheses for browsers that might not support ruby annotations using the <ruby> element. This ensures that users, regardless of their browser's capabilities, can recognize the presence of ruby annotations.
Examples and Usage
The primary use case for the <rp> element is in conjunction with ruby annotations, predominantly used for displaying pronunciation guides for East Asian characters.
Consider the following example, which showcases the pronunciation of the Japanese word "今日" (meaning "today" in English):
<ruby>
今日 <rp>(</rp><rt>Kyō</rt><rp>)</rp>
</ruby>
ruby {
font-size: 3em;
}
Here, the <ruby> element wraps the Japanese phrase. The <rt> element provides the ruby annotation, indicating the pronunciation "Kyō" for the base word. Each <rp> element encloses the opening and closing parentheses around the <rt> element, which contains the annotation text. These parentheses serve as a fallback. In browsers that lack support for ruby annotations, users will see the word "今日" followed by the pronunciation "Kyō" in parentheses, ensuring clarity.
The intent of the CSS in this illustrative example is purely for better visibility.
Attribute Breakdown
The <rp> element doesn't have any specific attributes; it inherits global attributes common to all HTML elements.
Accessibility Aspects
The <rp> element inherently aids accessibility by providing fallback content. However, it's vital to understand that the <rp> element does not map to a specific role in ARIA. Therefore, developers should refrain from assigning any ARIA roles or attributes to the <rp> element, as they wouldn't semantically improve its accessibility.
Associated Elements
<ruby><rt>
Additional Notes
It's worth noting that while ruby annotations are primarily for East Asian languages, their adoption in web typography can serve diverse linguistic needs, especially in multilingual documents.
Elements such as
<ruby>,<rt>, and<rp>form the foundation of ruby annotations in HTML, allowing developers to present base text alongside its phonetic or explanatory annotations.CSS properties, like
ruby-position, can be used to adjust the visual presentation of ruby annotations.
Browser Compatibility
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.
| Browser | Chrome | Edge | Safari | Firefox | Opera | Internet Explorer |
|---|---|---|---|---|---|---|
| Support | Yes | Yes* | Yes | Yes | Yes | Yes* |