diff --git a/README.md b/README.md index c33880f..dd09811 100644 --- a/README.md +++ b/README.md @@ -8,12 +8,22 @@ Boxfit is a jQuery plugin for resizing text. It will scale text to fit inside a Usage ===== +Include the library after jQuery: + +```html + +``` + +Create a div: + ```html
This is some text
``` +Apply the transformer: + ```javascript $('#my-big-box').boxfit(); ``` @@ -76,6 +86,10 @@ Valid parameters: - *minimum_font_size*: (default 5) minimum font size (changing this may cause some "shrink" scenarios to overflow instead) - *maximum_font_size*: (default null) set to the max font size you want for the element, if none is given there is no maximum +Demo +==== +View the file at demo.html for examples in action. + License ======= diff --git a/demo.html b/demo.html index 2eba738..2b4cf29 100644 --- a/demo.html +++ b/demo.html @@ -5,7 +5,7 @@ - + @@ -14,12 +14,12 @@

Standard example

Word.

@@ -27,12 +27,12 @@

Standard exmaple with too much text

No wrapping allowed. This can sometimes makes things awkward/shrink.

@@ -40,12 +40,12 @@

Text wrapping enabled

this is some cool text I want to fit here

@@ -54,12 +54,12 @@

Max font size

Max font size 36
@@ -67,12 +67,37 @@

Turn off centering and alignment

Inherit alignment settings
+ + +

Multiple at once :)

