生涯未熟

プログラミングをちょこちょこと。

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

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


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

f:id:syossan:20140821152253p:plain

やり方

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

FlowType.JS — Responsive web typography at its finest: font-size and line-height based on element width. | Simple Focus


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


gistad40d96168cc1ac7cb22



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


gist74fea743f1f485e78a4c


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

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


gistfa9f9bb9a4b879fd5a50



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


gist72fb000a70c91b796857


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

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


gist717785df6e92b9e0c517

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

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


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


フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)
斉藤 祐也 石本 光司 加藤 賢一 水野 隼登 谷 拓樹 泉水 翔吾 原 一成 平木 聡 佐藤 歩 杉本吉章
技術評論社
売り上げランキング: 2,337