ruby-alignプロパティは、ルビの揃え位置を指定する際に使用します。
指定できる値は、auto、start、left、center、end、right、distribute-letter、distribute-space、line-edgeのいずれかです。
■値
- auto
- ユーザーエージェントに依存（ユーザーエージェントには、distribute-space、または、centerでの表示が推奨されている）（初期値）
- start
- 本体テキストの始端に、ルビテキストを揃える
- left
- 本体テキストの左端に、ルビテキストを揃える（startと同じ）
- center
- ルビテキストは本体テキストの幅の中央に配置される。
もし、本体テキストがルビテキストより短い場合には、本体テキストがルビテキストの幅の中央に配置される - end
- 本体テキストの終端に、ルビテキストを揃える
- right
- 本体テキストの右端に、ルビテキストを揃える（endと同じ）
- distribute-letter
- ルビテキストが本体テキストよりも短い場合、ルビテキストの文字が本体テキストの幅に対して均等割付される。
ルビテキストが本体テキストよりも長い場合、本体テキストの文字がルビテキストの幅に対して均等割付される。この際、ルビテキストと本体テキストの両端は揃えられる - distribute-space
- ルビテキストが本体テキストよりも短い場合、
ルビテキストは本体テキストの幅に対して均等割付される。
この際、ルビテキストの前後には、いくらかのスペースが空けられる。
ルビテキストが本体テキストよりも長い場合、
本体テキストがルビテキストの幅に対して均等割付される。
この際、本体テキストの前後にいくらかのスペースが空けられる - line-edge
- ルビテキストが行端に隣接していない場合はautoと同じ。
ルビテキストが行端に隣接している場合もautoとほぼ同じだが、
行端に隣接している側のルビテキストの端が本体テキストの端に揃えられる。
この動作はルビテキストが本体よりも長い場合のみ有効となる。
ルビテキストが短ければautoと同じになる
■初期値・適用対象・値の継承
- 初期値
- auto
- 適用対象
- すべての要素、生成された内容
- 値の継承
- する
■使用例
CSSソースは外部ファイル（sample.css）に記述
ruby.sample1 {ruby-align:auto;}
ruby.sample2 {ruby-align:start;}
ruby.sample3 {ruby-align:left;}
ruby.sample4 {ruby-align:center;}
ruby.sample5 {ruby-align:end;}
ruby.sample6 {ruby-align:right;}
ruby.sample7 {ruby-align:distribute-letter;}
ruby.sample8 {ruby-align:distribute-space;}
ruby.sample9 {ruby-align:line-edge;}
ruby {background-color:pink;}
rt {background-color:yellow;}
HTMLソース
<html>
<head>
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p><ruby class=”sample1″>W杯<rt>ワールドカップ</rt></ruby>の<ruby class=”sample1″>スペイン<rt>西班牙</rt></ruby>×<ruby class=”sample1″>オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。（ruby-align:auto;）</p>
<p><ruby class=”sample2″>W杯<rt>ワールドカップ</rt></ruby>の<ruby class=”sample2″>スペイン<rt>西班牙</rt></ruby>×<ruby class=”sample2″>オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。（ruby-align:start;）</p>
<p><ruby class=”sample3″>W杯<rt>ワールドカップ</rt></ruby>の<ruby class=”sample3″>スペイン<rt>西班牙</rt></ruby>×<ruby class=”sample3″>オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。（ruby-align:left;）</p>
<p><ruby class=”sample4″>W杯<rt>ワールドカップ</rt></ruby>の<ruby class=”sample4″>スペイン<rt>西班牙</rt></ruby>×<ruby class=”sample4″>オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。（ruby-align:center;）</p>
<p><ruby class=”sample5″>W杯<rt>ワールドカップ</rt></ruby>の<ruby class=”sample5″>スペイン<rt>西班牙</rt></ruby>×<ruby class=”sample5″>オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。（ruby-align:end;）</p>
<p><ruby class=”sample6″>W杯<rt>ワールドカップ</rt></ruby>の<ruby class=”sample6″>スペイン<rt>西班牙</rt></ruby>×<ruby class=”sample6″>オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。（ruby-align:right;）</p>
<p><ruby class=”sample7″>W杯<rt>ワールドカップ</rt></ruby>の<ruby class=”sample7″>スペイン<rt>西班牙</rt></ruby>×<ruby class=”sample7″>オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。（ruby-align:distribute-letter;）</p>
<p><ruby class=”sample8″>W杯<rt>ワールドカップ</rt></ruby>の<ruby class=”sample8″>スペイン<rt>西班牙</rt></ruby>×<ruby class=”sample8″>オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。（ruby-align:distribute-space;）</p>
<p><ruby class=”sample9″>W杯<rt>ワールドカップ</rt></ruby>の<ruby class=”sample9″>スペイン<rt>西班牙</rt></ruby>×<ruby class=”sample9″>オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。（ruby-align:line-edge;）</p>
</body>
</html>
ブラウザ上の表示
W杯のスペイン×オランダ戦が楽しみだ。（ruby-align:auto;）
W杯のスペイン×オランダ戦が楽しみだ。（ruby-align:start;）
W杯のスペイン×オランダ戦が楽しみだ。（ruby-align:left;）
W杯のスペイン×オランダ戦が楽しみだ。（ruby-align:center;）
W杯のスペイン×オランダ戦が楽しみだ。（ruby-align:end;）
W杯のスペイン×オランダ戦が楽しみだ。（ruby-align:right;）
W杯のスペイン×オランダ戦が楽しみだ。（ruby-align:distribute-letter;）
W杯のスペイン×オランダ戦が楽しみだ。（ruby-align:distribute-space;）
W杯のスペイン×オランダ戦が楽しみだ。（ruby-align:line-edge;）