ruby-align: ***; ruby-overhang: ***; ruby-position: ***;
ruby-align、ruby-overhang、ruby-position は、ルビ(ふりがな)の位置などを指定するプロパティです。
ruby-align
… ルビの位置を、左寄せ、中央揃え、右寄せ、両端揃え、均等、行端揃えで指定します。ruby-overhang
… ルビが対象テキストよりも長い場合に、前後のテキストの上にはみ出すかどうかを指定します。ruby-position
… ルビの位置を、対象テキストの上部か後方で指定します。
※ルビの指定については、「ルビ(ふりがな)を付ける」をご覧ください。
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 プロパティの指定については、値を変更しても変化が見られませんでした。
※このプロパティは、CSS 2では定義されていません。
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
ruby.example1 { ruby-align: distribute-letter; }
ruby.example2 { ruby-position: inline; }
</style>
</head>
<body>
<p>
<ruby>
<rb>ルビの位置を指定</rb><rp>(</rp><rt>ふりがな</rt><rp>)</rp>
</ruby>
</p>
<p>
<ruby class="example1">
<rb>ルビの位置を指定</rb><rp>(</rp><rt>ふりがな</rt><rp>)</rp>
</ruby>
</p>
<p>
<ruby class="example2">
<rb>ルビの位置を指定</rb><rp>(</rp><rt>ふりがな</rt><rp>)</rp>
</ruby>
</p>
</body>
</html>
表示例
- サイト内検索