【JavaScript】親要素の大きさにテキストをフィットさせる［Fitty］の使い方

JavaScript - Fitty

今回は親要素の大きさに合わせてテキストをフィットさせるJavaScriptライブラリ［Fitty］の使い方を紹介します。

レスポンシブにも対応して、親要素とテキストのサイズを自動で計算して大きさを調整してくれます。

百聞は一見に如かず。
まずはサンプルをご覧ください。

SAMPLE : https://on-ze.com/demo/js-fitty/

同じことをCSSのみで実装するとなると、white-space:nowrap;や、font-sizeの単位を「vw」にするなどのテクニックを駆使して調整していくことになります。
その点、この［Fitty］を使えば複雑な計算を自動で処理してくれるのでスゴく便利です。

以下、実装方法を詳しく紹介していきます。

［Fitty］の実装方法

最初に必要なファイルをダウンロードします。
下記サイトより「Clone or download」→「Download ZIP」とクリックするとダウンロードがはじまります。

Download : https://github.com/rikschennink/fitty

いくつかのファイルが梱包されていますが、実際に使うのは「fitty.min.js」という本体ファイルのみ。
たった1つのファイルで、しかも容量も4KB未満と超軽量です。

このファイルをHTMLの<body>要素の最下部で読み込みましょう。

<body>
...
<script src="fitty.min.js"></script>
</body>

続いて［Fitty］を効かせるテキストを作ります。

<div id="sample">Hello World</div>

ここでは仮に親要素に「id="sample"」と名付けました。

最後に［Fitty］を初期化するコードを記述します。

<script>
	fitty('#sample');
</script>

これは先ほど読み込んだFittyの本体ファイルの下に記述します。

すべてのコードをまとめると次のとおり。

<div id="sample">Hello World</div>
<script src="fitty.min.js"></script>
<script>
	fitty('#sample');
</script>

これで作業完了ですが、スタイルシート側で親要素の大きさを指定しておくことを忘れずに。

SAMPLE : https://on-ze.com/demo/js-fitty/

さて。
続いては［Fitty］に用意されているオプション設定を説明していきます。

基本的なオプションは次の4つ。

オプション名称	初期値	説明
minSize	16	最小のフォントサイズ。単位はピクセル。
maxSize	512	最大のフォントサイズ。単位はピクセル。
multiLine	true	最小フォントサイズを使用する場合に改行する。
observeMutations	MutationObserverInit	各要素をモニタリングして、サイズの変更があった場合にメソッド「MutationObserverInit」を使う。

各オプションを指定したい場合は次のように引数として記述します。

fitty('#sample', {
	minSize: 12,
	maxSize: 300
});

他にも「observeMutations」等を利用した細かい設定が可能ですが、より詳しくは公式サイトよりどうぞ。

GitHub : https://github.com/rikschennink/fitty