ルビの位置を揃える

ルビの位置揃えについて

ルビの揃える位置を指定するには、ruby-alignプロパティを使用します。

【構文】

							ruby-align:位置;
						

指定可能な値

値	説明	初期値
auto	ブラウザ（ユーザーエージェント）に依存	○
start	本体文字の始端にルビ文字を揃える 効果はleftと同じ	-
left	本体文字の左端にルビ文字を揃える 効果はstartと同じ	-
center	本体文字の幅を基準に中央にルビ文字を揃える 本体文字がルビ文字よりも幅が短いときは、ルビ文字の幅を基準として中央に本体文字が揃う	-
end	本体文字の終端にルビ文字を揃える 効果はrightと同じ	-
right	本体文字の終端にルビ文字を揃える 効果はendと同じ	-
distribute-letter	本体文字の幅を基準に等幅にルビ文字を揃える 両端は本体文字の端に揃う 本体文字がルビ文字よりも幅が短いときは、ルビ文字の幅を基準として等幅に本体文字が揃う	-
distribute-space	本体文字の幅を基準に等幅にルビ文字を揃える 両端は本体文字の端に余白を空けて揃う 本体文字がルビ文字よりも幅が短いときは、ルビ文字の幅を基準として等幅に本体文字が揃う	-
line-edge	基本仕様はautoと同じ（違いは現在調査中）	-

サンプル

プロパティ	本体文字の幅が長い場合	本体文字の幅が短い場合
auto	ABCDEFG123	ABC12345
start	ABCDEFG123	ABC12345
left	ABCDEFG123	ABC12345
center	ABCDEFG123	ABC12345
end	ABCDEFG123	ABC12345
right	ABCDEFG123	ABC12345
distribute-letter	ABCDEFG123	ABC12345
distribute-space	ABCDEFG123	ABC12345
line-edge	ABCDEFG123	ABC12345

/* auto */ ruby { ruby-align:auto; } /* start */ ruby { ruby-align:start; } /* left */ ruby { ruby-align:left; } /* center */ ruby { ruby-align:center; } /* end */ ruby { ruby-align:end; } /* right */ ruby { ruby-align:right; } /* distribute-letter */ ruby { ruby-align:distribute-letter; } /* distribute-space */ ruby { ruby-align:distribute-space; } /* line-edge */ ruby { ruby-align:line-edge; }