rt element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The rt element provides a ruby annotation for all non-annotated text that preceeds it inside the ruby element where it's found. The rt element is usually accompanied by the rp element, which provides means to hide additional information used to improve the readability in non-supporting browsers. The contents of rp element are invisible in browsers supporting ruby annotations.

An rt element provides annotations for all characters at its left that doesn't already have annotations.

Browser support for ruby elements (ruby, rt and rp) isn't complete. Authors may have to rely on styling techniques (CSS) to make ruby annotations work crossbrowser.

Ruby annotations are usually rendered with a smaller font size and on top of the base text. For a better comprehension of how things work, in supporting and non-supporting browsers, we'll take a look at the following code and its approximate rendering in both cases. Parenthesis are provided inside the rp element to aid non-supporting browsers.

This is how the annotation should look in a supporting browser. Note how all the text inside rp elements is completely ignored.

<ruby>Base text<rp> (</rp><rt>Annotation</rt><rp>)</rp></ruby>

Annotation

Base text

Now, this is how non-supporting browsers display the text, ignoring all elements and just showing the information in a simple run of text.

<ruby>Base text<rp> (</rp><rt>Annotation</rt><rp>)</rp></ruby>

Base text (Annotation)

Note: remember that these are only emulations achieved with other supported elements and basic CSS styling.

Examples

The first example shows a basic gramatical analisis of a sentence. Inside each ruby element only one annotation is declared. Remember that rt elements provide annotations for the precedent charaters that aren't already annotated.

The rp element is used alongside rt to improve readability in non-supporting browsers.

<p>The <ruby>book<rp> (</rp><rt>Noun</rt><rp>)</rp></ruby> <ruby>is<rp> (</rp><rt>Verb</rt><rp>)</rp></ruby> on the <ruby>table<rp> (</rp><rt>Noun</rt><rp>)</rp></ruby>.</p>

The book (Noun) is (Verb) on the table (Noun).

The second example contains the word "Tokio" written in japanese. This time two annotations are present in one ruby element, both providing a phonetic aid with hiragana symbols for each character (kanji). This kind of annotation constitutes one of the most common uses for these elements.

<p><ruby><rp>(</rp><rt>とう</rt><rp>)</rp><rp>(</rp><rt>きょう</rt><rp>)</rp></ruby></p>

(とう)(きょう)

Attributes

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.