Google+ Tools
Make Google+ profile picture
Make Google plus banners for profile
Create and share your Google Plus profile banners.

Profile image for mrk studios burnandbass on July 4, 2012

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+

save in jquery.fitText.js

usage:

html --> Hello, this {is} span

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

Language
jQuery
Tags

jquery.fitText.js -> Fit text in div


/*	
	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 get_initial_font_size(container) {
				if (container.css('fontSize')) {
					var check = container.css('fontSize').match(/[\d]+px/);
					if (check.length){
						return parseInt(check[0]);
					}
				}
				return 1;
			}

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

Comments

blog comments powered by Disqus