|
If you find this helpful, please click the Google |
Button
The <rt> Tag in HTML 5
The <rt> tag is used to provide supplemental text for the base text inside a ruby element. It is one of the formatting tags in HTML 5. The supplemental text is used to provide an aid to reading the base text, such as:
- the pronunciation of the base text
- syllabic characters, used primarily in East Asian languages, such as the hiragana form of katakana text, called furigana in Japanese
- an alternate form of the base text, such as the romanji form of katakana text
It is also possible to use the image (<img>) tag to include images in either the base text or ruby annotations.
This is an actual working example of the <rt> tag example code below, showing how the code looks in your browser. In a WebKit browser, such as Safari or Chrome, it looks like this:
In a browser that does not support the ruby element, the ruby text will be displayed with the <rp> ruby parenthesis like this:
<rt> Tag Syntax
Rules for coding HTML rt elements
<body> ... ... phrasing content expected ... <ruby>... phrasing content ... <rp> (</rp><rt>... phrasing content ...</rt><rp>) </rp> ... </ruby> ... </body>
Rules for coding HTML rt elements
Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.
- Inside a ruby element, code an rt element following the phrasing content for the base text that is to be annotated.
- Optionally include an rp element for the opening ruby parenthesis before the rt element.
- Begin the rt element with a starting <rt> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the
xmlnsattribute on the <html> tag. - Include any HTML global attributes on the <rt> tag as appropriate.
- Inside the rt element, between the starting
<rt>tag and the ending</rt>tag, code the inner HTML phrasing content with the text for the annotation of the base text. - End the rt element with a matching
</rt>closing tag. - If an rp element was coded before the rt element, code another rp element for the closing ruby parenthesis after the ending </rt> tag.
Content Model
Content of the rt element
The content of the rt element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.
<rt> Tag Attributes
Attributes of the <rt> tag
| global attributes | The only attributes that can be coded on the <span> tag are the common HTML attributes. |
<rt> Tag Examples
Examples of the rt tag in HTML 5
Example of ruby text using the HTML <rt> tag
(see <rt> tag demo above)
<ruby>ﾙ<rp> (</rp><rt>ru</rt><rp>) </rp>ビ<rp> (</rp><rt>bi</rt><rp>) </rp></ruby>
The space adjacent to the parenthesis inside each rp element separates the parenthesized romanji text from the katakana character when the ruby parentheses are displayed in browsers that do not support the rt and ruby elements.
Example of ruby text showing pronunciation
<div>
<style scoped="scoped">
#example2 rt {
font-size: 60%
}
</style>
<ruby id="example2">ru<rt>rōō'</rt>by<rt>bē</rt></ruby>
</div>
In this case, the ruby parentheses are omitted because it would be preferred that the "ru" and the "by" not be separated. Unfortunately, browsers that do not support the <rt> tag are more likely to display the text inside the rt element rather than suppress it, making it all run together like this: rurōō'bybē. Adding a style with font-size: 60% mitigates this issue while not affecting WebKit browsers, since that is their default font size for ruby text.
Changes in HTML 5 - <rt> Tag
What's new in HTML 5
The <rt> tag is one of the new elements in HTML 5.
Differences between HTML 5 and earlier versions of HTML
The <rt> tag did not exist in older versions of HTML.
The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the names of all HTML element types, which now includes the rt element name. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.