ふりがなのスタイル

ruby-alignプロパティを使う

ふりがなの寄せ方を指定するには、ruby-alignプロパティを使います。値は以下の4つが用意されていて、start（頭揃え）、center（中央揃え）、space-between（両端揃え）、space-around（初期値）という感じ。

.start ruby { ruby-align: start; }
.center ruby { ruby-align: center; }
.between ruby { ruby-align: space-between; }
.around ruby { ruby-align: space-around; }

space-betweenとspace-aroundとで、パッと見て違いがわかりませんが、よぅく見てみると、space-betweenの方が、ルビベースの文字幅の端から端までふりがなが広がってるのが分かります（下図）。

ruby-alignプロパティについて詳しくは以下のページを参照のこと。
ruby-align - CSS: カスケーディングスタイルシート | MDN

ここまで、Chrome/Safariで見ている人は、なんじゃらほいと思われていることでしょう、そう、ChromeとSafariはruby-alignプロパティに対応していないんです:(。なので、代わりにtext-alignプロパティを使って指定することになります。

text-alignプロパティを使う

文章の行揃えを指定するためのプロパティtext-alignを使って、ふりがなの寄せ方を指定します。
ここでは、ruby-alignプロパティの時と同じ要領で、text-alignプロパティに置き換えて、指定してみます。

.start ruby { text-align: start; }
.end ruby { text-align: end; }
.center ruby { text-align: center; }
.left ruby { text-align: left; }
.right ruby { text-align: right; }
.justify ruby { text-align: justify; }

うまくいかないですね…:(。
Chromeのデベロッパー ツールで、rt要素の「user agent stylesheet（ユーザーエージェント・スタイルシート）」を見てみると、text-align: startが指定されてました。なので、ここでは、上の指定はそのままに、rt要素のtext-alignが親要素の値を継承するように、inherit（インハーリット）を指定しておくことにします:)。

指定した通り、ふりがなが寄りましたね！

rt { text-align: inherit; }

justifyは最終行には適用されない値なので、一行だけのふりがなには効果がなくてleftと同じ結果になりました。
ruby-alignプロパティが効かない割に、デフォルトの状態でruby-align: space-aroundを指定したのと同じようにレイアウトされるので、実質できないのはspace-betweenだけ、ということになります。

けれど、endとrightは同じ結果なのに、startとleftが違う結果なのが不思議ですね…:o。
text-alignプロパティの初期値はstartで、普段のテキストではleftと同じように左揃えになりますが、ふりがなの場合には、ruby-alignプロパティの初期値space-aroundと同じようにレイアウトされています。つまり、startはあくまで初期値って事なんですねー:D。

ふりがなの寄せ方まとめ

ルビテキストの寄せ方を指定するのにベストな書き方は以下に決定ーXD。（2021年11月現在）
Chrome/Safari用に、rt要素に対してtext-align: inheritを指定した上で、ruby要素に揃え位置のための指定を書きます。ただし頭揃えだけはruby-alignプロパティをruby要素でなくrt要素に指定することにします。
ruby-alignプロパティはChrome/Safariで効果がないし、text-alignプロパティはFirefoxで効果がないので、併記しちゃって問題ないのですね;9。

Firefoxでお尻揃え（end）、Chrome/Safariで両端揃え（space-between）は、できないので、しょうがないですX)！

rt { text-align: inherit; }
.start ruby {
	text-align: left;
}
.start rt {
	ruby-align: start;
}
.end ruby {
	text-align: end;
	ruby-align: right;
}
.center ruby {
	text-align: center;
	ruby-align: center;
}
.between ruby {
	text-align: start;
	ruby-align: space-between;
}
.around ruby {
	text-align: start;
	ruby-align: space-around;
}