Ruby Tag in HTML5

In this article i am going to describe how to implement and use ruby tag in HTML5.
  • 1698

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>&lt;Ruby&gt;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

ruby.jpg

© 2020 DotNetHeaven. All rights reserved.