|
If you find this helpful, please click the Google |
Button
The <ruby> Tag in HTML 5
The <ruby> tag is used to mark up base text which is to be annotated with supplemental text. 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 <ruby> 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 <rt> ruby text will be displayed with the <rp> ruby parenthesis like this:
Alternatives to the <ruby> Tag
Instead of the <ruby> tag, there are a number of other approaches to annotate content in different written languages:
- Annotate with plain old text content:
- 日本語: ブックマーク 同期 English: Bookmark now
- If it is an <a href> link, just add the title attribute (hover the mouse over the link to see the popup text):
- 続きを読む
- Add a span element with a title attribute and a style to indicate popup help is available:
- 朝飯前
<ruby> Tag Syntax
Rules for coding HTML ruby elements
<body> ... ... phrasing content expected ... <ruby>... phrasing content ... <rp> (</rp><rt>... phrasing content ...</rt><rp>) </rp> ... </ruby> ... </body>
Rules for coding HTML ruby elements
Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.
- Code the ruby element for ruby annotated text where phrasing content is expected.
- Begin the ruby element with a starting <ruby> 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 <ruby> tag as appropriate.
- Inside the ruby element, between the starting
<ruby>tag and the ending</ruby>tag, code the inner HTML phrasing content as appropriate, along with any rt elements optionally bracketed with rp elements. - End the ruby element with a matching
</ruby>closing tag.
Content Model
Content of the ruby element
The content of the ruby element can include HTML comments, text content and groups of HTML tags that can be used in phrasing content, with each group followed by either a single rt element or a sequence of an rp element, an rt element and another rp element.
<ruby> Tag Attributes
Attributes of the <ruby> tag
| global attributes | The only attributes that can be coded on the <span> tag are the common HTML attributes. |
<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>
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>
Changes in HTML 5 - <ruby> Tag
What's new in HTML 5
The <ruby> tag is one of the new elements in HTML 5.
Differences between HTML 5 and earlier versions of HTML
The <ruby> 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 ruby element name. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.