1. UpStack Blog
  2. Software Development

Ruby Tags In HTML

Ruby Tags In HTML
  1. UpStack Blog
  2. Software Development

Ruby Tags In HTML

Emmanuel Ighosewe
Author
Emmanuel Ighosewe

The HTML <ruby> tag offers a way of representing ruby annotations on a website page. Ruby annotations are handy when showing the pronunciation of East Asian characters such as Chinese and Japanese-Chinese.

The <ruby> tag contains one or more <rt> elements that help in pronouncing ruby annotations and appears above the annotation icons. In addition, there might be an <rp> (optional) element used as a backup parenthesis for a browser that does not work with the ruby annotation.

An HTML <ruby> tag can also be used to indicate a small annotation related to the main topic, other than the East Asian language.

The <ruby> tag is newly introduced in HTML5

Syntax

<ruby>......</ruby>

Below are some of the specifications relating to the HTML <ruby> tag

  • Display – Inline
  • Start tag/End tag – Both Start and End tag
  • Usage – formatting

Using <ruby>

As defined in the HTML specification, there are several Ruby elements. The following table shows what each of these elements does.

  • <ruby> Creates a relationship between the base text and the Ruby text. Also stands as the container for all Ruby elements with an association.
  • <rbc> This means Ruby base container element. It contains rb elements when using complex ruby in HTML use-case. A single rbc element should show in a Ruby element.
  • <rb> This is the element of ruby base and a mark-up for base text. More than one rb element can appear in an rbc element. There is a corresponding rt element for each rb element.
  • <rtc> Ruby text container element. Used for containing rt elements in complicated Ruby markup use-case. The ruby element can contain up to 2 rtc elements.
  • <rt> Ruby text elements. Used as a markup for Ruby text. They can be in-line items; however, ruby elements cannot be their children. It has the rbspan attribute to mark the complex ruby, which makes the rt element contain some rb elements.
  • <rp> meaning ruby parenthesis element and an alternative to user agents that do not support Ruby distinguishing between Ruby text and base text.

Styling <ruby> elements

In Ruby, there are three formatting properties; namely, ruby position, ruby merge, and ruby align.

ruby-position

This property is only applicable to containers with <rtc> and <rbc> elements and controls the Ruby text position relative to its base.

  • Over - Provides ruby text over the base and right of the base for Horizontal text and vertical text respectively. This is the default.
  • Under - Provides ruby text under the base and left of the base for horizontal text and vertical text respectively
  • inter-character - Puts the Ruby text to the right of each horizontal text, however, this forces the Ruby text to show vertically.

ruby-merge

This property handles the way ruby boxes should be rendered when there is more than one ruby container close to each other. This attribute is practically not implemented in any browser as the only working value is a separate and the default value.

<ruby>無<rt>む</ruby><ruby>常<rt>じょう</ruby>



<ruby style="ruby-merge:separate"><rb>無<rb>常<rt>む<rt>じょう</ruby>

The two code examples above are not different from each other. They both have the annotation box in the same column, and the corresponding base field is in the same column. This style is known as "mono-ruby."

In addition, there is a collapse value concatenating all the annotation boxes on the same line and in the same segment. The combined comment field includes its respective base boxes.

<ruby>無常<rt>むじょう</ruby>



<ruby style="ruby-merge:collapse"><rb>無<rb>常<rt>む<rt>じょう</ruby>

The codes below are not also different from each other. The annotation boxes are present in the same column with their respective base box. This style is known as group ruby

The default value confers the rendering style to the user based on the length of the annotation box relative to the base box.

ruby-align

This property determines the distribution of the ruby boxes unless their contents directly fill the respective boxes.

  • Start – This aligns ruby content with the beginning of its box
  • Center – This centralized content of ruby in its box
  • Space – Evenly distributes ruby content in its box around its edge.
  • Space-around -  Evenly distributes ruby content in its box, but it doesn’t fill the space up end to end.

Example

<!DOCTYPE html>



<html>



<head>



<title>HTML ruby tag</title>



<style>



body{



text-align: center;



}



rt{ font-size: 10px;



color: green;



}



</style>



</head>



<body>



<h1>Example of ruby tag</h1>



<p>East Asian Langugae Annotation</p>



<ruby>



大哥<rt>Big Brother</rt>



</ruby>



<p>Noraml Annotaion Representation of Expiry date</p>



<ruby>



2022<rp>(</rp><rt>Year</rt><rp>)</rp>



12<rp>(</rp><rt> Month</rt><rp>)</rp>



06<rp>(</rp><rt>Date</rt><rp>)</rp>



</ruby>



</body>



</html>

HTML <ruby> Tag Attributes

There are no specific attributes for this element; however, it does support Global and Event attributes.

Browsers Supporting HTML <ruby> Tag

Below are some of the browsers that support this attribute:

  • Google Chrome 5+
  • Internet Explorer 5.5+
  • Safari 5+
  • Opera 15+

HTML RT Tag

In HTML, the meaning of the <rt> tag is ruby text.

The ruby text is essential in Ruby Annotation.

The text shows that utilizing the <rt> tag gives pronunciation and translation to East Asian typography.

The <rt> has constant usage in the <ruby> tag

HTML <rt> Tag Syntax and Usage

The <rt> tag needs the opening tag and closing tag. Below is the syntax of the <rt> tag:

<ruby>



<rt>



Upstack



</rt>



</ruby>



Basic Example of <rt>



<!doctype html>



<head>



<style>



ruby {



font-size: 2em;



}



</style>



</head>



<body>



<h1> rt tag example</h1>



<ruby>



? <rp>(</rp><rt>kan</rt><rp>)</rp>



? <rp>(</rp><rt>ji</rt><rp>)</rp>



</ruby>



</body>



</html>

HTML RP Tag

In HTML, is utilized as an alternative parenthesis for browsers not compatible with the <ruby> tag.

Some browsers are not compatible with the <ruby> tag. Therefore, to display the enclosed text using the <ruby> tag in those browsers requires using the <rp> in HTML5.

The <ruby> tag is a parent to the <rt> tag.

HTML <rp> Tag Syntax and Usage

The <rp> needs both the opening and closing tag. Following is the syntax for the tag.

<ruby>



<rp>



upstack



</rp>



</ruby>

HTML <rp> Tag Basic Example

Following are some examples of <rp> tag and it's always a child tag to <ruby> tag.

<ruby>



? <rp>(</rp><rt>Kan</rt><rp>)</rp>



? <rp>(</rp><rt>ji</rt><rp>)</rp>



</ruby>




We are growth pros. CONTACT US so we can help you scale your team with top 1% talent worldwide!