Editing Ruby character (section)

== HTML markup ==
{{anchor|HTML}}

In 2001, the W3C published the Ruby Annotation specification<ref name="w3c-spec" /> for supplementing [[XHTML]] with ruby markup. Ruby markup is incorporated into the XHTML 1.1 specification and in HTML5.<ref>{{cite web|title=W3C Ruby Markup Reference|url=https://www.w3.org/International/articles/ruby/markup.en.html}}</ref>

For browsers that do not support Ruby natively, Ruby support is most easily added by using [[CSS]] rules that are available on the web.<ref name="ruby_stylesheet_hack">[http://web.nickshanks.com/stylesheets/ruby.css CSS Ruby Support] {{webarchive|url=https://web.archive.org/web/20070228150240/http://web.nickshanks.com/stylesheets/ruby.css |date=2007-02-28 }}—Works in all modern browsers</ref>

Ruby markup is structured such that a fallback rendering, consisting of the ruby characters in parentheses immediately after the main text, appears if the browser does not support ruby.

The W3C is also working on a specific ruby module for [[Cascading Style Sheets|CSS]] level 2, which additionally allows the grouping of ruby and automatic omission of furigana matching their annotated part.<ref name="css2_ruby">{{cite web
|access-date = 2021-03-03|url = https://drafts.csswg.org/css-ruby/|title=CSS Ruby Annotation Layout Module Level 1}}</ref>

=== 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 />ㄗ}}
|}

=== Complex ruby markup ===
Complex ruby markup makes it possible to associate more than one ruby text with a base text, or parts of ruby text with parts of base text.<ref name="complex_ruby">[http://www.w3.org/TR/ruby/#complex Complex ruby markup]</ref>