Chromeのフォントサイズ制限と印刷画面

こんにちは、Webエンジニアのちょうです。

最近A4サイズでも印刷できるように画面スタイルの調整をしてます。ところが、Chromeだけおかしいな挙動がありました。

Chrome

Firefox

9px, 8px, 7pxのところに注目してください。なぜかChromeだと10pxとほぼフォントサイズが一緒になってるように見えないでしょうか。実際はどうなんでしょう。開発者ツールで見ると

あれ、本当に10pxになっています。ちなみに、このような現象はChromeだけあります。Firefox以外に、SafariやEdge、IEまで普通に指定通りのフォントサイズになってます。もしかして、Chromeのバグ？

ありえないと思いながら、Google先生にきいてみました。実はChromeにこういう設定があります。

設定＞Appearance＞Custom fonts

Minimum font sizeは10になってます。

この設定がある限り、CSSで10以下のフォントサイズを指定しても、強制的に10になります。

一般的なサイトなら10px以下のフォントサイズにならないと思いますが、いま自分が作っている画面にA4サイズにものすごく多い内容を入れたいので、Chromeのこの設定になんとかしないといけないです。

一つの方法は transform: scale(?) を利用します。

transformとtransform-originを指定すれば、10px * 0.9 => 9px ように見えます。

でも実際、ユーザーのブラウザがMinmum font sizeをいくらに設定するかはわからないので、簡単に固定値のscaleを使えないです。

Chrome以外のブラウザでscaleが必要ないものも含めてJavaScriptを使って計算したいと思います。

今回A4で印刷したいものはA4が印刷出来る範囲（赤枠）で収まれば問題ないです。内容（金色の枠）の幅が範囲を超えれば、逆算してscaleを指定します。Chrome以外のブラウザは基本超えないので、scaleはしないです。

window.onload = function () {
  // IE9+
  if (!getComputedStyle) return;

  var a4 = document.getElementsByClassName('a4')[0];
  var object = document.getElementsByClassName('my-object')[0];
  var a4ComputedStyle = getComputedStyle(container);
  var containerWidth = a4.offsetWidth - parseFloat(a4ComputedStyle.paddingLeft) * 2;
  var objectWidth = object.offsetWidth;

  if(objectWidth > containerWidth) {
    var ratio = containerWidth / objectWidth;
    object.style.transform = 'scale(' + ratio + ')';
    object.style.transformOrigin = 'top left';
  }
}

要素のpaddingなどを取得するにはgetComputedStyleを使いました。

ところで、なんでChromeにこういう設定があるのか。自分の理解ですが、サイトの文字が小さくて見辛い問題を解決しようとするかもしれません。もう一つですが、この設定は最初からONになってないことが分かりました。設定画面で一回設定すると、小さいなフォントサイズが効かなくなり、そして設定自体が画面から戻せないです（設定のJSONファイルをいじれば消せますが）。

いかがでしょうか。Chromeにこういう設定があることを知ってますか。もしこの設定の原因で画面がおかしくなったら、ぜひscaleの方法を使ってみて下さい。