CSS ruby-align

スタイルシート属性 ruby-align はルビ（振り仮名）の配置を指定します。主に　<ruby> タグに対して指定するスタイルです。

書式

ruby-align : align

ruby-alignプロパティの値には、次のうちいずれかを指定する。

start: ルビをテキストの始点（左または上）に揃える。
center: ルビをテキストの中央に揃える。
space-between: ルビは両端揃えに配置される。
space-around: ルビは均等に配置される。

対応状況

ruby-align プロパティに対応しているWebブラウザは、Firefoxだけである。

ruby-align
Webブラウザ	対応状況
Chrome	×
Edge	×
FireFox	○
Internet Explorer	×
Opera	×
Safari	×

初期値

ruby-align プロパティの初期値は space-around である。

適用対象

次に示す要素に ruby-align プロパティを適用できる。

ruby bases
ruby annotations
ruby base containers
ruby annotation containers

継承

ruby-align プロパティは、子要素へ継承される。

start

スタイルシート属性 ruby-align を使用した HTML の例を次に示します。表示結果はブラウザによって異なることがあります。

<ruby style="ruby-align: start;">鉄脚梨<rt>ぼけ</ruby>の花

鉄脚梨ぼけの花

center

スタイルシート属性 ruby-align を使用した HTML の例を次に示します。表示結果はブラウザによって異なることがあります。

<ruby style="ruby-align: center;">鉄脚梨<rt>ぼけ</ruby>の花

鉄脚梨ぼけの花

space-between

スタイルシート属性 ruby-align を使用した HTML の例を次に示します。表示結果はブラウザによって異なることがあります。

<ruby style="ruby-align: space-between;">鉄脚梨<rt>ぼけ</ruby>の花

鉄脚梨ぼけの花

space-around

スタイルシート属性 ruby-align を使用した HTML の例を次に示します。表示結果はブラウザによって異なることがあります。

<ruby style="ruby-align: space-around;">鉄脚梨<rt>ぼけ</ruby>の花

鉄脚梨ぼけの花

CSS

ルビ（ふりがな）に関するCSSプロパティの一覧を次に示す。

JavaScript

JavaScriptからは element.style オブジェクトの rubyAlign プロパティでCSSの ruby-align プロパティを参照及び設定できる。ただし、すべてのWebブラウザが ruby-align プロパティに対応しているわけではないため、rubyAlign プロパティの存在をチェックする必要がある。

<ruby style="ruby-align: start" id="example">鉄脚梨<rt>ぼけ</ruby>の花
<script>
  let ruby = document.getElementById("example");
  if ('rubyAlign' in ruby.style) {
    console.log(ruby.style.rubyAlign)
  } else {
    console.log("Your browser doesn't support rubyAlign property.");
  }
</script>

参考文献

World Wide Web Consortium (2021) CSS Ruby Annotation Layout Module Level 1

Microsoft (2022) rubyAlign property (Internet Explorer)