Web サイトに巨大なテキストを描きたい
Web サイトに巨大なテキストを描きたくなることがある。例えば Web サイトのエラー ページ。主題は 404 や 500 などの HTTP ステータス コードなので、これらをドカンと大きく表示したい。
サイズを巨大化するだけなら CSS で font-size へ大きめの値を指定すればよいのだけど、この方法だと領域の幅によってはテキストがはみ出すこともあってイマイチ。できればテキスト全体が領域に対してフィットするように拡大・縮小してほしい。要は <img> タグに width をパーセント指定したときのような動作を期待している。
Media Query を利用して大きさを段階的に変化させる方法もあるが、それだと定義が増えて指定がとても面倒。そもそも font-size が領域へのフィットを考慮していないため CSS だけでは無理そう。
なら JavaScript ならどうか？ということで探してみたら FitText.js なるものを見つけた。
jQuery プラグインとして実装されている。使用例は以下。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<title>404</title>
<title>404 File not found</title>
<style type="text/css">
body {
background-color: #ecf0f1;
color: #2c3e50;
}
h1 {
margin: 0;
text-align: center;
text-shadow: .04em .04em 0 #ecf0f1, .05em .05em 0 #34495e;
}
p {
margin: 0;
text-align: center;
}
</style>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="./jquery.fittext.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
$( "h1" ).fitText( 0.3 );
$( "p" ).fitText( 1 );
} );
</script>
</head>
<body>
<h1>404</h1>
<p>File not found.</p>
</body>
</html>FitText.js を利用すると jQuery オブジェクトに fitText メソッドが追加される。引数はテキストをフィット表示するためのサイズでテキストを含む要素の幅に対する相対値となる。
デフォルト値は 1 となり、これは幅の 1/10 に相当する。値を小さくするとテキストが拡大され大きくすれば縮小される。GitHub の README.md には The Compressor と説明されている。どうやら圧縮率ということらしい。イマイチ直感的ではない。
実際に表示してみると Web ブラウザのサイズにあわせてテキストが拡大・縮小することを確認できる。
いい感じ。viewport を指定しておけばスマホ上の表示も画面へキッチリ収まってくれる。
ところでフィット表示するテキストはかなり需要あると思うのだけど CSS としてサポートする予定はないのだろうか。私が知らないだけでそういうプロパティが用意されていたりして。調べた限り見つけられなかったが。