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.
Table of contents
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.
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 is on the table.
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.