<ruby> Tag Examples
Examples of the ruby
tag in HTML 5
Example of ruby text using the HTML <rt> tag
(see <ruby> 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 ruby and rt 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>
ruby
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.
Alternatives to the <ruby> tag
- Annotate with plain old text content:
<p>日本語: ブックマーク 同期   English: Bookmark now</p>
- or, using HTML character codes:
<p>日本語: ブックマーク 同期   English: Bookmark now</p>
- If it is an <a href> link, just add the title attribute:
<a href="#read-more" title="read more">続きを読む</a>
- or, using HTML character codes:
<a href="#read-more" title="read more">続きを読む</a>
- Add a span element with a title attribute and a style to indicate popup help is available:
<div> <style scoped="scoped"> .has-popup { color: rgb(204, 51, 102); cursor: help; } </style> <span class="has-popup" title="あさめしまえ">朝飯前</span> <!-- or, using HTML character codes: --> <span class="has-popup" title="あさめしまえ">朝飯前</span> </div>