Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
rp
Provides fallback parentheses for browsers that do not support ruby annotations.
Description
The <rp> element provides fallback text — typically parentheses — for browsers that do not support ruby annotations. In browsers that support ruby, the content of <rp> is hidden via display: none. In non-supporting environments, it displays, wrapping the annotation in parentheses.
Always include <rp> as a best practice to ensure graceful degradation.
When to Use
Examples
Basic rp usage
<ruby> 漢字 <rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>Multiple annotations
<ruby> 東 <rp>(</rp><rt>とう</rt><rp>)</rp> 京 <rp>(</rp><rt>きょう</rt><rp>)</rp></ruby>Why Use rp?
Without <rp>, non-supporting browsers concatenate the annotation directly with the base text, making it unreadable:
With vs without rp
<!-- Without rp — no fallback --><ruby>漢字 <rt>かんじ</rt></ruby><!-- Renders as: 漢字かんじ (confusing!) --> <!-- With rp — proper fallback --><ruby>漢字 <rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby><!-- Renders as: 漢字(かんじ) (clear!) -->Alternative Characters
Any characters can be used instead of parentheses:
Brackets instead of parentheses
<ruby> 日本 <rp>[</rp><rt>にほん</rt><rp>]</rp></ruby>CSS
rp CSS
rp { display: none; /* hidden in supporting browsers */}VB hides <rp> via the browser default. The content is only visible in browsers without ruby support.
Accessibility
In supporting browsers, <rp> content is typically hidden from screen readers. In non-supporting environments, the parentheses help clarify that the enclosed text is an annotation.
Related
<ruby>— Parent element for ruby annotations<rt>— The ruby text (annotation content)- Internationalization guide — Ruby visibility control and script-specific typography