jQuery TextFill

jQuery TextFill resizes text to fit into a container and makes font size as big as possible.

This jQuery plugin was created by Russ Painter around May 2009, beginning with a StackOverflow question. In very early 2012, Yu-Jie Lin helped to move the project to GitHub with version 0.1 and obtained the clearly stated open source licensing from Russ.

Usage

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://jquery-textfill.github.io/jquery-textfill/jquery.textfill.min.js"></script>

The code above uses minified version. By default options, you need to put text inside of <span/>:

<div class='textfill' style='width:100px;height:50px;'>
  <span>The quick brown fox jumps over the lazy dog</span>
</div>

Initialization

$(selector).textfill(options);

For example,

<script>
$(function(){
  $('.textfill').textfill({ maxFontPixels: 36 });
});
</script>

Options

• debug: output debug message to console. Default is false.
• minFontPixels: minimal font size. Default is 4.
• maxFontPixels: sizing up the text as big as possible to this setting. For size <= 0, the text is sized to as big as the container can accommodate. Default is 40.
• innerTag: by default all <span/>s' font size in $(selector) will be changed to fill.
• callback: callback when each element's (innerTag) font size is resized.
• complete: callback when all elements are done.
• widthOnly: only resizing for width restraint, this is intentionally used with CSS white-space: nowrap for header tags.
• explicitWidth and explicitHeight: explicit dimension.

Help and Support

Reporting bug

When report a bug, please reproduce the bug using Gist or jsFiddle as a template. Environment can be different and some may be fine, some may be not. Please make sure you can clearly demonstrate the bug unless the bug is super easy to spot like a < b should be a <= b.

When reproduce a bug, it's important that CSS matches the page where you encounter the bug, it could be crucial that container's and innertag's styles have to be exactly the same.

Please also provide enough information about your system and browser, if necessary, here is a template:

TextFill version:
jQuery version:
Font family:
OS/Version:
Browser/Version:

Since TextFill 0.3.1, there is debugging option, can be enabled by debug: true, you can also include those messages.

If you can not provide a bug reprouction, then please do not report, I could not fix something I can't see.

Contributing

You are very welcome to contribute whatever you can, but please do not:

• Update version number.
• Generate minified file.

These tasks are for releasing, contributors should not take on them.

Before you submit, make sure:

• Coding style generally matches.
• Pass all tests previously have passed.
• Optional Update README if necessary.
• Optional Update CHANGES if worth mentioning.

License

It is licensed under the MIT License, see COPYING file.

Copyright (c) 2012-2013 Yu-Jie Lin
Copyright (c) 2009 Russ Painter