Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to display ruby annotation in HTML5?
Ruby annotations in HTML5 provide a way to display small text above, below, or alongside base text, primarily used for pronunciation guides in East Asian languages. The ruby element works together with rt (ruby text) and rp (ruby parentheses) elements to create readable annotations.
Syntax
Following is the basic syntax for ruby annotations −
<ruby> base text <rt>annotation text</rt> </ruby>
With fallback parentheses for unsupported browsers −
<ruby> base text <rp>(</rp><rt>annotation text</rt><rp>)</rp> </ruby>
Ruby Elements
The ruby annotation system consists of three main elements −
<ruby> − The container element that wraps the base text and its annotations.
<rt> − Contains the ruby text (annotation) that appears above or beside the base text.
<rp> − Provides fallback parentheses for browsers that don't support ruby annotations.
Basic Ruby Annotation
Example
Following example demonstrates a simple ruby annotation for pronunciation −
<!DOCTYPE html>
<html>
<head>
<title>Basic Ruby Annotation</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
font-size: 24px;
}
rt {
font-size: 12px;
color: #666;
}
</style>
</head>
<body>
<h2>Japanese Word with Pronunciation</h2>
<ruby>
?? <rt>?????</rt>
</ruby>
<p>(Tokyo in Japanese with hiragana pronunciation)</p>
</body>
</html>
The output displays the Japanese characters with small pronunciation text above −
Japanese Word with Pronunciation ?? ????? (Tokyo in Japanese with hiragana pronunciation)
Ruby with Fallback Parentheses
Example
Using the <rp> element provides graceful fallback for browsers that don't support ruby annotations −
<!DOCTYPE html>
<html>
<head>
<title>Ruby with Fallback</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
font-size: 20px;
}
rt {
font-size: 12px;
color: #e74c3c;
}
</style>
</head>
<body>
<h2>Telugu Language with English Translation</h2>
<ruby>
???????? <rp>(</rp><rt>Namaskaram</rt><rp>)</rp>
</ruby>
<br><br>
<ruby>
?????????? <rp>(</rp><rt>Dhanyavaadaalu</rt><rp>)</rp>
</ruby>
</body>
</html>
In supported browsers, the annotations appear above the text. In unsupported browsers, parentheses display around the annotations −
Telugu Language with English Translation ???????? Namaskaram ?????????? Dhanyavaadaalu
Multiple Ruby Annotations
Example
Following example shows how to create multiple ruby annotations in a single sentence −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Ruby Annotations</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
font-size: 18px;
}
rt {
font-size: 10px;
color: #3498db;
font-weight: bold;
}
.date-annotation {
margin: 20px 0;
}
</style>
</head>
<body>
<h2>Date with Annotations</h2>
<div class="date-annotation">
<ruby>
2024 <rp>(</rp><rt>Year</rt><rp>)</rp>
</ruby>
<ruby>
12 <rp>(</rp><rt>Month</rt><rp>)</rp>
</ruby>
<ruby>
25 <rp>(</rp><rt>Date</rt><rp>)</rp>
</ruby>
</div>
<p>Each number has its own annotation explaining its meaning.</p>
</body>
</html>
The output shows each number with its corresponding label above −
Date with Annotations Year Month Date 2024 12 25 Each number has its own annotation explaining its meaning.
Styling Ruby Annotations
Example
Ruby annotations can be customized with CSS for better visual presentation −
<!DOCTYPE html>
<html>
<head>
<title>Styled Ruby Annotations</title>
<style>
body {
font-family: 'Times New Roman', serif;
text-align: center;
padding: 30px;
background-color: #f8f9fa;
}
.chinese-text {
font-size: 36px;
color: #2c3e50;
margin: 20px 0;
}
.chinese-text rt {
font-size: 14px;
color: #e74c3c;
font-weight: normal;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h2>Chinese Characters with Pinyin</h2>
<div class="chinese-text">
<ruby>
? <rt>zh?ng</rt>
</ruby>
<ruby>
? <rt>guó</rt>
</ruby>
</div>
<p>(China in Chinese with Pinyin pronunciation)</p>
</body>
</html>
The styled output shows Chinese characters with pinyin pronunciation in a visually appealing format −
Chinese Characters with Pinyin zh?ng guó ? ? (China in Chinese with Pinyin pronunciation)
Browser Support
Ruby annotations are supported in modern browsers including Chrome, Firefox, Safari, and Edge. For older browsers or those without ruby support, the <rp> elements ensure that annotations appear in parentheses, maintaining readability.
| Element | Purpose | Required |
|---|---|---|
| <ruby> | Container for ruby annotation | Yes |
| <rt> | Contains the annotation text | Yes |
| <rp> | Fallback parentheses for unsupported browsers | Optional but recommended |
Conclusion
Ruby annotations in HTML5 provide an effective way to display pronunciation guides, translations, or explanatory text alongside base content. The combination of <ruby>, <rt>, and <rp> elements ensures both modern functionality and backward compatibility, making them ideal for multilingual content and educational materials.
733 Views
