【ruby-align】ルビの位置揃えを指定

ruby-alignプロパティでは、<RUBY>タグで付けたルビの位置揃えを指定することができます。 ルビの位置は指定する値によって、左寄せ、右寄せ、中央寄せ、均等配置などができます。

またruby-alignプロパティは、ruby要素に対して指定するようにして下さい。

なおruby-alignはInternet Explorer独自のプロパティです。

書式

  • ruby-align : ……… ルビの位置揃えを指定

★:left、center、right、distribute-letter、他下記参照

left
ルビを左寄せで表示します
center
ルビを中央寄せで表示します
right
ルビを右寄せで表示します
distribute-letter
ルビを文字列の長さに均等に割り付けます。ルビが長い場合は、中央に表示されます。
distribute-space
ルビの前後にスペースを入れて均等に割り付けます。ルビが長い場合は、中央に表示されます。
line-edge
ルビをふる文字列が行末、あるいは行頭にある場合、ルビを行端に合わせて配置します。それ以外の場合は、中央に表示されます。
auto
ルビがブラウザの判断で自動的に配置されます。日本語・中国語・韓国語などの場合はdistribute-spaceが適用されます。また英文などの場合はcenterが適用されます。

使用した時の例

.sample1 {ruby-align: left;}
.sample2 {ruby-align: center;}
.sample3 {ruby-align: right;}
.sample4 {ruby-align: distribute-letter;}
.sample5 {ruby-align: distribute-space;}
.sample6 {ruby-align: line-edge;}
.sample7 {ruby-align: auto;}
<h4>left</h4>
<ruby class="sample1">漢字部分漢字部分<rt>ルビテキスト</rt></ruby>
<h4>center</h4>
<ruby class="sample2">漢字部分漢字部分<rt>ルビテキスト</rt></ruby>
<h4>right</h4>
<ruby class="sample3">漢字部分漢字部分<rt>ルビテキスト</rt></ruby>
<h4>distribute-letter</h4>
<ruby class="sample4">漢字部分漢字部分<rt>ルビテキスト</rt></ruby>
<h4>distribute-space</h4>
<ruby class="sample5">漢字部分漢字部分<rt>ルビテキスト</rt></ruby>
<h4>line-edge</h4>
<ruby class="sample6">漢字部分漢字部分<rt>ルビテキスト</rt></ruby>
<h4>auto</h4>
<ruby class="sample7">漢字部分漢字部分<rt>ルビテキスト</rt></ruby>

ブラウザ上の表示例

left

漢字部分漢字部分ルビテキスト

center

漢字部分漢字部分ルビテキスト

right

漢字部分漢字部分ルビテキスト

distribute-letter

漢字部分漢字部分ルビテキスト

distribute-space

漢字部分漢字部分ルビテキスト

line-edge

漢字部分漢字部分ルビテキスト

auto

漢字部分漢字部分ルビテキスト

※IEの場合有効となります。

対応ブラウザなどのデータ

初期値 auto 値の継承 継承する
適用可能な要素 ルビ
メディア visual / ruby
対応ブラウザ Internet Explorer5~

関連情報