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.



<rb>ruby base</rb>


<rt>ruby text</rt>



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="">


    <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;






        Ruby example 1:

        <ruby id="example1">



            <rt>World Wide Web</rt>






        Ruby example 2:

        <ruby id="example2">



            <rt>Hyper Text Markup Language</rt>








© 2020 DotNetHeaven. All rights reserved.