HTML Ruby Tag

HTML Ruby TagHTML Ruby tag <ruby> is used to classify Ruby annotations which are used to illustrate East Asian typography.

HTML Ruby tag <ruby> characters are small (in display) and can be placed above or to the right side of the Chinese or Japanese characters.

HTML Ruby tag characters display the pronunciation of the Chinese or Japanese characters.

HTML Ruby tag is used with the HTML Rt Tag and HTML Rp Tag.

The HTML Ruby tag defines the Chinese or Japanese Characters which needs to be helped in pronunciation and the HTML Rt Tag shows the required pronunciation.

The HTML Rp Tag defines what will be rendered on the browser if the browser does not support HTML Ruby Tag.

HTML 5 Ruby tag is a closed tag and needs HTML 5 Ruby closing tag </ruby>

Note: Ruby Tag is new in HTML 5.


Syntax of HTML Ruby Tag

<ruby>
Some Chinese or Japanese Text Here ..
</ruby>

Example of HTML Ruby Tag

HTML Ruby Tag Code Output
[sourcecode language=”html”]
<ruby>中国
<rt> Zhōngguó </rt>
食品<rt>shípǐn</rt>
</ruby>
[/sourcecode]
中国
Zhōngguó
食品shípǐn

In the HTML 5 Ruby Tag example above, we have taken the example of “Chinese Food” which will be pronounced as “Zhōngguó shípǐn”. Note that the actual pronunciation is being displayed on top of the Chinese characters.

Also note the usage of HTML Rt Tag <rt> for providing the pronunciation.

HTML Ruby Tag supports all HTML Global Attributes and HTML Event Attributes.


HTML Ruby Tag Supporting Browsers

S. No. Browser Supported(Yes/No)
1 Internet Explorer Yes (From IE 9 Onwards)
2 Firefox Yes
3 Google Chrome Yes
4 Opera Yes
5 Safari Yes

Leave a Reply

Your email address will not be published. Required fields are marked *