<ruby>

  • Revision slug: Web/HTML/Element/ruby
  • Revision title: <ruby>
  • Revision id: 447413
  • Created:
  • Creator: alispivak
  • Is current revision? No
  • Comment

Revision Content

Summary

The HTML <ruby> Element represents a ruby annotation. Ruby annotations are for showing pronounciation of East Asian characters.

Attributes

This element only includes the global attributes.

Examples

Example 1: Character

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

Example 2: Word

<ruby>
  明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-ruby-element', '<ruby>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '<ruby>')}} {{Spec2('HTML5 W3C')}}  

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5.0 {{CompatNo}} 5.0 {{CompatNo}} 5.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatNo}} {{CompatVersionUnknown}} {{CompatNo}} {{CompatVersionUnknown}}

See also

  • {{HTMLElement("rt")}}
  • {{HTMLElement("rp")}}

{{ HTML:Element_Navigation() }}

Revision Source

<h2 id="Summary" name="Summary">Summary</h2>
<p>The <strong>HTML <code>&lt;ruby&gt;</code> Element</strong> represents a ruby annotation. Ruby annotations are for showing pronounciation of East Asian characters.</p>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</li>
  <li><dfn>Permitted content</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li>
  <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
  <li><dfn>Permitted parent elements</dfn> See prose</li>
  <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li>
</ul>
<h2 id="Attributes" name="Attributes">Attributes</h2>
<p>This element only includes the <a href="/en-US/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>.</p>
<h2 id="Examples" name="Examples">Examples</h2>
<h3 id="Example_1.3A_Character">Example 1: Character</h3>
<pre class="brush:html">
&lt;ruby&gt;
  漢 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Kan&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
  字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ji&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
&lt;/ruby&gt;</pre>
<h3 id="Example_2.3A_Word">Example 2: Word</h3>
<pre class="brush:html">
&lt;ruby&gt;
  明日 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Ashita&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
&lt;/ruby&gt;</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-ruby-element', '&lt;ruby&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '&lt;ruby&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>5.0</td>
        <td>{{CompatNo}}</td>
        <td>5.0</td>
        <td>{{CompatNo}}</td>
        <td>5.0</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>{{HTMLElement("rt")}}</li>
  <li>{{HTMLElement("rp")}}</li>
</ul>
<p>{{ HTML:Element_Navigation() }}</p>
Revert to this revision