ふりがなのレイアウト

ふりがなとの距離

デフォルトの状態だとこんなくらいの距離感。どのブラウザも同じくらいですね。

ここでは、ふりがなとの距離をデフォルトよりももうちょっと広げたいと思います。
試しに、行間の指定といえばline-heightプロパティですね。rt要素（ルビテキスト）に対してline-heightプロパティを指定して、ふりがなの行間を広げてみたいと思います。
下のサンプルでは、上段は2に指定したもの、下段は4に指定しています。

どのブラウザでもちっとも変わりませんね…。デベロッパーツールで見てみると、ルビテキスト自体の行間は広がっているのに、ふりがなとの距離はビクともしません…。別の手を考えます。

ふりがなを上へ動かす

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

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

uuum...、動きませんね…:/。（Firefoxではruby要素ごと1pxくらい微動してる…）
じゃあ、上方向じゃなくて、rt要素の下方向に0.5文字分の余白を空けてみることにします。

rt { margin-bottom: .5em; }

Chromeなどでは相変わらず変化がないですけれど、Firefoxだけは、ちゃんとふりがなとの距離が広がりました…:D！

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

---

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

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

これまた、ChromeとSafariとEdgeはビクともしません。一方、Firefoxはちゃんと動いていて、margin-bottomプロパティを指定した時と同じ結果になりました。
ChromeとSafariとEdgeには、rt要素に対してpositionプロパティが適用されないみたいです…。

---

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

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

ChromeとSafariとEdgeで、ふりがながちゃんと上にズレて、空きが広がりました！
…けど今度はFirefoxで効かないみたいです:(。

ふりがなの位置を動かすことができたプロパティをまとめると、下表のようなことになります。綺麗に分かれましたね…！

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

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

無事、どのブラウザでも同じくらいふりがなの距離を広げることができましたーXD！

ふりがなの位置

ふりがなを文字の上に添えるか下に添えるか（ふりがなの位置）を指定するには、ruby-positionプロパティ（-webkit-ruby-positionプロパティ）を使います。用意されている値は以下の通り。ベンダープレフィックス（-webkit-）付きの場合は値が違うので注意です。X(

それではさっそく、ruby要素にruby-positionプロパティを指定してみます。

ばっちり、すべてのブラウザでふりがなを文字の下に添えることができました！;D

Safariではover/underの代わりにbefore/afterを指定しなきゃいけないのですが、その割にinter-characterも対応しているっぽいですねぇ（対応の仕方がちょっと雑だけど）。

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

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

ふりがなを表すrt要素（ルビテキスト）の位置を調整したい場合、適用されるプロパティがブラウザによってまちまちだったので、ここでひとまず、まとめてみました。
だんだん、ブラウザ対応が進んできて、やりたいことを簡単にできる方法が増えてきましたねー;D。

以上、ふりがなをレイアウトしたい時のためのまとめでした！

引用・参考文献

• ruby-position - CSS: カスケーディングスタイルシート | MDN
• とある科学の超電磁砲 - Wikipedia