[新着] Webテンプレートを仮オープンしました
ruby-align、ruby-overhang、ruby-position は、ふりがなの位置などを指定するプロパティです。
ruby-align … 「ふりがな」の位置を、左、中央、右、両端揃え、均等、行端揃えで指定します。
ruby-overhang … 「ふりがな」がはみ出る場合に、前後の文字の上にはみ出すかどうかを指定します。
ruby-position … 「ふりがな」の位置を、対象文字の上部か右側で指定します。
※ふりがなの指定については、ruby要素のページをご覧ください。
ruby {
ruby-align: distribute-space;
ruby-overhang: auto;
ruby-position: above;
}
以下の例では、青い文字に対してふりがなを付けています。
| ruby-align | auto … （自動） | |
|---|---|---|
| left … （左寄せ） | ||
| center … （中央） | ||
| right … （右寄せ） | ||
| distribute-letter … （両端揃え） | ||
| distribute-space … （均等） | ||
| line-edge … （行端揃え） |
ルビの ルビの対象の |
|
| ruby-overhang | auto … （はみ出す） | ルビの |
| whitespace … （スペースまではみ出す） | ルビの |
|
| none … （はみ出さない） | ルビの |
|
| ruby-position | above … （上部） | |
| inline … （右側） |
※ruby-overhang プロパティについては、値を変更してもIE6では変化が見られませんでした。
（もしかするとIE5だけの対応かもしれません）
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#example1 { ruby-align: distribute-letter; }
#example2 { ruby-position: inline; }
-->
</style>
</head>
<body>
<p>
<ruby>
<rb>ルビの位置を指定</rb><rp>（</rp><rt>ふりがな</rt><rp>）</rp>
</ruby>
</p>
<p>
<ruby id="example1">
<rb>ルビの位置を指定</rb><rp>（</rp><rt>ふりがな</rt><rp>）</rp>
</ruby>
</p>
<p>
<ruby id="example2">
<rb>ルビの位置を指定</rb><rp>（</rp><rt>ふりがな</rt><rp>）</rp>
</ruby>
</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
