文字列を要素の横幅に合うようにフォントサイズを自動調節する

注意：この記事は2014-08-21に作成されました。現在、FlowType.jsはメンテナンスされていませんので参考にする際にはご注意下さい。

久々にガリゴリとHTMLのフロント部分を触った中で意外と苦戦したとこのメモ。

イメージ的にはこんな感じ。

f:id:syossan:20140821152253p:plain

今回はjQuery プラグインのFlowType.jsを使いました。

ひとまず、FlowType.jsのソースを落としてきて適した場所に配置しましょー。

で、配置後FlowType.jsを使うためにjsを書きます。

あんまり難しいことをやらない場合はこんな感じでOKです。

js記述後は、どの要素に対して自動調節をかけるか指定します。

自動調節される最大のフォントサイズを指定したいなどのオプションにも対応してます。
以下の様な感じでオプション指定が出来ます。

みたいな感じになっています。

この中で一番やらしいのはfontRatioで入力された文字に自動調節をかける場合は以下のようにやるのが良い感じです。

要素に含まれるテキストの文字数を取得してきて、
それをfontRatioの値にする感じです。

やってみると日本語だからなのか、上記の方法だとあまり良い感じに自動調節してくれなかったので、
状況に合わせて fontRatio: $("#hoge").text().length+1 みたいにすると良いかも。

前は自前でJavaScriptをポチポチ書いて実装していたんですが、ライブラリ一発で実現できるとは良い世の中になったものです。
お困りの方は是非参考にしてみてください。

posted with amazlet at 14.08.21

斉藤祐也石本光司加藤賢一水野隼登谷拓樹泉水翔吾原一成平木聡佐藤歩杉本吉章
技術評論社
売り上げランキング: 2,337

生涯未熟