HTML <ruby> ruby tag
The <ruby> tag in HTML is used to provide ruby annotations, which are short explanatory text or pronunciation guides for East Asian characters, particularly in languages like Japanese and Chinese. Ruby annotations are useful for clarifying the meaning or pronunciation of complex characters.
Key Features:
- Ruby Annotation: The
<ruby>element is the container for both the base text (characters) and the annotation text. - Flexible Formatting: It works in conjunction with the
<rt>(ruby text) element to provide annotations and<rp>(ruby parenthesis) for fallback text in unsupported browsers.
Basic Syntax:
<ruby>
漢字<rt>Kanji</rt>
</ruby>
In this example:
- The
<ruby>element wraps around the base text "漢字" (Kanji). - The
<rt>element provides the annotation or pronunciation "Kanji" for the base text.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ruby Annotation Example</title>
</head>
<body>
<p>
The word <ruby>漢字<rt>Kanji</rt></ruby> is used to represent Chinese characters in Japanese.
</p>
<p>
Another example: <ruby>平仮名<rt>Hiragana</rt></ruby> is a syllabary used in Japanese writing.
</p>
</body>
</html>
In this example:
- The
<ruby>element is used to annotate "漢字" with the pronunciation "Kanji". - Another example shows the use of
<ruby>with "平仮名" and its pronunciation "Hiragana".
Attributes:
The <ruby> tag itself does not have any specific attributes. Its primary purpose is to contain the base text and associated annotations, which are styled and formatted by the <rt> and <rp> elements.
Use Cases:
- Pronunciation Guides: Provides phonetic guides for characters, useful in educational materials and language learning.
- Clarification: Offers additional context or meanings for characters that might be unfamiliar to readers.
- Complex Characters: Helps in presenting complex East Asian characters in a more accessible way.
Styling:
You can style the <ruby>, <rt>, and <rp> elements using CSS to customize their appearance.
ruby {
font-size: 1em; /* Base font size for the ruby text */
}
rt {
font-size: 0.8em; /* Smaller font size for the annotation text */
color: #555; /* Color for the annotation text */
}
rp {
color: #666; /* Color for the fallback text */
}
In this example:
- The font size of the
<rt>annotation is set smaller than the base text for differentiation. - The colors are adjusted to visually separate the annotation and fallback text from the base text.
Key Points:
- Purpose: The
<ruby>tag is used to provide ruby annotations, which are explanatory or pronunciation text for East Asian characters. - Usage: It wraps around base text and annotations, improving readability and understanding of complex characters.
- CSS Styling: Can be customized with CSS to fit the design and layout of the webpage.
In summary, the <ruby> tag is a valuable HTML element for providing annotations or pronunciation guides for East Asian characters. By using <ruby> along with <rt> and optionally <rp>, you can enhance the clarity and accessibility of text in languages that use complex character sets.