jquery-quickfit-plugin is a quick and dirty solution to fit html text into its surrounding container.
jquery-quickfit is for you, if:
- you want to resize multiple items in a short amount of time
- you want good performance when you resize an item multiple times (e.g., on window resize)
- you want to autofit a single line of text
jquery-quickfit is not for you, if:
- you need to fit a single text once
- you want to fit a paragraph of text, spanning multiple lines
Include jquery and jquery-quickfit int the header. Then simply call
$('#yourid').quickfit(options) on the element you want to fit.
Html:
<div id="quickfit">Text to fit*</div>Javascript:
<script src=".../jquery.min.js" type="text/javascript" />
<script src="../script/jquery.quickfit.js" type="text/javascript" />
<script type="text/javascript">
$(function() {
$('#quickfit').quickfit();
});
</script>- in order to work correctly, this line should be styled with the white-space:nowrap option
| Name | Type | Default | Description |
|---|---|---|---|
| min | integer | 8 | The minimum font-size the element can be sized to |
| max | integer | 12 | The maximum font-size the element can be sized to |
| truncate | boolean | false | Flag, whether the text should be truncated (shortened with an appended '...') if it doesn't fit with the minimum size. |
| tolerance | float | 0.02 | Adds a padding to the calculation. The higher the value, the smaller the chance the text will overlap its container. This value should be fiddled with, when encountering problems on a certain font. |
| width | int | null | You can default quickfit a size to which the text should be fitted to. Handy when fitting a lot of elements with an equal width. |
Instead of using the shrink-to-fit-approach or the more performant shrink-by-ratio-variant, which brings perfect results, but causes frequent re-layouts and thus is rather slow when dealing with multiple resizes, quickfit calculates an onetime size invariant estimate for a text length and uses this to guesstimate the best font-size without requiring a relayout on a subsequent fit.
You can see jquery-quickfit in action here (Resize to see effect).
Rule of the thumb testing has shown quickfit about equally performant against the shrink-to-fit-approach, when resizing a single item once. When resizing multiple items, or a single item multiple times, jquery-quickfit outperforms shrink-to-fit significantly, see e.g., jsperf (the test would be very similar to a window resize).
jquery-quickfit-plugin is licensed under the Apache License 2.0.