ボックスの幅に合わせてフォントサイズ、行間を自動調整する「FlowType.js」

「FlowType.js」はボックス幅を変更すると、その幅に応じたフォントサイズ、行間に自動調整してくれるjQueryプラグインです。

FlowType.js

flowtype

久しぶりの更新になります。テック系の情報はしっかりウォッチしていたのですが、実際に試してみて記事を書く時間がありませんでした。。。しばらくそんな状態が続きそうですが、とりあえず復活第一弾は使い道がいまいち思い浮かばないこのプラグインをご紹介。
親エレメントの幅を変更すると、それに応じてフォントサイズと行間が自動調整されるというもの。

 

まずはこの状態。

flowtype-demo-1

 

やじるしのスライダーを操作するとこの通り。幅が広がり、応じたサイズになっています。

flowtype-demo-2

 

 

それでは「FlowType.js」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="flowtype.js"></script>

 

HTMLはこのようにマークアップします。この場合のフォントサイズや、行間が依存する親エレメントはbodyタグになります。

<h1>aaaaaaaaaa</h1>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
<h1>aaaaaaaaaa</h1>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
<h1>aaaaaaaaaa</h1>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>

 

CSSはこのように指定します。

body {
 font-size: 18px;
 line-height: 26px;
}
h1,h2,h3,h4,h5,h6,p {
 font-family: inherit;
 font-size: inherit;
}
h1 {
 font-size: 4em;
 line-height: 1em;
}

 

JavaScriptはこのように実装します。親エレメントを指定します。

$('body').flowtype();

 

するとこのように作ることが出来ました。

flowtype-sample-0

幅を広げると、この通り自動調整されます。

flowtype-sample-1

 

まぁ相変わらず使い道が思い浮かばないのですが、この機能を欲している人へこの記事が届きますように。

 

Home > JavaScript > ボックスの幅に合わせてフォントサイズ、行間を自動調整する「FlowType.js」

Return to page top