| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {ruby-align: 値 } |
| 値 の形式 | auto，start，left，center，end，right，distribute-letter，distribute-space，line-edge |
| 初 期 値 | auto |
| 対応ブラウザー | C3+ / e5+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
| 適用可能な要素 | すべての要素，生成コンテンツ |
| 継 承 | する |
ruby-alignプロパティ は，ルビの行揃え位置を指定します。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| auto | ブラウザーの仕様に任せます。 （初期値） |
| start | ルビの行頭を基本ブロックの左端の開始位置に揃えます。 |
| left | ルビの行頭を基本ブロックの左端の位置に揃えます。 （廃止？） |
| center | ルビの文字列は基本ブロックの幅に従って中央揃えします。 |
| end | ルビの行末を基本ブロックの右端の位置に揃えます。 |
| right | ルビの行末を基本ブロックの右端の位置に揃えます。 （廃止？） |
| distribute-letter | ルビ文字列の幅が基本ブロックの幅より小さい場合には，ルビ文字列は基本ブロックの幅で等間隔に配置されます。 ルビ文字列の幅が基本ブロックの幅以上の場合には，基本ブロックの文字列がルビ文字列の幅で等間隔に配置されます。 |
| distribute-space | ルビ文字列の幅が基本ブロックの幅より小さい場合には，ルビ文字列は基本ブロックの幅から先頭と行末に加える空白（white space）を除いた幅で等間隔に配置されます。 ルビ文字列の幅が基本ブロックの幅以上の場合には，基本ブロックの文字列がルビ文字列の幅から先頭と行末に加える空白（white space）を除いた幅で等間隔に配置されます。 |
| line-edge | ルビ文字列の両端が行の左右端に接していない場合は，autoと同様です。 ルビ文字列の両端が行の左右端のどちらかに接している場合は，基本的には autoと同様の配置ですが，行頭または行末に接しているルビ文字列の文字は行端の位置に揃えます。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/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; }
-->
</style> |
| HTML <body> ～ </body> |
<p><ruby class="sample1">オーストリア<rt>墺太利</rt></ruby>のウィーン
<ruby class="sample1">楽友協会<rt>ムジークフェライン（Musikverein）</rt></ruby>
大ホールでの<ruby class="sample1">ニューイヤー・コンサート<rt>新年演奏会</rt></ruby>
が楽しみだ。
（ruby-align:auto;）</p>
<p><ruby class="sample2">オーストリア<rt>墺太利</rt></ruby>のウィーン
<ruby class="sample2">楽友協会<rt>ムジークフェライン（Musikverein）</rt></ruby>
大ホールでの<ruby class="sample2">ニューイヤー・コンサート<rt>新年演奏会</rt></ruby>
が楽しみだ。
（ruby-align:start;）</p>
<p><ruby class="sample3">オーストリア<rt>墺太利</rt></ruby>のウィーン
<ruby class="sample3">楽友協会<rt>ムジークフェライン（Musikverein）</rt></ruby>
大ホールでの<ruby class="sample3">ニューイヤー・コンサート<rt>新年演奏会</rt></ruby>
が楽しみだ。
（ruby-align:left;）</p>
<p><ruby class="sample4">オーストリア<rt>墺太利</rt></ruby>のウィーン
<ruby class="sample4">楽友協会<rt>ムジークフェライン（Musikverein）</rt></ruby>
大ホールでの<ruby class="sample4">ニューイヤー・コンサート<rt>新年演奏会</rt></ruby>
が楽しみだ。
（ruby-align:center;）</p>
<p><ruby class="sample5">オーストリア<rt>墺太利</rt></ruby>のウィーン
<ruby class="sample5">楽友協会<rt>ムジークフェライン（Musikverein）</rt></ruby>
大ホールでの<ruby class="sample5">ニューイヤー・コンサート<rt>新年演奏会</rt></ruby>
が楽しみだ。
（ruby-align:end;）</p>
<p><ruby class="sample6">オーストリア<rt>墺太利</rt></ruby>のウィーン
<ruby class="sample6">楽友協会<rt>ムジークフェライン（Musikverein）</rt></ruby>
大ホールでの<ruby class="sample6">ニューイヤー・コンサート<rt>新年演奏会</rt></ruby>
が楽しみだ。
（ruby-align:right;）</p>
<p><ruby class="sample7">オーストリア<rt>墺太利</rt></ruby>のウィーン
<ruby class="sample7">楽友協会<rt>ムジークフェライン（Musikverein）</rt></ruby>
大ホールでの<ruby class="sample7">ニューイヤー・コンサート<rt>新年演奏会</rt></ruby>
が楽しみだ。
（ruby-align:distribute-letter;）</p>
<p><ruby class="sample8">オーストリア<rt>墺太利</rt></ruby>のウィーン
<ruby class="sample8">楽友協会<rt>ムジークフェライン（Musikverein）</rt></ruby>
大ホールでの<ruby class="sample8">ニューイヤー・コンサート<rt>新年演奏会</rt></ruby>
が楽しみだ。
（ruby-align:distribute-space;）</p>
<p><ruby class="sample9">オーストリア<rt>墺太利</rt></ruby>のウィーン
<ruby class="sample9">楽友協会<rt>ムジークフェライン（Musikverein）</rt></ruby>
大ホールでの<ruby class="sample9">ニューイヤー・コンサート<rt>新年演奏会</rt></ruby>
が楽しみだ。
（ruby-align:line-edge;）</p> |
| ブラウザー 表示例 （未対応のブラウザーでは正しく表示されません） |
|---|
| オーストリアのウィーン 楽友協会大ホールでの ニューイヤー・コンサートが楽しみだ。 （ruby-align:auto;） オーストリアのウィーン 楽友協会大ホールでの ニューイヤー・コンサートが楽しみだ。 （ruby-align:start;） オーストリアのウィーン 楽友協会大ホールでの ニューイヤー・コンサートが楽しみだ。 （ruby-align:left;） オーストリアのウィーン 楽友協会大ホールでの ニューイヤー・コンサートが楽しみだ。 （ruby-align:center;） オーストリアのウィーン 楽友協会大ホールでの ニューイヤー・コンサートが楽しみだ。 （ruby-align:end;） オーストリアのウィーン 楽友協会大ホールでの ニューイヤー・コンサートが楽しみだ。 （ruby-align:right;） オーストリアのウィーン 楽友協会大ホールでの ニューイヤー・コンサートが楽しみだ。 （ruby-align:distribute-letter;） オーストリアのウィーン 楽友協会大ホールでの ニューイヤー・コンサートが楽しみだ。 （ruby-align:distribute-space;） オーストリアのウィーン 楽友協会大ホールでの ニューイヤー・コンサートが楽しみだ。 （ruby-align:line-edge;） |