ruby-align

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

Value（値）

auto
初期値 自動的にふる
left
左寄せにする
center
中央揃えにする
right
右寄せにする
distribute-letter
均等配置にする（ルビの方が長い場合は中央揃え）
distribute-space
ルビの前後にスペースを入れて均等配置（ルビの方が長い場合は中央揃え）
line-edge
基本的に中央揃え（行端文字にはルビを端に寄せる）

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-align: auto;  }
   ruby.test2 { ruby-align: left; }
   ruby.test3 { ruby-align: center; }
   ruby.test4 { ruby-align: right; }
   ruby.test5 { ruby-align: distribute-letter; }
   ruby.test6 { ruby-align: distribute-space; }
   ruby.test7 { ruby-align: line-edge; }
  </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>
   <p>（同上/test1をtest3に変える）</p>
   <p>（同上/test1をtest4に変える）</p>
   <p>（同上/test1をtest5に変える）</p>
   <p>（同上/test1をtest6に変える）</p>
   <p>（同上/test1をtest7に変える）</p>
 </body>
</html>

display

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

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

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

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

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

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

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

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

上に戻る