ふりがなのスタイル

サイトのデザインによっては、ふりがなをもうちょっと小さめにしたい場合もあるかもしれませんね。タイトルとかのふりがなでは、 頭揃えにしたり、お尻揃えにしたいかもしれません。そんなふりがなのスタイルを調整したい時のためのまとめです。

文字サイズと文字間

ルビテキストの文字サイズは、デフォルトだとルビベースの半分の文字サイズ50%になってる(下サンプル上段)んですけれど、このサイズは、普段のテキストと同様に、font-sizeプロパティを使って調整することができます。
下のサンプル(下段)では、ルビベースの30%の文字サイズになるように、指定しています:)

rt { font-size: 30%; }

一方、ふりがなの文字間を調整する場合はというと、普段のテキストと同様にletter-spacingプロパティで調整しようとしても、上手くいきません…。下のサンプルでは、ルビテキストの文字間を0.2文字分詰まるように指定してるのですけれど、変化が見られませんね…:(

rt { letter-spacing: -.2em; }

実は、ふりがなのレイアウトは、ルビベースの文字幅に合わせてバランスよく配置されるよう、既にふりがなごとに文字間が調整されているんです。
文字間を調整する場合には、次の項で紹介するふりがなの寄せ方の指定と、合わせて指定しなくちゃいけません。下のサンプルは、寄せ方をcenterとしてから、改めて文字間を調整してみました。
ぎゅっと寄りましたね;)

ruby {
	ruby-align: center;
}
rt {
	letter-spacing: -.2em;
	text-align: center;
}

ふりがなの寄せ方

ルビテキストの寄せ方は、特に何も指定しなければ、ルビベースの文字幅内にバランスよく並ぶよう、レイアウトされます。前項でやったみたいに、文字間を調整したかったり、はたまた、ルビベースと頭揃えしたかったり、お尻揃えしたい場合もあるやもしれません。
ふりがなの左右の位置(寄せ方)を調整する方法をまとめます:)

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; }
Firefox 94での表示

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

space-betweenspace-aroundの違い

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の値を上書き

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

rt { text-align: inherit; }
Chrome 95での表示

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

けれど、endrightは同じ結果なのに、startleftが違う結果なのが不思議ですね…: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: distribute-letter;
	ruby-align: space-between;
}
.around ruby {
	text-align: start;
	ruby-align: distribute-space;
	ruby-align: space-around;
}

以上、ふりがなのスタイルについてでした!

引用・参考文献

ふりがなのレイアウト