Home >Web >HTML reference – elements and attributes >ruby – pronunciation above text

ruby – pronunciation above text

<ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>

An annotation above or next to text – mainly the pronunciation of Japanese and Chinese characters (furigana, pinyin), but also a translation or an abbreviation above a word. The annotation is written in rt right after the text it belongs to. rp contains brackets for browsers that do not support ruby.

Default display: display: ruby
End tag: required (can be omitted for rt and rp)
Content: phrasing content and pairs of text + rt, optionally with rp
Where it can be used: anywhere phrasing content is allowed
DOM interface: HTMLElement

Attributes

Only global attributes. Inside: rt (the annotation, in a smaller font above the text) and rp (fallback brackets that a browser with ruby support hides).

Examples

The pronunciation of a Japanese word and an English word with its French translation above it:

<p lang="ja"><ruby>漢<rp>(</rp><rt>kan</rt><rp>)</rp>字<rp>(</rp><rt>ji</rt><rp>)</rp></ruby></p>
<p><ruby>bread<rp>(</rp><rt lang="fr">pain</rt><rp>)</rp></ruby></p>

result

漢(kan)字(ji)

bread(pain)

Things to watch out for

The annotation increases the line height – in dense text with many annotations this may look uneven.
The position of the annotation (above, below the text) is changed by the CSS property ruby-position.
The rb and rtc elements are obsolete, rt and rp are enough.

Browser support

Baseline – widely available: works in all major browsers and has for a long time (since 2015 at the latest). Since version: Chrome 5, Firefox 38, Safari 5. As of October 2026 (MDN browser-compat-data).