CSS - ruby-align

概要

属性名	ruby-align
値	start \| center \| space-between \| space-around
初期値	space-around
適用可能要素	ルビ
継承	継承する
サポート	https://caniuse.com/mdn-css_properties_ruby-align

説明

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

start: ルビを開始位置に寄せて表示します。
center: ルビを中央に表示します。
space-between: ルビを均等配置します。
space-around: ルビを均等配置しますが両端にもスペースを加えます。

使用例

CSS

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

HTML

<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>

表示

蒲公英(たんぽぽ) ... start

蒲公英(たんぽぽ) ... center

蒲公英(たんぽぽ) ... space-between

蒲公英(たんぽぽ) ... space-around

初版：2024年12月15日、最終更新：2024年12月15日

https://www.tohoho-web.com/css/prop/ruby-align.htm