CSS3: ruby-span プロパティ - ルビ注釈がどこまでまたがるかの指定

■ 概要

項  目説  明
記述形式 セレクタ {ruby-span: }
値 の形式 none | attr(ルビ本体の要素数を表す変数名( 文字列 ))
初 期 値 before
対応ブラウザー C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 display:ruby-text となっている要素
継  承 しない

■ 解説

ruby-spanプロパティ は,ルビ注釈がどこまでまたがるかを指定 します。

指定できる値の形式は,以下のとおりです。

説  明
none ルビのテキストの切り分けは行いません。
要素数は1。 (初期値)
attr( 文字列 ) 文字列で指定した変数の値を要素の数とします。
この値が 0 の場合は 1 に置き換えられます。

■ 使用例( ruby-span プロパティの利用)

以下の例は W3C のウェブサイトから引用したものです。 displayプロパティ の値が ruby構造と ruby-spanプロパティに関連付けられた XML での使用例です。

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!-- 
   myruby { display: ruby-base; }
   myrbc { display: ruby-base-container; }
   myrb { display: ruby-base; }
   myrtc.before { display: ruby-text-container; ruby-position: before}
   myrtc.after { display: ruby-text-container; ruby-position: after}
   myrt { display: ruby-text; ruby-span: attr(rbspan); }
-->
</style>
XML
<myruby>
 <myrbc>
  <myrb>10</myrb>
  <myrb>31</myrb>
  <myrb>2002</myrb>
 </myrbc>
 <myrtc class="before">
  <myrt>Month</myrt>
  <myrt>Day</myrt>
  <myrt>Year</myrt>
 </myrtc>
 <myrtc class="after">
  <myrt rbspan="3">Expiration Date</myrt>
 </myrtc>
</myruby>

■ 備考

【参考ページ】