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 set what browsers will show that do not support the ruby element?
The HTML <rp> tag specifies what browsers will show when they do not support the <ruby> element. Ruby annotations are used in East Asian typography to provide pronunciation guides or semantic information for characters, commonly seen in Japanese furigana and Chinese pinyin.
Syntax
Following is the syntax for the <rp> tag −
<ruby> base_text <rp>fallback_open</rp><rt>annotation</rt><rp>fallback_close</rp> </ruby>
The <rp> (ruby parentheses) element contains fallback text that displays in browsers without ruby support. Modern browsers that support ruby annotations hide the content inside <rp> tags, while older browsers display it as regular text.
How Ruby Annotations Work
Ruby annotations consist of three main elements −
<ruby> − The container element that groups the base text and its annotations.
<rt> − Contains the ruby text (annotation) that appears above or beside the base text.
<rp> − Provides fallback content (usually parentheses) for browsers that don't support ruby.
Example
Following example demonstrates how to use the <rp> tag to provide fallback content for ruby annotations −
<!DOCTYPE html>
<html>
<head>
<title>HTML Ruby and RP Tags</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; font-size: 24px;">
<h2>Japanese Text with Furigana</h2>
<ruby>
? <rp>(</rp><rt>Kan</rt><rp>)</rp>
? <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
<p>In browsers with ruby support, you see pronunciation above characters.</p>
<p>In browsers without ruby support, you see: ?(Kan)?(ji)</p>
</body>
</html>
The output in ruby-supported browsers shows the pronunciation guides above the characters −
Japanese Text with Furigana ?? (with "Kan" above ? and "ji" above ?) In browsers with ruby support, you see pronunciation above characters. In browsers without ruby support, you see: ?(Kan)?(ji)
Chinese Pinyin Example
Following example shows ruby annotations used for Chinese characters with pinyin pronunciation −
<!DOCTYPE html>
<html>
<head>
<title>Chinese Ruby Annotations</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; font-size: 22px;">
<h2>Chinese Characters with Pinyin</h2>
<ruby>
? <rp>(</rp><rt>b?i</rt><rp>)</rp>
? <rp>(</rp><rt>j?ng</rt><rp>)</rp>
</ruby>
<p>This represents "Beijing" - the capital of China.</p>
</body>
</html>
In supported browsers, pinyin appears above the characters. In unsupported browsers, it displays as ?(b?i)?(j?ng).
Browser Compatibility
The <ruby>, <rt>, and <rp> elements are supported in modern browsers including Chrome, Firefox, Safari, and Edge. Internet Explorer 5.5+ also supports ruby annotations. The <rp> element ensures graceful degradation in older browsers that lack ruby support.
Common Use Cases
Ruby annotations with <rp> fallback are commonly used for −
Japanese furigana − Providing hiragana pronunciation for kanji characters
Chinese pinyin − Adding romanized pronunciation to Chinese characters
Korean hanja − Showing pronunciation or meaning for Chinese characters used in Korean
Educational content − Teaching pronunciation of foreign scripts
Conclusion
The <rp> tag ensures that ruby annotations degrade gracefully in browsers without ruby support by providing fallback parentheses or brackets around pronunciation text. This makes East Asian typography accessible across all browsers while maintaining semantic meaning for screen readers and search engines.
190 Views
