Ruby Tag in HTML5
In this article i am going to describe how to implement and use ruby tag in HTML5.
Ruby Tag
<ruby> tag is introduced in HTML5. The HTML <ruby>
tag is used for specifying Ruby annotations, which is used in East Asian typography.Use the <ruby> tag together with the <rt> and <rp> tags.
The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that not support ruby annotations.
Browser Support
<ruby> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome and Safari.
Note: Internet Explorer 8 and earlier versions do not support the <ruby> tag.
Syntax
<ruby>
<rb>ruby base</rb>
<rp>(</rp>
<rt>ruby text</rt>
<rp>)</rp>
</ruby>
Ruby Elements
Elements |
Explanation |
<ruby> - </ruby> |
Defines a ruby |
<rb> - </rb> |
ruby base (the base text) |
<rt> - </rt> |
ruby text (annotation or pronunciation of the base text) |
<rp> - </rp> |
ruby parenthesis |
Ruby Tag Properties
Property |
Value |
ruby-align |
auto,left,center,right,distribute-letter,distribute-space,line-edge |
ruby-overhang |
auto,whitespace,none |
ruby-position |
above,inline |
Note: The ruby-overhang property seems not to be supported by MSIE
Example of <ruby> tag in HTML5
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title><Ruby>Tag in HTML5</title>
<style type="text/css">
#example1 {
ruby-align: distribute-letter;
}
#example2 {
ruby-position: inline;
}
</style>
</head>
<body>
<p>
Ruby example 1:
<ruby id="example1">
<rb>WWW</rb>
<rp>(</rp>
<rt>World Wide Web</rt>
<rp>)</rp>
</ruby>
</p>
<br>
<p>
Ruby example 2:
<ruby id="example2">
<rb>HTML</rb>
<rp>(</rp>
<rt>Hyper Text Markup Language</rt>
<rp>)</rp>
</ruby>
</p>
</body>
</html>
Output