knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

ブラウザで表示できる最小フォントサイズ(10px)以下の文字を表示する

ブラウザが表示できる最小フォントサイズは10px

ブラウザは可読性維持のために、CSSで10px未満のフォントサイズを指定しても無視するという機能が備わっています。 以下の例では、決して7pxで表示されることはありません。 後述しますが、zoomを使っても無駄でした。

p {
  font-size: 7px; /* 10pxで表示されてしまう */
}

下記事例はとある図表の一部なのですが、見出しエリアを一行分しか確保していなかったため、あふれてしまいました。

 

f:id:ShinImae:20160108174635j:plain

これは英語を基準にデザインされていたコンテンツを他言語対応する際に起きた問題です。

ロシア語など文字量の多い言語では改行が必要になってしまい、見出し用に確保したエリアからあふれてしまいました。

諸事情によりHTMLを編集することができないため、見出し部分を画像に置き換えることもできませんでした。

そこで文字サイズを小さくすることで対応しようとしたのですが、10px以下の文字サイズでないとタイル状に並べた画像エリアに重なってしまうことが分かりました。

ちなみには、本来想定していたもの(一行の見出し)は次のようなデザインです。

f:id:ShinImae:20160108174648j:plain

先日印刷プレビューについて記事を書かせて頂いたときと同様、ユーザー側の設定で最小文字サイズを変更することができますが、デザインの都合上どうしても極小の文字サイズで表示したい場合があります。

今までは画像に頼らざるを得ませんでしたが、モダンブラウザが普及しつつある最近であれば画像に頼らなくとも実装することができます。

transform:scale を使う

モダンブラウザ(IE9+, GoogleChrome, FireFox, Safari, Opera)であれば、CSS3のプロパティであるtransformを用いて拡縮します。

h2 {
   -moz-transform: scale(0.8);
   -webkit-transform: scale(0.8);
   -o-transform: scale(0.8);
   -ms-transform: scale(0.8);
   transform: scale(0.8);
}

scaleの引数には倍率を指定します。今回は0.8倍になるように指定しています。

ただしこれらの指定のみでは次のようになってしまいます。

f:id:ShinImae:20160108174658j:plain

薄く塗られた領域分だけ、ずれてしまいました。

これは、変形する際の基準点が要素の中心に設定されているためです。

そこで、変形の基準点を左上に変更するため、次のプロパティも変更します。

h2 {
   -moz-transform: scale(0.8);
   -webkit-transform: scale(0.8);
   -o-transform: scale(0.8);
   -ms-transform: scale(0.8);
   transform: scale(0.8);
   -moz-transform-origin: 0px 0px;
   -webkit-transform-origin: 0px 0px;
   -o-transform-origin: 0px 0px;
   -ms-transform-origin: 0px 0px;
   transform-origin: 0px 0px;
}

transform-originは50% 50%がブラウザの持つ初期値です。

基準点の指定方法については、左上を基点として算出します。

background-positionと算出方法は同じです。

こうすることで、意図した表示を実装することができました。 

f:id:ShinImae:20160108174709j:plain

レガシーなIEはzoomを用いたほうが早い

実はIE8以下には、filterプロパティにより独自拡張機能で透過・フィルター・シャドウ・変形などのCSS3ライクな機能がすでに実装されています。

下記のようなものを一度は見たことがあるのではないでしょうか。

filter:progid:DXImageTransform.Microsoft...

www.htmq.com

これにMatrixを渡して拡縮させることは可能なのですが、算出方法がたいへん難解なのでお勧めしません。

コンバートするサイトもあるようですが、むしろ直感的に分かりやすいzoomを指定したほうがよいと個人的には思います。

レガシーなIEならばzoomで文字サイズを拡縮させることが可能だからです。

/* レガシーなIEにのみ効くようなクラスを追加 */
h2.ie-fix {
   zoom: 0.8; 
}

多少サイズ感が変わってしまうので、高さなどを別途調整すれば、CSS3を用いた場合と同様の表示を実装することが可能です。