Open navigation menu

Ruby Text Annotations

Uses ruby, rt, and rp elements to add pronunciation guides and annotations above East Asian characters, with fallback support.

HtmlForm Validation

Code

snippet
<p>
  <ruby>
    &#x6F22;<rt>kan</rt>
    &#x5B57;<rt>ji</rt>
  </ruby>
  means Chinese characters in Japanese.
</p>

<p>
  <ruby>
    &#x6771;<rt>tokyo</rt>
    &#x4EAC;<rt>kyoto</rt>
  </ruby>
  are two major cities in Japan.
</p>

<p>
  <ruby>
    &#x9999;<rt>xi&#x101;ng</rt>
  </ruby>
  means fragrance in Chinese.
</p>

<p>
  <ruby>
    &#x97D3;<rt>han</rt>
    &#x570B;<rt>guk</rt>
  </ruby>
  means Korea in Korean.
</p>

<p>
  <ruby>
    &#x6587;<rt><rp>(</rp>wén<rp>)</rp></rt>
    &#x5B57;<rt><rp>(</rp>zì<rp>)</rp></rt>
  </ruby>
  with fallback parentheses.
</p>

<style>
  ruby {
    ruby-position: over;
    font-size: 1.5em;
  }
  rt {
    font-size: 0.5em;
    color: #666;
    font-weight: normal;
  }
  ruby {
    margin: 0 0.2em;
  }
</style>

Related Examples