Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added minfontsize option (and global setting). Closes #14

  • Loading branch information...
commit 0672f62b056fbd938916297fa84c0044dedef705 1 parent d483d59
Zach Leatherman authored
Showing with 53 additions and 12 deletions.
  1. +12 −1 README.markdown
  2. +16 −6 bigtext.js
  3. +25 −5 test/bigtextTest.js
13 README.markdown
View
@@ -95,7 +95,18 @@ Examples
</div>
<script>
$('#bigtext').bigtext({
- maxfontsize: 60 // default is 48 (in ems)
+ maxfontsize: 60 // default is 48 (in px)
+ });
+ </script>
+
+### Adding a default min font size
+
+ <div id="bigtext">
+ <div>This is a super long line that will probably be resized to epically small proportions. We need a minimum font size!</div>
+ </div>
+ <script>
+ $('#bigtext').bigtext({
+ minfontsize: 16 // default is null
});
</script>
22 bigtext.js
View
@@ -5,7 +5,7 @@
oldBigText = window.BigText,
oldjQueryMethod = $.fn.bigtext,
BigText = {
- STARTING_PX_FONT_SIZE: 32,
+ DEFAULT_MIN_FONT_SIZE_PX: null,
DEFAULT_MAX_FONT_SIZE_PX: 528,
GLOBAL_STYLE_ID: 'bigtext-style',
STYLE_ID: 'bigtext-id',
@@ -58,7 +58,7 @@
var styleId = BigText.getStyleId(id);
$('#' + styleId).remove();
},
- generateCss: function(id, linesFontSizes, lineWordSpacings)
+ generateCss: function(id, linesFontSizes, lineWordSpacings, minFontSizes)
{
var css = [];
@@ -66,6 +66,7 @@
for(var j=0, k=linesFontSizes.length; j<k; j++) {
css.push('#' + id + ' .' + BigText.LINE_CLASS_PREFIX + j + ' {' +
+ (minFontSizes[j] ? ' white-space: normal;' : '') +
(linesFontSizes[j] ? ' font-size: ' + linesFontSizes[j] + 'px;' : '') +
(lineWordSpacings[j] ? ' word-spacing: ' + lineWordSpacings[j] + 'px;' : '') +
'}');
@@ -78,6 +79,7 @@
BigText.init();
options = $.extend({
+ minfontsize: BigText.DEFAULT_MIN_FONT_SIZE_PX,
maxfontsize: BigText.DEFAULT_MAX_FONT_SIZE_PX,
childSelector: '',
resize: true
@@ -113,8 +115,8 @@
BigText.LINE_CLASS_PREFIX + lineNumber].join(' ');
});
- var sizes = calculateSizes($t, childSelector, maxWidth, options.maxfontsize);
- $headCache.append(BigText.generateCss(id, sizes.fontSizes, sizes.wordSpacings));
+ var sizes = calculateSizes($t, childSelector, maxWidth, options.maxfontsize, options.minfontsize);
+ $headCache.append(BigText.generateCss(id, sizes.fontSizes, sizes.wordSpacings, sizes.minFontSizes));
});
}
};
@@ -145,7 +147,7 @@
return false;
}
- function calculateSizes($t, childSelector, maxWidth, maxFontSize)
+ function calculateSizes($t, childSelector, maxWidth, maxFontSize, minFontSize)
{
var $c = $t.clone(true)
.addClass('bigtext-cloned')
@@ -163,6 +165,7 @@
// nor does it respect hundredths of a font-size em.
var fontSizes = [],
wordSpacings = [],
+ minFontSizes = [],
ratios = [];
$c.find(childSelector).css({
@@ -176,6 +179,7 @@
if($line.hasClass(BigText.EXEMPT_CLASS)) {
fontSizes.push(null);
ratios.push(null);
+ minFontSizes.push(false);
return;
}
@@ -209,8 +213,13 @@
if(newFontSize > maxFontSize) {
fontSizes.push(maxFontSize);
+ minFontSizes.push(false);
+ } else if(!!minFontSize && newFontSize < minFontSize) {
+ fontSizes.push(minFontSize);
+ minFontSizes.push(true);
} else {
fontSizes.push(newFontSize);
+ minFontSizes.push(false);
}
}).each(function(lineNumber) {
var $line = $(this),
@@ -243,7 +252,8 @@
return {
fontSizes: fontSizes,
wordSpacings: wordSpacings,
- ratios: ratios
+ ratios: ratios,
+ minFontSizes: minFontSizes
};
}
30 test/bigtextTest.js
View
@@ -50,7 +50,8 @@ BigTextTest.prototype.linesTest = function(selector, expectedWidth, options)
maxWidth = expectedWidth + tolerance,
options = options || {},
$test = $(selector),
- $lines = $test.find(options.childSelector || '> *');
+ $lines = $test.find(options.childSelector || '> *'),
+ startingFontSize = parseInt($lines.eq(0).css('font-size'), 10);
this.init.call($lines);
@@ -62,6 +63,7 @@ BigTextTest.prototype.linesTest = function(selector, expectedWidth, options)
$test.bigtext(options);
+
assertTrue('Class added.', $test.is('.bigtext'));
$lines.each(function(j)
@@ -69,8 +71,12 @@ BigTextTest.prototype.linesTest = function(selector, expectedWidth, options)
var $t = $(this),
width = $t.width(),
height = $t.height(),
- fontSize = parseInt($t.css('font-size'), 10),
- expectedHeight = $('<div>A</div>').css('font-size', fontSize).appendTo(document.body).height(),
+ fontSize = parseFloat($t.css('font-size')),
+ $heightElement = $('<div>A</div>').css({
+ 'font-size': fontSize,
+ position: 'absolute'
+ }).appendTo(document.body),
+ expectedHeight = $heightElement.height(),
minHeight = expectedHeight - tolerance,
maxHeight = expectedHeight + tolerance;
@@ -80,10 +86,12 @@ BigTextTest.prototype.linesTest = function(selector, expectedWidth, options)
var defaultDocumentFontSize = parseInt($('<div/>').appendTo(document.body).css('font-size'), 10);
assertEquals('Line ' + j + ' Font size must be unchanged', defaultDocumentFontSize, fontSize);
} else {
- assertTrue('Line ' + j + ' Font size must be larger than the starting pixel size', fontSize > BigText.STARTING_PX_FONT_SIZE);
+ assertTrue('Line ' + j + ' Font size must be larger than the starting pixel size', fontSize > startingFontSize);
assertTrue('Line ' + j + ' width should be about ' + expectedWidth + 'px (' + width + ')', minWidth < width && width < maxWidth);
assertTrue('Line ' + j + ' height should be about ' + expectedHeight + 'px (' + minHeight + ' < ' + height + ' < ' + maxHeight + ')', minHeight < height && height < maxHeight);
}
+
+ $heightElement.remove();
});
};
@@ -156,9 +164,10 @@ BigTextTest.prototype.testMaxFontSize = function()
BigTextTest.prototype.testUnbrokenSingleWord = function()
{
$(document.body).append('<div id="test" style="width:300px"><div>This</div></div>');
+ var startingFontSize = parseInt($('#test > div').css('font-size'), 10);
$('#test').bigtext();
- assertTrue('Font size must be larger than the starting pixel size.', parseInt($('#test > div').css('font-size'), 10) > BigText.STARTING_PX_FONT_SIZE);
+ assertTrue('Font size must be larger than the starting pixel size.', parseInt($('#test > div').css('font-size'), 10) > startingFontSize);
};
BigTextTest.prototype.testTwoLinesButOneExempt = function()
@@ -204,4 +213,15 @@ BigTextTest.prototype.testNoConflict = function()
childFontSize = $('#test > div').css('font-size');
assertNotEquals('Font size must not equal the default.', defaultDocumentFontSize, childFontSize);
+};
+
+BigTextTest.prototype.testMinFontSize = function()
+{
+ $(document.body).append('<div id="test" style="width:600px"><div>This is a super long line that will probably be too long for this single line. This is a super long line that will probably be too long for this single line.</div></div>');
+ $('#test').bigtext({
+ minfontsize: 16
+ });
+
+ assertEquals('Font size should equal the minimum.', '16px', $('#test > div').css('font-size'));
+ assertEquals('When minimum is set, word wrap should re-enable.', 'normal', $('#test > div').css('white-space'));
};

2 comments on commit 0672f62

Zach Leatherman
Owner

Thanks!

Dave Coffin

This is awesome. THANK YOU. Exactly what I needed!

Please sign in to comment.
Something went wrong with that request. Please try again.