HTML <ruby> Tag

The HTML <ruby> tag is used to display ruby annotations, which are small texts typically used to indicate pronunciation or provide additional information about the base text. This tag is especially useful in East Asian languages like Japanese, Chinese, and Korean, where pronunciation guides (also known as “furigana” or “pinyin”) are commonly needed.

The <ruby> element works in combination with the <rt> (ruby text) and optionally the <rp> (ruby parenthesis) tags to define the annotation and fallback content for unsupported browsers.

Basic Syntax of HTML <ruby> Tag

The basic structure of the <ruby> tag is:

</>
Copy
<ruby>
    Base Text
    <rt>Ruby Text</rt>
</ruby>

The Base Text is the main content, and the <rt> tag contains the annotation or pronunciation text.

Example of Ruby Annotations

Here’s an example of using the <ruby> tag to provide pronunciation for Chinese characters:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Ruby Annotation Example</h2>
        <p>
            <ruby>
                漢字
                <rt>kanji</rt>
            </ruby>
        </p>
    </body>
</html>
Example of Ruby Annotations

Explanation: The base text “漢字” is displayed with the ruby text “kanji” positioned above (or beside) it, depending on the browser’s rendering.

Using <rp> for Fallback Support

The <rp> tag provides fallback content for browsers that do not support the <ruby> element. Typically, parentheses are used:

</>
Copy
<ruby>
    漢字
    <rp>(</rp>
    <rt>kanji</rt>
    <rp>)</rp>
</ruby>

Result: In supported browsers, the ruby text “kanji” is displayed. In unsupported browsers, the text is displayed as “漢字(kanji)”.

Styling Ruby Text with CSS

You can style the ruby text using CSS to adjust its appearance, such as font size, color, or positioning:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            ruby {
                font-size: 1.2em;
            }
            rt {
                font-size: 0.8em;
                color: #007BFF;
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <h2>Styled Ruby Example</h2>
        <p>
            <ruby>
                漢字
                <rt>kanji</rt>
            </ruby>
        </p>
    </body>
</html>
Styling Ruby Text with CSS

Result: The base text (“漢字”) is displayed in a larger font size, while the ruby text (“kanji”) is styled with a smaller, italicized blue font.

Accessibility Benefits of <ruby> Tag

The <ruby> tag improves accessibility by providing additional context or pronunciation guides for text. Screen readers can identify and announce the ruby text, making it useful for visually impaired users or those unfamiliar with certain characters.

Practical Applications of the <ruby> Tag

  • Language Learning: Provide pronunciation guides for learners of East Asian languages.
  • Accessibility: Add contextual or explanatory text to characters that might be unfamiliar to users.
  • Typographic Styling: Enhance the presentation of complex scripts with additional annotations.
  • Cross-Cultural Support: Display translations or phonetic representations of text in multilingual content.