HTML5 Ruby Tag | HTML 5 Ruby Tag Element CSS

HTML tutorials

How to use Ruby Tag in HTML

HTML tutorials

The support for ruby tag is limited in browsers. The IE8 and earlier browsers do not support ruby tag. The <ruby> tag is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.

Why we use <ruby> tag in HTML?

Ruby characters are annotations marks that are used to show the pronunciations in some East Asian languages like Chinese and Japanese etc. look at the code below to understand more.

HTML code example:


<!DOCTYPE html>

<html lang=’en’>

<head>

<meta charset=”UTF-8″ />

<title>

Asian Text <ruby> tag

</title>

</head>

<body>

 

<h2>

Asian Text <ruby> tag

</h2>

 

<p>

In this example, each ideograph in the Japanese text is annotated

with its reading in hiragana.

</p>

 

<p lang=”ja” style=”font-size: 150%”>

<!–

<ruby>

漢 <rp>(</rp><rt>かん</rt><rp>)</rp>

字 <rp>(</rp><rt>じ</rt><rp>)</rp>

</ruby>

–>

<ruby>

漢 <rp>(</rp><rt>かん</rt><rp>)</rp>

字 <rp>(</rp><rt>じ</rt><rp>)</rp>

</ruby>

</p>

</body>

</html>
Output:

Asian Text tag

In this example, each ideograph in the Japanese text is annotated with its reading in hiragana.

漢字(かんじ)

The above code is used to display the annotated Japanese text. The output is got from Google Chrome which supports the ruby tag it may be different in other browsers. We have used the Unicode and named entities as well if your browser does not support the Unicode you can uncomment the named entity part and it will work properly. We have used <rp> and <rt> tags in the <ruby> tag as well. The <tr> tag is posses the annotation itself and the <rp> tag contains the text that is displayed when the browser does not support . In Firefox you will get different output of the above code. Because it does not support ruby the text will be in parenthesis which we are using in the html code.

See more HTML tutorials here and enjoy coding.

Comments