<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>&#xff99;<rp> (</rp><rt>ru</rt><rp>) </rp>&#x30d3;<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&#x014d;&#x014d;'</rt>by<rt>b&#x113;</rt></ruby>
</div>
rurōō'bybē

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.