HTMLのrubyがイマイチと感じた時にCSSでフリガナを付ける方法

2023年1月24日2023年1月26日

htmlrubyってのがありますよね。漢字にフリガナを振ったりするアレです。

でも、こいつがなかなかイマイチなやつで。。最近は未対応ブラウザも(たぶん)無くなって、かなり良い感じに振り仮名を付けられるようになりましたが、いろいろ試すとやっぱり使えない(イマイチ)。

という事で、今回はCSSで漢字にルビ(振り仮名)を付ける機会がありましたので、方法を記事にしておきたいと思います。

ルビの配置に関する問題

2023年1月時点で、ルビのレイアウトについて私が気になる点は以下の2点です。

将来的には変わっているかもしれませんので、ご了承ください。

ruby-align が効かない

私の感覚では「ruby-align : center」としてルビは中央配置にしたいのですが、ruby-alignはFirefoxでは対応しているようですが、未対応のブラウザでは均等割付のような感じになってしまいます。

昨日きのう近所きんじょ小啄木鳥こげら発見はっけんした。

上の例のように、文字間隔がバラバラになってしまいます。これは好みの問題もありますが、個人的には中央寄せになってほしいかなと。

ruby-overhang が使えない

こっちの方が問題かもしれません。前後のテキストに対するルビのかかり方を指定するらしい ruby-overhang というプロパティを発見したのですが、こいつが上手く効いてくれませんでした。

私の解釈違いなら申し訳ありませんが、ググった情報を見る限り「autoで前後のテキストにかかってOK」という事で、フリガナが長い場合、左右にはみ出してくれるのかと思いました。が…

たしかにうけたまわりました。

お使いのブラウザで、どう見えているかは確証がありませんが、上の例のようなルビが長くなってしまう場合に、ルビがはみ出してくれるのではなく、元テキストの字間が広げられてしまいます。

ちょっとこれは我慢できません。。

 

もっと追及して調査するのも手ですが、こういった不安定な挙動の場合、たいがい時間の無駄です。という事で、今のところ私はルビはCSSで振る事にします。

CSSでフリガナを振ってみたサンプル

昨日きのう近所きんじょ小啄木鳥こげら発見はっけんした。

たしかにうけたまわりました。

どうでしょうか。私の感覚では、おおよそイメージ通りに綺麗にフリガナが振れました。

一般的な文章すべてに対応させたい場合に注意する点

一般的な漢字の中で一番読みの長い漢字は、例でも挙げた「承」の訓読み(うけたまわ)などの5文字だそうです。

私の主観ですが、5文字まで綺麗に見えるようにするにはルビの文字サイズは元テキストの45%程度までにしないと、前後のテキストに被りすぎて見栄えが悪くなります。ルビを45%程度にする事を考えると、あまり元テキストのサイズが小さいとルビが読みづらくなってしまいますね。

また、レアケースかもしれませんが、下のように読みが5文字の漢字のそばに読みが4文字の漢字が出現する場合を想定すると、元テキストの letter-spacing が、最低0.14em程度は必要なようです。

わたくしうけたまわりました。

とまあ、ゴチャゴチャ書きましたが、細かい部分は使用環境に合わせて調整してください。

サンプルコード

rubyタグは使用しますが、それ自体は非表示にしてCSSで用意したルビを表示します。

HTML

ちょっと見づらくなってしまうので改行を入れてあります。

rubyタグの data属性にrtタグと同じ内容を入れておきます。

 

CSS

HTMLの方でdata-rubyに記述しておいたルビテキストを、CSS関数で取得して疑似要素のcontentにします。

後はpositionをabsoluteにして、テキストの上に中央寄せで配置するだけです。

ハマった点。。

実はカンタンに実装できたのですが、独自挙動でおなじみの iPhone(ios safari)で問題が出てハマってしまいました。iPhoneは好きで使っていますが、コーディングする立場で見ると「IEの次はお前かいっ!」って感じがしなくもありません。

ちょっと話がそれましたが、改行位置の関係でフリガナを振った要素が行の先頭にきてしまった時だけ、フリガナが上の行の末尾に残ってしまう状況でした。

しばらく格闘した結果、解決した方法は疑似要素をbeforeからafterに替えただけ。なぜか、beforeを使用すると前述のような問題が出ます。どうせpositionはabsoluteだし「どっちでも一緒やろ!」と思っていましたが、とにかくbeforeだとダメでした。

サンプルコードのようにafterで実装すると、iosでも問題は見つかりませんでした。

最後に

どうでしょうか。ここまで読んで下さった方は、もしかしたらCSSでフリガナ、付けてみちゃいました?

綺麗にできましたか?

まっ、私のように細かい事を気にしている人も少ないんでしょうけど、どなたかのお役に立てば幸いです。

関連のある記事

【CSS初心者向け】均等割付を使ってテキストを両端揃えにして綺麗にみせるサンプルコード

和文におすすめのtext-align : justifyを使った両端揃えにして綺麗にみせるサンプルコード

記事を読む

Flexを使用した間隔(マージン)をとった横並びレイアウトの指定方法まとめ【CSS初心者向け】

Flexを使用した間隔(マージン)をとった横並びレイアウトの指定方法まとめ【CSS初心者向け】

記事を読む

CSSでobject-fitを使わずに特定の縦横比に画像をトリミングする方法

CSSでobject-fitを使わずに特定の縦横比に画像をトリミングする方法

記事を読む

游ゴシックがIEで上にずれる時のCSSでの対応方法

游ゴシックがIEで上にずれる時のCSSでの対応方法

記事を読む

埋め込みグーグルマップの縦横比を固定してレスポンシブ対応にする方法

埋め込みグーグルマップの縦横比を固定してレスポンシブ対応にする方法

記事を読む

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

目次へ