Posted By

burnandbass on 07/04/12

Tagged

Versions (?)

Last Edited at 07/04/12 11:23pm

Statistics

Viewed 530 times

Favorited by 0 user(s)

Related snippets

jquery.fitText.js -> Fit text in div

/ Published in: jQuery

This is simple plugin, that will allow you to fit text in a div - the text will become the largest/smallest possible to fill all the div. It have self-explanatory options you can pass. The shrinking engine is Based on Nikolay Kuchumov script (https://github.com/kuchumovn/jquery-full-house), some mofications by Chrysto Panayotov (Bassta) -> Allow to center the text, add "spans" with different color, red border to see the div, etc. Require jQuery 1.7.1+ . Set width and height of the container.

save in jquery.fitText.js

usage:

html --> Hello, this {is} span

JS(onLoad) --> $("#mydiv").fillText({border: true, spanColor:"green", textAlign:"center", verticalAlign:"middle"});

Highlighted TextExpand

/*	
	Based on Nikolay Kuchumov script (https://github.com/kuchumovn/jquery-full-house)
	
	Author: Chrysto Panayotov ( burnandbass@gmail.com )
	
	VERSION 			1.01

Options:
	@fontSizeIncrementStep 		[number] 			-> internal, for each step 
	@addSpans					[true/false] 		-> to add or not spans
	@spanColor					[hex/string] 		-> color of the spans
	@border						[true/false] 		-> to show or not red border
	@textAlign					[left/center/right]	-> horizontal align
	@verticalAlign				[top/middle/bottom]	-> vertical align of the text
	@lineHeight					[pixels/ems]		-> the line height
	@collapse: 					[true/false]		-> to colapse height or not

Usage:
	
	span - add different color.
	<div>and {this is span} text
	$("myDiv").fillText({border: true, spanColor:"black", textAlign:"center", verticalAlign:"middle" });

(function($){
	var Algorythm = {
				Interface: function(options){
					// called if the 'x' font size is too big, and the text with this font size doesn't fit the container
					this.too_big = function(x) {};
					// called if the text with font size 'x' fits the container (e.g. font_size=0 fits any container)
					this.fits = function(x) {};
					// this.retry(x) function will be set automatically
				},

Binary: function(options){
					var largest_fit;
					var minimum_too_big;

var step = options.fontSizeIncrementStep || 10;

this.too_big = function(x){
						minimum_too_big = x;

if (largest_fit){
						if (largest_fit === x - 1){
							return largest_fit;
						}
						return this.retry(largest_fit + (x - largest_fit) / 2);
					} else {
						if (x === 1){
							return 1
						}	
						return this.retry(x - step);
						}
					}

this.fits = function(x){
						largest_fit = x;

if (minimum_too_big){
						if (minimum_too_big === x + 1){
							return x;
						}
							return this.retry(x + (minimum_too_big - x) / 2);
						} else {
							return this.retry(x + step);
						}
					}
				}
			}

function find_max_font_size(container, options){
				var initial_font_size = get_initial_font_size(container);
				container.css('fontSize', 0);

var html = container.html();

container.empty();

var overflow = container.css('overflow');
				container.css('overflow', 'hidden');

var sandbox = $('<span/>').html(html).appendTo(container);

var available_height = container[0].scrollHeight;
				var available_width = container[0].scrollWidth;

function try_font_size(font_size){
					container.css({ fontSize: font_size + 'px' });
				}

function recursive_search(algorythm, start_with){
					var find_max_font_size_starting_with = function(font_size){
						font_size = Math.ceil(font_size);
						if (font_size < 1){
							font_size = 1;
						}
							try_font_size(font_size);

var current_height = container[0].scrollHeight;
							var current_width = container[0].scrollWidth;

var height_proportion = current_height / available_height;
							var width_proportion = current_width / available_width;

if (height_proportion > 1 || width_proportion > 1){
								return algorythm.too_big(font_size);
								} else {
								return algorythm.fits(font_size);
								}
							}

algorythm.retry = find_max_font_size_starting_with;
							return find_max_font_size_starting_with(start_with);
						}

options.algorythm = options.algorythm || 'Binary';
					var algorythm = new Algorythm[options.algorythm](options);

var font_size = recursive_search(algorythm, initial_font_size);

container.css('overflow', overflow);
					container.empty().html(html);

return font_size;
				}

$.fn.fillText = function(options){

var defaults = { 
						fontSizeIncrementStep:      "5", 
						addSpans:     				true, 
						spanColor:  				"#000000", 
						border:     				false,
						textAlign: 					"center",
						verticalAlign: 				"middle",
						lineHeight:					"0.9em",
						collapse:					false
	    			};

var options = $.extend({}, defaults, options);

return $(this).each(function(){
						var container = $(this);
						container.css({ 
							fontSize: find_max_font_size(container, options) + 'px', 
							lineHeight: options.lineHeight,
							display: "table"
						}).wrapInner('<div style="text-align:' 
							+ options.textAlign 
							+'; display: table-cell; vertical-align: ' 
							+ options.verticalAlign 
							+';" />'
						);

//collapse - usefull for headlines
						if (options.collapse){
							container.css("height", "auto");
						}

//special for wrap 
						if (options.addSpans){
							container.html( container.html().replace("{", "<span style='color: " 
								+ options.spanColor 
								+ "'>").replace("}", "</span>") 
							);
						}

//adds border to see the boxes
						if (options.border){
							container.css("border", "1px solid red");
						}
					})
				}
})(jQuery)

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.