Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display ruby annotation in HTML5?
Annotations are external remarks that can be added to a Web document or to a specific section of a document. They can be comments, notes, explanations, or other types of remarks. Since they are external, any Web document can be independently annotated without needing to change the actual document.
Let’s jump into the article to learn about the ruby annotation in HTML5.
Ruby annotation in HTML5
The HTML element <ruby>symbolizes brief comments that are displayed above, below, or next to the main text and are typically used to demonstrate how to pronounce East Asian characters. Other types of text can also be annotated with it, though this application is less popular.
In order to produce annotations or pronunciation instructions for words and phrases, the <ruby> element is combined with the <rt> element. The annotation, enclosed in a <rt> tag, will show as smaller text above the base text, which should be enclosed in a <ruby> tag.
For browsers that do not support this style, parentheses can be wrapped around the ruby content to indicate the existence of a ruby annotation using the optional <rp> element. The history of this tag's versions and usage context are listed in the table below.
Syntax
Following is the syntax for <ruby>
<ruby attributes> Contents... </ruby>
Let’s look into the following examples to know more about how to display ruby annotation in HTML5.
Example
Considering the following where <ruby> tag shows action.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
rt{ font-size: 10px;
color: red;
}
</style>
</head>
<body>
<p>Telugu Language Annotation</p>
<ruby>
పెద్ద అన్నయ్య<rt>Big Brother</rt>
</ruby>
<p>Normal Annotation Representation</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>
Output
When the script gets executed, it will generate an output consisting of a text which is of Asian language annotation and normal annotation representation used with the <ruby> tag displayed on the webpage.
Example
Let’s consider the another example of the usage of <ruby> tag.
<!DOCTYPE html>
<html>
<head>
<title>ruby tag</title>
</head>
<body>
<ruby>
వర్మ <rp>(</rp><rt>Varma</rt><rp>)</rp>
</ruby>
</body>
</html>
Output
On running the above script, it will generate an output consisting of a text used in the above script mentioned with <ruby> tag on the webpage.
Example
You can try to run the following code to display text ruby annotation −
<!DOCTYPE html>
<html>
<head>
<title>HTML Rt Tag</title>
</head>
<body>
<ruby>
అసతోమా <rp>(</rp><rt>Asatooma</rt><rp>)</rp>
సద్గమయ <rp>(</rp><rt>Sadgamaya</rt><rp>)</rp>
</ruby>
</body>
</html>
Output
When the script gets executed, it will generate an output consisting of a test used in the above script mentioned with a <ruby> tag on the webpage.
145 Views
