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.
rt
Specifies the ruby text (annotation) in a ruby annotation, providing pronunciation or other guidance above base text.
Description
The <rt> element specifies the ruby text — the small annotation that appears above (or beside) base text. It must be contained within a <ruby> element.
VB styles <rt> at 0.5em font size with centered alignment, and applies CJK script fonts when inside a CJK language context. The i18n system can control <rt> visibility via data-ruby on <html>.
When to Use
- Inside
<ruby>to provide pronunciation guides - Japanese furigana (hiragana readings for kanji)
- Chinese pinyin (romanized pronunciation)
- Pronunciation guides for words in any language
Examples
Basic rt
<ruby> 漢字 <rt>かんじ</rt></ruby>With fallback parentheses
<ruby> 東京 <rp>(</rp><rt>とうきょう</rt><rp>)</rp></ruby>Per-character annotations
<ruby> 漢 <rt>かん</rt> 字 <rt>じ</rt></ruby>Pinyin annotation
<ruby> 中文 <rt>zhōngwén</rt></ruby>CSS Reference
rt CSS
rt { font-size: 0.5em; line-height: 1; ruby-align: center;} /* CJK script font for ruby text */:lang(ja) rt, :lang(zh) rt, :lang(ko) rt { font-family: var(--font-cjk);}Visibility Control
The i18n system provides data-ruby on <html> to control when <rt> annotations display: show (always), hide (visually hidden but accessible), or auto (CJK languages only). See the ruby element page for details.
Accessibility
- Screen readers may read base text followed by ruby text, or offer options to hear annotations
- Ruby text is valuable for language learners and those with reading difficulties
- When
data-ruby="hide"is used,<rt>is visually hidden but remains in the DOM for screen readers
Related
<ruby>— Parent element for ruby annotations (required)<rp>— Fallback parentheses for non-supporting browsers- Internationalization guide — Ruby visibility control, script-specific typography