+ + + + + + + +
Example huge cells
Example huge cells
+ + \ No newline at end of file diff --git a/dist/jquery.boxfit.js b/dist/jquery.boxfit.js index 34ae171..4b91955 100644 --- a/dist/jquery.boxfit.js +++ b/dist/jquery.boxfit.js @@ -5,94 +5,91 @@ To use: $('#target-div').boxFit() Will make the *text* content inside the div (or whatever tag) scale to fit that tag */ +'use strict'; -(function () { - (function ($) { - return $.fn.boxfit = function (options) { - return this.each(function () { - var current_step, inner_span, next_font_size, original_height, original_text, original_width, settings, span; - settings = { - // manually set a width/height if you haven't set one explicitly via CSS - width: null, - height: null, - // the amount to change each time - bigger numbers are faster but fit less perfectly - step_size: 1, - // the number of font size iterations we should step through until we give up - step_limit: 200, - // set to false to NOT align middle (vertically) - align_middle: true, - // set to false this to NOT center the text (horizontally) - align_center: true, - // set to false to allow the big text to wrap (useful for when you want text to fill a big vertical area) - multiline: false, - // minimum font size (changing this may cause some "shrink" scenarios to overflow instead) - minimum_font_size: 5, - // set to a number to limit the maximum font size allowed - maximum_font_size: null - }; - $.extend(settings, options); +(function ($) { + $.fn.boxfit = function (options) { + return this.each(function () { + var current_step, inner_span, next_font_size, original_height, original_text, original_width, settings, span; + settings = { + // manually set a width/height if you haven't set one explicitly via CSS + width: null, + height: null, + // the amount to change each time - bigger numbers are faster but fit less perfectly + step_size: 1, + // the number of font size iterations we should step through until we give up + step_limit: 200, + // set to false to NOT align middle (vertically) + align_middle: true, + // set to false this to NOT center the text (horizontally) + align_center: true, + // set to false to allow the big text to wrap (useful for when you want text to fill a big vertical area) + multiline: false, + // minimum font size (changing this may cause some 'shrink' scenarios to overflow instead) + minimum_font_size: 5, + // set to a number to limit the maximum font size allowed + maximum_font_size: null + }; + $.extend(settings, options); - // take measurements - if (settings.width) { - original_width = settings.width; - $(this).width(original_width + "px"); - } else { - original_width = $(this).width(); + // take measurements + if (settings.width) { + original_width = settings.width; + $(this).width(original_width + 'px'); + } else { + original_width = $(this).width(); + } + if (settings.height) { + original_height = settings.height; + $(this).height(original_height + 'px'); + } else { + original_height = $(this).height(); + } + + if (!original_width || !original_height) { + if (window.console !== null) { + return console.info('Set static height/width on target DIV before using boxfit! Detected width: ' + original_width + ' height: ' + original_height); } - if (settings.height) { - original_height = settings.height; - $(this).height(original_height + "px"); + } else { + if (!settings.multiline) { + $(this).css('white-space', 'nowrap'); + } + original_text = $(this).html(); + if ($('
' + original_text + '
').find('span.boxfitted').length === 0) { + span = $($('').addClass('boxfitted').html(original_text)); + $(this).html(span); } else { - original_height = $(this).height(); + span = $($(this).find('span.boxfitted')[0]); } - if (settings.maxFontSize !== undefined) { - settings.maxFont = true; + current_step = 0; + inner_span = span; + $(this).css('display', 'table'); + inner_span.css('display', 'table-cell'); + if (settings.align_middle) { + inner_span.css('vertical-align', 'middle'); + } + if (settings.align_center) { + $(this).css('text-align', 'center'); + inner_span.css('text-align', 'center'); } - if (!original_width || !original_height) { - if (window.console != null) { - return console.info("Set static height/width on target DIV before using boxfit! Detected width: '" + original_width + "'; height: '" + original_height + "'"); - } - } else { - if (!settings.multiline) { - $(this).css('white-space', 'nowrap'); - } - original_text = $(this).html(); - if ($("
" + original_text + "
").find("span.boxfitted").length === 0) { - span = $($("").addClass("boxfitted").html(original_text)); - $(this).html(span); - } else { - span = $($(this).find('span.boxfitted')[0]); - } - current_step = 0; - inner_span = span; - $(this).css("display", "table"); - inner_span.css("display", "table-cell"); - if (settings.align_middle) { - inner_span.css("vertical-align", "middle"); - } - if (settings.align_center) { - $(this).css("text-align", "center"); - inner_span.css("text-align", "center"); - } - // keep growing the target so long as we haven't exceeded the width or height - inner_span.css("font-size", settings.minimum_font_size); - while ($(this).width() <= original_width && $(this).height() <= original_height) { - if (current_step++ > settings.step_limit) { - break; - } - next_font_size = parseInt(inner_span.css("font-size"), 10); - if (settings.maximum_font_size && next_font_size > settings.maximum_font_size) { - break; - } - inner_span.css("font-size", next_font_size + settings.step_size); + // keep growing the target so long as we haven't exceeded the width or height + inner_span.css('font-size', settings.minimum_font_size); + while ($(this).width() <= original_width && $(this).height() <= original_height) { + if (current_step++ > settings.step_limit) { + break; } - - // go back one step - inner_span.css("font-size", parseInt(inner_span.css("font-size"), 10) - settings.step_size); - return $(this); + next_font_size = parseInt(inner_span.css('font-size'), 10); + if (settings.maximum_font_size && next_font_size > settings.maximum_font_size) { + break; + } + inner_span.css('font-size', next_font_size + settings.step_size); } - }); - }; - })(jQuery); -}).call(this); + + // go back one step + inner_span.css('font-size', parseInt(inner_span.css('font-size'), 10) - settings.step_size); + return $(this); + } + }); + }; +})(jQuery); diff --git a/dist/jquery.boxfit.min.js b/dist/jquery.boxfit.min.js index 65856e1..6726942 100644 --- a/dist/jquery.boxfit.min.js +++ b/dist/jquery.boxfit.min.js @@ -1 +1 @@ -(function(){!function(a){return a.fn.boxfit=function(b){return this.each(function(){var c,d,e,f,g,h,i,j;if(i={width:null,height:null,step_size:1,step_limit:200,align_middle:!0,align_center:!0,multiline:!1,minimum_font_size:5,maximum_font_size:null},a.extend(i,b),i.width?(h=i.width,a(this).width(h+"px")):h=a(this).width(),i.height?(f=i.height,a(this).height(f+"px")):f=a(this).height(),void 0!==i.maxFontSize&&(i.maxFont=!0),h&&f){for(i.multiline||a(this).css("white-space","nowrap"),g=a(this).html(),0===a("
"+g+"
").find("span.boxfitted").length?(j=a(a("").addClass("boxfitted").html(g)),a(this).html(j)):j=a(a(this).find("span.boxfitted")[0]),c=0,d=j,a(this).css("display","table"),d.css("display","table-cell"),i.align_middle&&d.css("vertical-align","middle"),i.align_center&&(a(this).css("text-align","center"),d.css("text-align","center")),d.css("font-size",i.minimum_font_size);a(this).width()<=h&&a(this).height()<=f&&!(c++>i.step_limit)&&(e=parseInt(d.css("font-size"),10),!(i.maximum_font_size&&e>i.maximum_font_size));)d.css("font-size",e+i.step_size);return d.css("font-size",parseInt(d.css("font-size"),10)-i.step_size),a(this)}return null!=window.console?console.info("Set static height/width on target DIV before using boxfit! Detected width: '"+h+"'; height: '"+f+"'"):void 0})}}(jQuery)}).call(this); \ No newline at end of file +"use strict";!function(a){a.fn.boxfit=function(b){return this.each(function(){var c,d,e,f,g,h,i,j;if(i={width:null,height:null,step_size:1,step_limit:200,align_middle:!0,align_center:!0,multiline:!1,minimum_font_size:5,maximum_font_size:null},a.extend(i,b),i.width?(h=i.width,a(this).width(h+"px")):h=a(this).width(),i.height?(f=i.height,a(this).height(f+"px")):f=a(this).height(),h&&f){for(i.multiline||a(this).css("white-space","nowrap"),g=a(this).html(),0===a("
"+g+"
").find("span.boxfitted").length?(j=a(a("").addClass("boxfitted").html(g)),a(this).html(j)):j=a(a(this).find("span.boxfitted")[0]),c=0,d=j,a(this).css("display","table"),d.css("display","table-cell"),i.align_middle&&d.css("vertical-align","middle"),i.align_center&&(a(this).css("text-align","center"),d.css("text-align","center")),d.css("font-size",i.minimum_font_size);a(this).width()<=h&&a(this).height()<=f&&!(c++>i.step_limit)&&(e=parseInt(d.css("font-size"),10),!(i.maximum_font_size&&e>i.maximum_font_size));)d.css("font-size",e+i.step_size);return d.css("font-size",parseInt(d.css("font-size"),10)-i.step_size),a(this)}return null!==window.console?console.info("Set static height/width on target DIV before using boxfit! Detected width: "+h+" height: "+f):void 0})}}(jQuery); \ No newline at end of file