CSS3 Pre-Reference



ruby-align

ルビの寄せ方

試す

サンプル

指定された方法でルビが表示されていれば正解です。

新幹線ruby-align:auto;ruby-align:auto;

新幹線ruby-align:start;ruby-align:start;

新幹線ruby-align:left;ruby-align:left;

新幹線ruby-align:center;ruby-align:center;

新幹線ruby-align:end;ruby-align:end;

新幹線ruby-align:right;ruby-align:right;

新幹線ruby-align:distribute-letter;ruby-align:distribute-letter;

新幹線ruby-align:distribute-space;ruby-align:distribute-space;

新幹線ruby-align:line-edge;ruby-align:line-edge;

以下はルビとベースの量が逆転した例です。

新幹線新幹線新幹線auto;

新幹線新幹線新幹線start;

新幹線新幹線新幹線left;

新幹線新幹線新幹線center;

新幹線新幹線新幹線end;

新幹線新幹線新幹線right;

新幹線新幹線新幹線distribute-letter;

新幹線新幹線新幹線distribute-space;

新幹線新幹線新幹線line-edge;

コメントする


対応ブラウザ

Firefox
まだ
Chrome/Safari
まだ
Opera
まだ
InternetExplorer
5~

パラメータ

auto | start | left | center | end | right | distribute-letter | distribute-space | line-edge
初期値 auto
適用 すべての要素と生成内容
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 CSS3 Ruby Module#4.2 Ruby alignment: the 'ruby-align' property

解説

ルビの寄せ方を指定します。

auto
ブラウザに任せます。ルビ文字がベースより幅が広い場合には”distribute-space”、幅が狭い場合は”center”を採る事が推奨されています。
start
left
ルビのテキストと土台となる文字を開始位置で揃えます。つまり、アラビア語だと右揃えになります。
center
ルビのテキストと土台となる文字を中央ぞろえにします。
end
right
ルビのテキストと土台となる文字を終了位置で揃えます。つまり、アラビア語だと左揃えになります。右揃えではありません。
distribute-letter
ルビのテキストと土台となる文字を、間にスペースを挟むことで揃えます。最初と最後にはスペースを挟みません。
distribute-space
ルビのテキストと土台となる文字を、間にスペースを挟むことで揃えます。最初と最後にもスペースを挟みます。
line-edge
ルビのテキストが土台より長い場合、ベースの文字間にスペースを挟むことで揃えます。最後にもスペースを挟みます。

マルチカラムでルビが分割される場合は、分割されたそれぞれについて上記の表示にします。

トラックバック

投稿されたコメント