ITエンジニアのための技術支援サイト
ruby-align
InternetExplorer独自のプロパティで、ルビの水平方向の配置を指定します。
ブラウザ
IE5 / IE5.5 / IE6 / IE5 mac
書式
要素[.class名][#id名]{ ruby-align : 値; }
指定できる値
| 値 | 初期値 | 意味 |
| auto | ○ | ルビが日本語や韓国語のようなアジア文字であれば、distribute-spaceと同様の配置となり、ラテン文字などであれば、centerと同様の配置になります。 |
| left | <rb>に対して左寄せされます。 | |
| center | <rb>に対して中央揃えされます。ただし、ルビの幅よりも<rb>のテキスト幅が小さい場合は、ルビの中央に<rb>のテキストが配置されます。 | |
| right | <rb>に対して右寄せされます。 | |
| distribute-letter | ルビの幅が<rb>の幅よりも小さければ、ルビは<rb>のテキストに対して均等に割り付けられます。また、<rb>と<rt>の幅が同一である場合のルビ配置は中心になります。 | |
| distribute-space | ルビの幅が<rb>の幅よりも小さければ、ルビは<rb>のテキストに対して均等に割り付けられます。ただし、<rb>と<rt>のどちらかの幅が小さい場合は、テキストの1番目にスペースが挿入されるようです。また、<rb>と<rt>の幅が同一である場合のルビ配置は中心になります。 | |
| line-edge | <rb>よりも<rt>の幅が小さければ、centerと同様となり、 <rb>よりも<rt>の幅が大きければ、leftと同様になるようです。 |
サンプル
ソースコード
<html>
<head>
<title>サンプルコード</title>
<style type="text/css">
#sample1 {
ruby-align : auto;
}
#sample2 {
ruby-align : left;
}
#sample3 {
ruby-align : center;
}
#sample4 {
ruby-align : right;
}
#sample5 {
ruby-align : distribute-letter;
}
#sample6 {
ruby-align : distribute-space;
}
#sample7 {
ruby-align : line-edge;
}
rt {
font-size : xx-small;
}
</style>
</head>
<body>
<ruby id="sample1">
<rb>東軍が鬨の声を上げた</rb><rp>(</rp><rt>とうぐんがときのこえをあげた</rt><rp>)</rp>
</ruby>
「ruby-align : auto」
<br><br>
<ruby id="sample1">
<rb>東軍が鬨の声を上げた</rb><rp>(</rp><rt>TOUGUNGA TOKI NO KOE WO AGETA</rt><rp>)</rp>
</ruby>「ruby-align : auto」
<br><br>
<ruby id="sample2">
<rb>東軍が鬨の声を上げた</rb><rp>(</rp><rt>とうぐんがときのこえをあげた</rt><rp>)</rp>
</ruby>「ruby-align : left」
<br><br>
<ruby id="sample3">
<rb>東軍が鬨の声を上げた</rb><rp>(</rp><rt>とうぐんがときのこえをあげた</rt><rp>)</rp>
</ruby>「ruby-align : center」
<br><br>
<ruby id="sample4">
<rb>東軍が鬨の声を上げた</rb><rp>(</rp><rt>とうぐんがときのこえをあげた</rt><rp>)</rp>
</ruby>「ruby-align : right」
<br><br>
<ruby id="sample5">
<rb>東軍が鬨の声を上げた</rb><rp>(</rp><rt>とうぐんがときのこえをあげた</rt><rp>)</rp>
</ruby>「ruby-align : distribute-letter」
<br><br>
<ruby id="sample6">
<rb>東軍が鬨の声を上げた</rb><rp>(</rp><rt>とうぐんがときのこえをあげた</rt><rp>)</rp>
</ruby>「ruby-align : distribute-space」
<br><br>
<ruby id="sample7">
<rb>東軍が鬨の声を上げた</rb><rp>(</rp><rt>とうぐんがときのこえをあげた</rt><rp>)</rp>
</ruby>「ruby-align : line-edge」
</body>
</html>