ruby-alignプロパティ

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

書式

ruby-align : auto | left | center | right | distribute-letter | distribute-space | line-edge

ruby-alignプロパティの値には、次のうちいずれかを指定する。

auto
自動(初期値)
left
左寄せ
center
中央寄せ
right
右寄せ
distribute-letter
両端揃え
distribute-space
均等割付
line-edge
行末までの処理変更

対応状況

Webブラウザ対応状況
Internet Explorer 6.0
FireFox 3.0×
Google Chrome 0.3×
Opera 9.62×
Safari 3.2.1×

使用例

スタイルシート属性 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> タグに対して指定するスタイルです。

書式

ruby-overhang : auto | whitespace | none

ruby-overhangプロパティの値には、次のうちいずれかを指定する。

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

対応状況

Webブラウザ対応状況
Internet Explorer 6.0
FireFox 3.0×
Google Chrome 0.3×
Opera 9.62×
Safari 3.2.1×

使用例

スタイルシート属性 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> タグに対して指定するスタイルです。

書式

ruby-position : above | inline

ruby-positionプロパティの値には、次のうちいずれかを指定する。

above
上(初期値)
inline

対応状況

Webブラウザ対応状況
Internet Explorer 6.0
FireFox 3.0×
Google Chrome 0.3×
Opera 9.62×
Safari 3.2.1×

使用例

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

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