Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
525 Views
