HTMLでルビ（rubyタグ）をふるとき、文字サイズの調整あれこれ

HTMLでルビの記述

おさらいも兼ねて、HTMLでルビを振る方法から。

北海道釧路市<ruby>大楽毛<rp>(</rp><rt>おたのしけ</rt><rp>)</rp></ruby>

Demo

1. rubyタグでルビを振りたい文字を囲む
2. rubyタグ内、該当文字の後にrtタグを配置し中にルビを記述
3. rpタグはルビ非対応ブラウザにて「ここはルビですよ」と示すためのタグ。基本的にカッコが入っている。ルビ対応ブラウザでは表示されない。アクセシビリティ的にはあった方がいいけど省略可

各ブラウザでのルビの表示

デフォルト表示

ここでもう一度デモです。今度は文字サイズをバリエーション展開させて、大きいサイズ、標準サイズ、小さいサイズと並べてみます。

Demo

画面キャプチャ

ChromeおよびEdge（2020年1月にChromiumベースに切り替わっています）の場合、ルビの文字サイズがある程度以下にならないことがお分かりでしょうか？

ChromeのユーザーエージェントCSS

ruby > rt {
  display: block;
  font-size: 50%;
  text-align: start;
}

この記述はChromeのユーザーエージェントスタイルシート（各ブラウザのデフォルトの表示用CSS）で、ルビの文字サイズは元の文字サイズの50%となっています。
それなのに、CSSでfont-size: 40%;にしようがfont-size: 6px;にしようが!importantを付けようが、テコでも文字サイズはこれ以上小さくなりません。

実はChromeは「最小フォント サイズ」というものがあり、それ以下の文字サイズにはならない仕様になっています。試しに環境設定 ＞ デザイン ＞ フォントをカスタマイズから「最小フォント サイズ」を小さくしてみてください。ルビの文字サイズも小さくなるはずです。

上記画像はChromeのものですが、Edgeの場合はブラウザ右上の「…」から設定 ＞ 外観 ＞ 一番下のフォントのカスタマイズから「最小フォント サイズ」の調整ができます。

画面キャプチャ

小さくなりました。
しかし、閲覧者各自のChromeの設定を変更してもらうのは現実的ではありません。

アクセシビリティ的に最小フォントサイズに準拠した方が良いと思うのでこの記事はここでお終いにしたいところですが、ディレクターやデザイナーに「直して」と言われたら修正対応するのがコーダーの仕事です。調整しましょう。

CSSで調整してもChromeでルビが小さくできないとき

「できないとき」と見出しに付けていますが、実はできるんです。
Chromeではfont-sizeは「最小フォント サイズ」に影響を受けますが、zoomプロパティでのサイズ調整は効くのです。

実験その1：zoomプロパティをあててみる

ここでは.ruby-testというclass名で進めます。
font-sizeを100%に戻して、代わりにzoomで0.5にサイズを指定します。

ruby.ruby-test > rt {
  font-size: 100%;
  zoom: 0.5;
}

Demo

画面キャプチャ

これでChromeとEdgeでもルビの文字サイズをコントロールできるようになりました。ーーが、あれをすればこれが起きる……！ CSS調整あるあるです。

FirefoxとIE11ではfont-size: 100%;だけが適応されて、異様に大きなルビになってしまいました。
Safariでは逆に前述のデフォルトのChromeのような結果になりました。

今回の原因はFirefoxとzoomプロパティが非対応、IE11は検索したけど不明、Safariはユーザーエージェントスタイルシートで指定しているfont-size: -webkit-ruby-text;が打ち消されたことで影響が出てしまったようです。

実験その2： 実験その1で表示崩れしたブラウザにCSSハックで対応

Firefox、IE11、Safariそれぞれに適応されるCSSハックで対応します。対応するというか、それぞれ元のユーザーエージェントスタイルシートの指定に戻す形です。今度はclassを.ruby-test02にして、

ruby.ruby-test02 > rt {
  font-size: 100%;
  zoom: 0.5;
}
/*Firefox表示用のCSS*/
@-moz-document url-prefix(){
  ruby.ruby-test02 > rt {
    font-size: 50%;
  }
}
/* IE11表示用のCSS　*/
_:-ms-fullscreen, :root ruby.ruby-test02 > rt {
  font-size: 50%;
}
/* Safari表示用のCSS　*/
_::-webkit-full-page-media, _:future, :root ruby.ruby-test02 > rt {
  zoom: 1;
  font-size: -webkit-ruby-text;
}

Demo

画面キャプチャ

大丈夫ですね！
しかし、CSSの記述が冗長になってしまったのが気になります。iOSおよびAndroidの各ブラウザ（細かく検証する企業では各ブラウザの各バージョンまで！）での表示チェック、将来的にいずれかのブラウザが仕様変更したら表示崩れする可能性もあります。素直にChromeとEdgeだけにCSSハックでzoomプロパティが効くようにした方がスムーズでは??（後から修正対応していったときにとにかく急いで対応してグチャグチャになってくの、これもCSS調整あるあるですね💧）

実験その3： ChromeとEdgeにzoomプロパティが効くようCSSハックで対応

気を取り直して、素直にデフォルトのものにChromeとEdge（Chromiumエンジン）だけにCSSハックでzoomプロパティをかけます。今度のclassは.ruby-test03です。

/* Edge(Chromium)表示用のCSS　*/
_:lang(x)::-ms-, ruby.ruby-test03 > rt {
  font-size: 100%;
  zoom: 0.5;
}
/* Chrome表示用のCSS　*/
_:lang(x)::-internal-media-controls-overlay-cast-button, ruby.ruby-test03 > rt {
  font-size: 100%;
  zoom: 0.5;
}

Demo

画面キャプチャ

PCの主要ブラウザでは大丈夫ですね！

おまけ

本文とルビの位置やmarginの調整をしたい場合は、下記サイトをご参照ください。