親要素のサイズに合わせてフォントサイズを調整する

見出しの文字数が多くて、折り返してしまうことは結構あります。

文字サイズを画面のサイズに合わせて自動的に調整するようなCSSもありますが、文字数によってはうまくいかない時もあります。

親要素の幅にピッタリ入るようにフォントサイズを調整してくれるFittyという便利なjavascriptがありますので、この記事でご紹介します。

この記事で分かること

Fittyとは？
1. 特徴
2. Fittyの使い方
Fittyを適用しても親要素からはみ出る場合
1. ダメな例
2. 回避方法
まとめ

Fittyとは？

親要素の横幅に入るように文字サイズを調整してくれるjavascriptです。

特徴

依存関係なし
簡単なセットアップ
DOM 読み取りおよび書き込み操作をグループ化することによる最適なパフォーマンス
WebFonts で動作します (以下の例を参照)
最小および最大フォントサイズ
マルチラインのサポート
ビューポートが変更されると自動更新される
要素のサブツリーを監視し、それに応じて更新します

GitHub - rikschennink/fitty: ✨ Makes text fit perfectly

✨ Makes text fit perfectly. Contribute to rikschennink/fitty development by creating an account on GitHub.

Fittyの使い方

Fittyを動かすのに必要なファイルはfitty.min.js一つだけです。

文字サイズを調整してほしい要素のセレクタを指定してfittyを呼び出せばいいだけです。

公式の例だと以下のような感じになっています。

<div id="my-element">Hello World</div>

<script src="fitty.min.js"></script>
<script>
    fitty('#my-element');
</script>

Fittyを適用しても親要素からはみ出る場合

親要素にマージンやpaddingが付いていると親要素の幅をうまく計算できないようです。

ダメな例

例えば、h1要素を親要素としてfittyを適用しようとして、spanでくくる場合、親要素（h1）にマージン等が設定されているとうまく動きません。

<h1><span id="my-element">Hello World</span></h1>

<script src="fitty.min.js"></script>
<script>
    fitty('#my-element');
</script>

回避方法

そこで、素の<div>でくくってあげれば期待した動きになります。

<h1><div><span id="my-element">Hello World</span></div></h1>

<script src="fitty.min.js"></script>
<script>
    fitty('#my-element');
</script>

javascriptで自動的にwrapperを追加することもできます。

DOM操作してからfittyを実行しないと、fittyが見つけられないので実行順序に注意してください。

let result = document.getElementsByClassName('sample');

for (let i = 0; i < result.length; i++) {
 // ラッパーで囲む
org_html = result[i].innerHTML;
new_html = "<div class=''><span class='fit'>" + org_html + "</span></div>";
 result[i].innerHTML = new_html;

}