<ruby>

Overview

The <ruby> element in HTML provides a way to add ruby annotations. These annotations are displayed alongside the base text, giving context on pronunciation or meaning, primarily used in East Asian languages. Although rare, the element sees occasional use in other linguistic settings.

Examples and Usage

Ruby annotations, due to their specific nature, are not extensively used across the web. However, they're useful in specific linguistic and academic contexts, particularly for clarifying pronunciation or meaning in East Asian languages.

Consider the following example where a Japanese word is annotated with its English equivalent:

<ruby lang="ja">作家<rt lang="en">writer</ruby>

In this structure:

• The outer <ruby> element acts as a container.

• The base text "作家", which is the main content, is written directly inside the <ruby> tag.

• The <rt> tag encapsulates the annotation, "writer" in this case.

When rendered, the Japanese word "作家" appears with the English word "writer" positioned above it, offering an immediate translation.

Further illustrating the use of ruby annotations, let's look at a more complex structure:

<ruby>
今日 <rp>(</rp><rt>Kyō</rt><rp>)</rp>
</ruby>

Let's dissect the example above:

• "今日", means "today" in English, which is the base text.

• The <rt> element offers the pronunciation "Kyō".

Surrounding the <rt> element are <rp> elements. These are particularly useful as they provide parentheses around the annotation. In browsers that fully support ruby annotations, these parentheses typically won't be displayed. However, in those that don't, the <rp> ensures that the pronunciation is still indicated in a recognizable manner.

Attribute Breakdown

The <ruby> element doesn't have any specific attributes; it inherits global attributes common to all HTML elements.

Accessibility Aspects

The <ruby> element aids in making content more accessible through annotations. Although it doesn't correspond to a particular role in ARIA (role), developers should be mindful not to assign unnecessary ARIA roles or attributes, making sure the element retains its intended semantic meaning.

Associated Elements

• <rp>
• <rt>

Additional Notes

• <ruby> can occasionally be employed as phonetic guides in multilingual documents or as specific annotations in academic literature.

• Both the starting and ending tags of the <ruby> element must be present to maintain the correct semantic structure of the document.

• While CSS offers some properties to adjust the visual presentation of ruby annotations. However, not all features might be fully supported across all browsers.

Browser Compatibility

For a detailed breakdown of specific browser nuances, older version support, and CSS considerations, refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: ruby

The HTML Living Standard Specification: ruby