msroot / jquery-textfill

Resizing text to fit into container

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

jQuery TextFill

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

Demostration

Example

Usage

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://jquery-textfill.github.com/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).textfile(options);

For example,

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

Options

  • minFontPixels and maxFontPixels: font size range
  • 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.

Help and Support

Please use Issues for reporting bugs or requesting features. Feel free to fork and to open pull request on anything can improve this project, even a typo fix is very welcome.

License

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

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

About

Resizing text to fit into container

License:MIT License