Editing Ruby character (section)

=== Markup examples ===
Below are a few examples of ruby markup. The markup is shown first, and the rendered markup is shown next, followed by the unmarked version. Web browsers either render it with the correct size and positioning as shown in the table-based examples above, or use the fallback rendering with the ruby characters in parentheses:

{| class="wikitable"
|-
! || colspan="2" | XHTML || CSS level 2<ref name="css2_ruby" />
|-
! scope="row" | Markup
| <syntaxhighlight lang="html">
<ruby> 
東京 <rp>(</rp> <rt>とうきょう</rt><rp>)</rp>
</ruby>

</syntaxhighlight>
| <syntaxhighlight lang="html">
<ruby>
北 <rp>(</rp><rt>ㄅㄟˇ</rt><rp>)</rp>
京 <rp>(</rp><rt>ㄐㄧㄥ</rt><rp>)</rp>
</ruby>
</syntaxhighlight>
| <syntaxhighlight lang="html">
<ruby>
<rbc><rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb><rp>(</rp></rbc>
<rtc><rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt><rp>)</rp></rtc>
</ruby>
</syntaxhighlight>
|- style="height:70px"
! scope="row" | Rendered
| <ruby style="font-size:2em;" lang="ja">
<rb>東京</rb><rp>(</rp>
<rt>とうきょう</rt><rp>)</rp>
</ruby>
| <ruby style="font-size:2em;" lang="zh-Hant">
<rb>北</rb><rp>(</rp><rt>ㄅㄟˇ</rt><rp>)</rp>
<rb>京</rb><rp>(</rp><rt>ㄐㄧㄥ</rt><rp>)</rp>
</ruby>
| <ruby style="font-size:2em;" lang="ja">
<rb>振</rb><rp>(</rp><rt>ふ</rt><rp>)</rp>り</ruby><ruby style="font-size:2em;" lang="ja"><rb>仮</rb><rp>(</rp><rt>が</rt><rp>)</rp><rb>名</rb><rp>(</rp><rt>な</rt><rp>)</rp>
</ruby><br />
<small>By default, the code above will come to the effect below. To achieve this effect, you may need further CSS styling.</small>
|- style="height:70px"
! scope="row" | Unmarked
| style="font-size:1.2em" lang="ja"      | 東京(とうきょう)
| style="font-size:1.2em" lang="zh-Hant" | 北(ㄅㄟˇ)京(ㄐㄧㄥ)
| style="font-size:1.2em" lang="ja"      | 振り仮名(ふりがな)
|}

Note that Chinese ruby text would normally be displayed in vertical columns to the right of each character. This approach is not typically supported in browsers at present.

This is a table-based example of vertical columns:
{|
|style="line-height:1em; font-size:2em; vertical-align:middle" |{{lang|zh-Hant|瓶}} || style="line-height:1em; font-size:0.8em; vertical-align:middle" | {{lang|zh-tw|ㄆ<br />ㄧ<br />ㄥˊ}}
|-
|style="line-height:1em; font-size:2em; vertical-align:middle" | {{lang|zh-Hant|子}} || style="line-height:1em; font-size:0.8em; vertical-align:middle" | {{lang|zh-tw|˙<br />ㄗ}}
|}