A quick and dirty way to fit your text
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
on the element you want to fit.
<div id="quickfit">Text to fit*</div>
- in order to work correctly, this line should be styled with the white-space:nowrap option
|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.|
How it works
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.