CSS - ruby-align

• トップ
• CSSリファレンス
• ruby-align

概要

説明

ruby で記述するルビの表示位置を指定します。以前 Internet Explorer 5 でも ruby-align が実装されていましたが別物です。

start

ルビを開始位置に寄せて表示します。

center

ルビを中央に表示します。

space-between

ルビを均等配置します。

space-around

ルビを均等配置しますが両端にもスペースを加えます。

使用例

ruby { font-size: 24px; }
rt, rp { font-size: 12px; }

<p>
  <ruby style="ruby-align: start">
    蒲公英<rp>(</rp><rt>たんぽぽ</rt><rp>)</rp>
  </ruby> ... start
</p>
<p>
  <ruby style="ruby-align: center">
    蒲公英<rp>(</rp><rt>たんぽぽ</rt><rp>)</rp>
  </ruby> ... center
</p>
<p>
  <ruby style="ruby-align: space-between">
    蒲公英<rp>(</rp><rt>たんぽぽ</rt><rp>)</rp>
  </ruby> ... space-between
</p>
<p>
  <ruby style="ruby-align: space-around">
    蒲公英<rp>(</rp><rt>たんぽぽ</rt><rp>)</rp>
  </ruby> ... space-around
</p>