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

Usage

Include jquery and jquery-quickfit int the header. Then simply call

$('#yourid').quickfit(options) 

on the element you want to fit.

Demo

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

Options

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.

Demo

You can see jquery-quickfit in action here (Resize to see effect).

Performance

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).

License

jquery-quickfit-plugin is licensed under the Apache License 2.0.