ルビ（振り仮名）に関するスタイルシート属性

ruby-align

スタイルシート属性 ruby-align はルビ（振り仮名）の配置を指定します。主に　<ruby> タグに対して指定するスタイルです。

書式

属性値

align

次の値のうちいずれかを指定します。

値	意味
auto	自動（規定値）
left	左寄せ
center	中央寄せ
right	右寄せ
distribute-letter	両端揃え
distribute-space	均等割付
line-edge	行末までの処理変更

使用例

スタイルシート属性 ruby-align を使用した HTML の例を次に示します。表示結果はブラウザによって異なることがあります。

<ruby style="ruby-align: auto">
 <rb>情報交換用米国標準コード</rb>
 <rt>ASCII</rt>
</ruby>

情報交換用米国標準コードASCII

<ruby style="ruby-align: left">
 <rb>情報交換用米国標準コード</rb>
 <rt>ASCII</rt>
</ruby>

情報交換用米国標準コードASCII

<ruby style="ruby-align: center">
 <rb>情報交換用米国標準コード</rb>
 <rt>ASCII</rt>
</ruby>

情報交換用米国標準コードASCII

<ruby style="ruby-align: right">
 <rb>情報交換用米国標準コード</rb>
 <rt>ASCII</rt>
</ruby>

情報交換用米国標準コードASCII

<ruby style="ruby-align: distribute-letter">
 <rb>情報交換用米国標準コード</rb>
 <rt>ASCII</rt>
</ruby>

情報交換用米国標準コードASCII

<ruby style="ruby-align: distribute-space">
 <rb>情報交換用米国標準コード</rb>
 <rt>ASCII</rt>
</ruby>

情報交換用米国標準コード ASCII

ruby-overhang

スタイルシート属性 ruby-align はルビ（振り仮名）の配置を指定します。主に　<ruby> タグに対して指定するスタイルです。

書式

属性値

overhang

次の値のうちいずれかを指定します。

値	意味
auto	はみ出す
whitespace	スペース文字文まではみ出す
none	はみ出さない

使用例

スタイルシート属性 ruby-overhang を使用した HTML の例を次に示します。表示結果はブラウザによって異なることがあります。

<ruby style="ruby-overhang: auto">
 <rb>桑港</rb>
 <rt>サンフランシスコ</rt>
</ruby>

桑港 サンフランシスコ

<ruby style="ruby-overhang: whitespace">
 <rb>桑港</rb>
 <rt>サンフランシスコ</rt>
</ruby>

桑港 サンフランシスコ

<ruby style="ruby-overhang: none">
 <rb>桑港</rb>
 <rt>サンフランシスコ</rt>
</ruby>

桑港 サンフランシスコ

ruby-position

スタイルシート属性 ruby-align はルビ（振り仮名）を振る位置を指定します。主に　<ruby> タグに対して指定するスタイルです。

書式

属性値

position

には次の値のうちいずれかを指定します。

値	意味
above	上（規定値）
inline	横

使用例

スタイルシート属性 ruby-position を使用した HTML の例を次に示します。表示結果はブラウザによって異なることがあります。

<ruby style="ruby-position: above">
 <rb>東雲</rb>
 <rt>しののめ</rt>
</ruby>

東雲しののめ

<ruby style="ruby-position: inline">
 <rb>東雲</rb>
 <rt>しののめ</rt>
</ruby>

東雲しののめ