ruby-align: ***; ruby-overhang: ***; ruby-position: ***;

ブラウザ
  • IE
プロパティ
  • 独自拡張プロパティ

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>
表示例

ルビの位置を指定（ふりがな）

ルビの位置を指定（ふりがな）

ルビの位置を指定（ふりがな）