CSS Reference

ruby-align

ルビの揃え方を指定する

ruby-align プロパティは、様々なルビボックスの内容がそれぞれのボックスを正確に満たさない場合（ボックスサイズに対して余白ができる場合）に、テキストがどのように配置されるかを指定します。

ruby-align プロパティに指定可能な値は下記の通りです。

start 下記の例の様に、ルビの内容は、ベーステキストの開始辺に揃えられます。
ruby-align: start; での配置例
center 下記の例の様に、ルビの内容は、ベーステキストの中央に揃えられます。
ruby-align: center; での配置例
space-between 下記の例の様に、ルビの内容は、ベーステキストに対して両端揃えとなります。もし、両端揃えのためのスペースがない場合は中央揃えとなります。
ruby-align: space-between; での配置例
space-around 下記の例の様に、ルビの内容は、ベーステキストのボックスサイズに均等に配置されるよう、スペースが配分されます。
ruby-align: space-around; での配置例

サンプルの画像はすべて CSS Ruby Annotation Layout Module Level 1 仕様書からの引用です。

ruby-alignの仕様

初期値
  • space-around
対象となる要素
  • ルビベース、ルビ注釈、ルビベースコンテナ、ルビ注釈コンテナ
継承
  • あり

ruby-alignのサンプルソース

ruby {
  ruby-align: space-between;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ×
iOS Safari ×
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome