ふりがなを振る。
ふりがなのレイアウト

2019.2.28. Thu

サイトのデザインによっては、漢字とふりがなの距離がちょっと近いかな、と感じる場合もあるかもしれませんね。はたまた、ふりがなは漢字の下に配置したい、という場合もあるやもしれません。そんなふりがなを細かくレイアウトしたい時のためのまとめです。

ふりがなとの距離

デフォルトの状態だと、ChromeやFirefoxでは、漢字とふりがなの距離が詰まりすぎかな、と思うんですけれど、Edgeで見てみるとそうでもないんですよね…。

もしかしたら、ブラウザごとの行間の指定とか、フォントの種類が原因なのかもしれないですね…。
下のサンプルでは、上段がline-heightプロパティの値を1.6に指定したもの、下段はfont-familyプロパティで游ゴシックを指定しています。

行間やフォントを明示的に指定しても、特に変化はありませんでした…（Edgeだけはなぜか、フォントに游ゴシックを指定すると、漢字とふりがなの間隔が余計に広がります:/）。

とはいうものの、Edgeの空き具合がちょうど良いくらいかなと思うので、ここでは、漢字とふりがなの空き具合が、どのブラウザで見ても、Edgeと同じくらいになるように調整してゆきたいと思います:)！

ページトップへ戻る

ふりがなを上へ動かす

空き具合をEdgeと合わせるために、rt要素（ルビテキスト）を上へ移動させて、漢字とふりがなの空きを広げようと思います。ここでは、marginプロパティを使って、rt要素の上方向にネガティブマージンを指定することで、ふりがなを0.5文字分、上へ動かします。

rt { margin-top: -.5em; }

あれ…、変化がありませんね…。Firefoxでごくわずかに（1pxくらい）上へ動いただけ:/。

じゃあ、上方向じゃなくて、rt要素の下方向に0.5文字分の余白を空けてみることにします。

rt { margin-bottom: .5em; }

Chromeなどでは相変わらず変化がないですけれど、Firefoxだけは、ちゃんと漢字とふりがなの空きが広がりました…:D！位置の具合も、ちょうどEdgeと同じくらいでいい感じです（下図）。

けれど、ChromeとSafariとIE/Edgeでは、rt要素に対してmarginプロパティが効かないみたいなので、折角だけれど、この方法は使えなさそう…:(。

やっぱり、余白を空けるんじゃなくて、ルビテキスト自体を上へ動かしたいところ。ということで、下のサンプルでは、rt要素にposition: relativeを指定して、topプロパティを使って、上へ動かしてみます。

rt {
	position: relative;
	top: -.5em;
}

動きませんね…、ChromeとSafariではrt要素にpositionプロパティが適用されないみたいです…。
一方、FirefoxとIE/Edgeではちゃんと移動してました。けど、Edgeにまで適用されちゃうと、さらに空きが広がってしまってよろしくないですよ…:/。

では、transformプロパティのtranslateY()を使って、rt要素を上へ動かしてみます。

rt { transform: translateY(-.5em); }

Chromeと、SafariとIEで、ふりがながちゃんと上にズレて、空きが広がりました！
今度はFirefoxとEdgeで効かないみたいですけど、そのおかげで、Firefox以外では、空き具合が揃うことになります:D。

ふりがなの位置を動かすことができたプロパティをまとめると、下表のようなことになります。

プロパティ＼ブラウザ	Chrome 72	Safari 12	Firefox 65	IE 11	Edge 18
margin	×	×	○	×	×
top	×	×	○	○	○
transform	○	○	×	○	×

ということは、marginとtransformを併用すれば、ちょうどEdgeにだけ適用されないので、都合がよいのではないでしょうか…:D！
以下のようにそれぞれのプロパティを併記して、指定してみます。

rt {
	margin-bottom: .5em;
	transform: translateY(-.5em);
}

無事、どのブラウザでも同じくらいの空き具合になりましたー;D！

ページトップへ戻る

Edgeの方を合わせる

Edgeの空き具合に合わせるのではなくて、Edgeの方を他のブラウザの空き具合に合わせる場合は、topプロパティを使った方法で、CSSハックという裏技を駆使して対応するしかないです。
ここでは、IE11/Edgeでしかサポートされていない-ms-ime-alignプロパティと、IE11では未対応の@supports-規則を併用することで、Edgeでしか適用されないように指定しています。

@supports (-ms-ime-align: auto) {
	rt {
		position: relative;
		top: .5em;
	}
}

-ms-ime-alignプロパティと@supports-規則について、詳しくは以下のページを参照のこと。

-ms-ime-align - CSS: Cascading Style Sheets | MDN

@supports - CSS: カスケーディングスタイルシート | MDN

ページトップへ戻る

ふりがなの位置

ふりがなを文字の上に添えるか下に添えるか（ふりがなの位置）を指定するには、ruby-positionプロパティを使います。用意されている値は、over（ルビベースの上）、under（ルビベースの下）、inter-character（ルビベースの文字の間）の3つで、overが初期値になります。けれど、今のところ、このプロパティをサポートしているブラウザはというと、Firefoxがunderに対応しているのみ…（2019.2現在）。
追記：ChromeとEdgeも対応してました…！（2021.1現在）。

なので、Firefox以外のブラウザは、先述の、ふりがなの距離を調整する方法で、ふりがなを漢字の下まで移動させちゃおうと思います。ただし、marginプロパティを使った方法では、ふりがなを漢字の下まで移動させることはできないので、topプロパティとtransformプロパティを使うことになります。

下のサンプルでは、ChromeとSafariとIEに適用するためにtransformプロパティを指定。
Edgeだけに適用するためには、topプロパティを前述のCSSハックを使って指定しています。それから、Edgeは他のブラウザよりも、ふりがなが離れ気味だったので、下げる距離も0.5文字分多めにしています。

ruby { ruby-position: under; }
rt { transform: translateY(3em); }
@supports (-ms-ime-align: auto) {
	rt {
		position: relative;
		top: 3.5em;
	}
}

どのブラウザでも、ふりがなを漢字の下に置くことができましたー:D！
※ChromeとEdgeでもruby-positionプロパティが効くようになりましたね…X)！（2020.9.15追記）

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

ページトップへ戻る

ふりがなのレイアウトのまとめ

ふりがなを表すrt要素（ルビテキスト）の位置を調整したい場合、適用されるプロパティがブラウザによってまちまちだったので、ここでひとまず、まとめてみました。
結局、CSSハックを使わないといけなかったり、ブラウザによって動かす距離を調整しないといけなかったりもしたけれど、できないことはなくてよかったです:)。

以上、「ふりがなをレイアウトしたい時のためのまとめ」でした！最後まで読んでいただきありがとうございました！X)

引用・参考文献

ルビ - Wikipedia

とある魔術の禁書目録 - Wikipedia

ブラウザ別に適用させるCSSハック2018 | 株式会社クロコロール

<ruby> - HTML: HyperText Markup Language | MDN

ruby-align - CSS: カスケーディングスタイルシート | MDN

ruby-position - CSS: カスケーディングスタイルシート | MDN