ruby-position

ruby-position は、ルビの表示位置を指定する時に使います。（IE独自プロパティ）

Value（値）

above
初期値 テキストの上にルビを表示
inline
テキストの後にルビを表示

HTMLタグ（ルビをふる時のタグ）

Value（値）

<ruby>～</ruby>
ルビをふるタグ HTML5から新しく追加された要素
<rb>
ルビをふる文字（Ruby Base の略) HTML5では使用しません
<rt>
ルビ文字（Ruby Text の略) HTML5から新しく追加された要素
<rp>
未対応ブラウザでの括弧の表示（Ruby Parentheses の略) HTML5から新しく追加された要素

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   ruby.test1 { ruby-position: above; }
   ruby.test2 { ruby-position: inline; }
  </style>
 </head>
 <body>
   <p>
   『<ruby class="test1"><rb>五月雨</rb><rp>（</rp><rt>さみだれ</rt><rp>)</rp></ruby>を
   <ruby class="test1"><rb>集</rb><rp>（</rp><rt>あつ</rt><rp>)</rp></ruby>めて
   <ruby class="test1"><rb>早</rb><rp>（</rp><rt>はや</rt><rp>)</rp></ruby>し
   <ruby class="test1"><rb>最上川</rb><rp>（</rp><rt>もがみがわ</rt><rp>)</rp></ruby>』
   </p>
   <p>（同上/test1をtest2に変える）</p>
 </body>
</html>

display

『五月雨（さみだれ)を集（あつ)めて早（はや)し最上川（もがみがわ)』

『五月雨（さみだれ)を集（あつ)めて早（はや)し最上川（もがみがわ)』

※ 俳句：松尾芭蕉「おくのほそ道」より

上に戻る