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

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

ふりがなとの距離

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

Edgeだけちょっと離れ気味

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

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

やっぱりEdgeだけ離れ気味

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

ページトップへ戻る

ふりがなを上へ動かす

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

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

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

Firefoxで微妙に動いただけ

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

rt { margin-bottom: .5em; }

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

ちゃんと動いたのはFirefoxだけ

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


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

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

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

Edgeで余計に開いちゃう

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

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

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

Firefox以外は揃う

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

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

ということは、margintransformを併用すれば、ちょうど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-規則について、詳しくは以下のページを参照のこと。

ページトップへ戻る

ふりがなの位置

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

ruby-positionプロパティの対応状況(2019.2現在)

なので、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

ふりがなが漢字の下まで移動した

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

ページトップへ戻る

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

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

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

rubyでまじゅつとインデックス

引用・参考文献

Comment & Pingback

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください