The <ruby> HTML element is used to annotate text with pronunciation or additional information, typically used for East Asian languages that include phonetic annotations known as “ruby text.” Ruby text provides pronunciation or translation guidance for characters or words that may be unfamiliar to the reader.
Here’s an example of how to use the <ruby> element:
<ruby>
漢<rp>(</rp><rt>かん</rt><rp>)</rp> 字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
In this example, the characters “漢” and “字” are wrapped within the <ruby> element. The <rt> element is used to provide the phonetic pronunciation of each character. The <rp> elements are used to provide fallback parentheses or punctuation marks for older browsers that do not support ruby text.
The ruby text will be displayed alongside the base text, typically above or beside it, depending on the writing mode of the language. The pronunciation guide provided by the <rt> element helps readers understand the pronunciation or meaning of the characters.
It’s important to note that the rendering of ruby text can vary across different browsers and systems. CSS styles can be applied to the <ruby> element and its child elements to control the appearance of the ruby text, such as the font size, position, and alignment.
In summary, the <ruby> element is used to annotate text with pronunciation or translation guidance, particularly for East Asian languages. By combining the base text with the <rt> element inside the <ruby> element, you can provide phonetic annotations or additional information to aid readers in understanding the text.