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

Name	Description	Default
debug	output debug message to console	false
minFontPixels	minimal font size	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	40
innerTag	the element tag to resize, select by $(innerTag + ':visible:first', container)	span
success	callback when a resizing is successful
fail	callback when a resizing is failed
complete	callback when all elements are done
widthOnly	only resizing for width restraint; to be used in conjunction with CSS white-space: nowrap applied to the container tag
explicitWidth	explicit width
explicitHeight	explicit height

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