Skip to content

Commit

Permalink
Added minfontsize option (and global setting). Closes #14
Browse files Browse the repository at this point in the history
  • Loading branch information
@zachleat
zachleat committed Dec 7, 2011
1 parent d483d59 commit 0672f62
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 12 deletions.
13 changes: 12 additions & 1 deletion README.markdown
View file
Expand Up @@ -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>

Expand Down
22 changes: 16 additions & 6 deletions bigtext.js
View file
Expand Up @@ -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',
Expand Down Expand Up @@ -58,14 +58,15 @@
var styleId = BigText.getStyleId(id);
$('#' + styleId).remove();
},
generateCss: function(id, linesFontSizes, lineWordSpacings)
generateCss: function(id, linesFontSizes, lineWordSpacings, minFontSizes)
{
var css = [];

BigText.clearCss(id);

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;' : '') +
'}');
Expand All @@ -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
Expand Down Expand Up @@ -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));
});
}
};
Expand Down Expand Up @@ -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')
Expand All @@ -163,6 +165,7 @@
// nor does it respect hundredths of a font-size em.
var fontSizes = [],
wordSpacings = [],
minFontSizes = [],
ratios = [];

$c.find(childSelector).css({
Expand All @@ -176,6 +179,7 @@
if($line.hasClass(BigText.EXEMPT_CLASS)) {
fontSizes.push(null);
ratios.push(null);
minFontSizes.push(false);
return;
}

Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -243,7 +252,8 @@
return {
fontSizes: fontSizes,
wordSpacings: wordSpacings,
ratios: ratios
ratios: ratios,
minFontSizes: minFontSizes
};
}

Expand Down
30 changes: 25 additions & 5 deletions test/bigtextTest.js
View file
Expand Up @@ -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);

Expand All @@ -62,15 +63,20 @@ BigTextTest.prototype.linesTest = function(selector, expectedWidth, options)

$test.bigtext(options);


assertTrue('Class added.', $test.is('.bigtext'));

$lines.each(function(j)
{
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;

Expand All @@ -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();
});
};

Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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

@zachleat
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@davecoffin
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Please sign in to comment.