We’ve released the first version of jQDynamicFontSize – a jQuery Plugin for dynamically adjusting the font size of an element to fit a number of lines. The plugin was written to allow us to resize a headline to make the headline fit on one line, sacrificing text size to avoid breaking text into two lines.
To paraphrase from the INSTALL file:
In a production system, use jquery-dynamicfontsize.min.js. For debugging
or developing, use jquery-dynamicfontsize.js.
Usage:
Include a reference to the script after loading jQuery:
<script src="jquery-dynamicfontsize.min.js"></script>
Then call:
$("#idOfElement").dynamicFontSize();
This will attempt to scale the font size of the element down with 10% in
3 iterations, stopping when a value has been found that allows the element
to only use one text line.
$("h1").dynamicFontSize();
This will attempt to scale all h1 elements. Other jQuery selectors will also
work.
Options supported:
* squeezeFactor: A float value that will be used as the squeeze factor
for each step. 0.1 means that we'll attempt to scale the font-size down
10% for each iteration. Defaults to 0.1.
* lines: The number of lines we'll attempt to fit the text to. When the
text fits this (or a smaller) amount of lines, we'll stop scaling.
Defaults to 1.
* tries: The number of iterations we'll try before we give up and go with
the last result. Defaults to 3.
We do currently not care for the line-height of elements, so if you’re feeling slightly hackish tonight, feel free to add the required piece of javascript goodness. Any suitable patches are welcome!