親コンテナにテキストをフィットさせられる「Fitty」

Fitty

Fittyはテキストをスケールアップ、またはスケールダウンして親コンテナに完全にフィットさせることができるJSライブラリです。フレキシブル・レスポンシブなWebサイトには最適な機能ですね。

jQueryなどへの依存性もなし

デモ

デモではコンテナ内にテキストがしっかりフィットした状態で収められています。レスポンシブにもなっているので、画面を縮小・拡大してみるとわかりますが、それに合わせてテキストも最適化されます。

パソコン、スマホ、タブレットと、さまざまなデバイスからの閲覧でもテキストを親コンテナにフィットさせた状態を維持したいという場面にはピッタリのライブラリですね。

ちなみに、jQueryなどへの依存性もなくファイル容量も軽量なのでサクサク動作します。セットアップも簡単なことから、手軽に実装できるのがグッドです。

フォントサイズは、min値・max値ともにオプションから指定することができます。主なオプション項目は、minSize、maxSize、multiLine、observeMutationsです。デフォルト値は、minSizeが16、maxSizeが512、multiLineがtrueです。minSizeとmaxSizeの単位はピクセルになります。

ほかにも、fitty.observeWindowやfitty.observeWindowDelayなどのオプションや、fitといったイベントなども用意されています。

動作は、モダンブラウザ、IE 10+でテスト済みとのこと。また、ライセンスはMITになります。

Fitty

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives