jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div class="textfill" style="width:100px; height:50px; font-size: 10px;">
<span>
My Text Here
</span>
</div>
// by GeekyMonkey
$.fn.textfill1 = function(options) {
var fontSize = options.maxFontPixels;
var ourText = $('span:visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
return this;
}
// by Alexander Sandstorm
$.fn.textfill2 = function(options) {
options = jQuery.extend({
maxFontSize: null,
minFontSize: 8,
step: 1
}, options);
return this.each(function() {
var innerElements = $(this).children(':visible'),
fontSize = options.maxFontSize || innerElements.css("font-size"), // use current font-size by default
maxHeight = $(this).height(),
maxWidth = $(this).width(),
innerHeight,
innerWidth;
do {
innerElements.css('font-size', fontSize);
// use the combined height of all children, eg. multiple <p> elements.
innerHeight = $.map(innerElements, function(e) {
return $(e).outerHeight();
}).reduce(function(p, c) {
return p + c;
}, 0);
innerWidth = innerElements.outerWidth(); // assumes that all inner elements have the same width
fontSize = fontSize - options.step;
} while ((innerHeight > maxHeight || innerWidth > maxWidth) && fontSize > options.minFontSize);
});
};
// by mekwall
$.fn.textfill3 = function(maxFontSize) {
maxFontSize = parseInt(maxFontSize, 10);
return this.each(function() {
var ourText = $("span", this),
parent = ourText.parent(),
maxHeight = parent.height(),
maxWidth = parent.width(),
fontSize = parseInt(ourText.css("fontSize"), 10),
multiplier = maxWidth / ourText.width(),
newSize = (fontSize * (multiplier - 0.1));
ourText.css("fontSize", (maxFontSize > 0 && newSize > maxFontSize) ? maxFontSize : newSize);
});
}
$.fn.textfill4 = function(options) {
var defaults = {
debug: false,
maxFontPixels: 40,
minFontPixels: 4,
innerTag: 'span',
widthOnly: false,
success: null, // callback when a resizing is done
callback: null, // callback when a resizing is done (deprecated, use success)
fail: null, // callback when a resizing is failed
complete: null, // callback when all is done
explicitWidth: null,
explicitHeight: null
};
var Opts = $.extend(defaults, options);
function _debug() {
if (!Opts.debug
|| typeof console == 'undefined'
|| typeof console.debug == 'undefined') {
return;
}
console.debug.apply(console, arguments);
}
function _warn() {
if (typeof console == 'undefined'
|| typeof console.warn == 'undefined') {
return;
}
console.warn.apply(console, arguments);
}
function _debug_sizing(prefix, ourText, maxHeight, maxWidth, minFontPixels, maxFontPixels) {
function _m(v1, v2) {
var marker = ' / ';
if (v1 > v2) {
marker = ' > ';
} else if (v1 == v2) {
marker = ' = ';
}
return marker;
}
_debug(
prefix +
'font: ' + ourText.css('font-size') +
', H: ' + ourText.height() + _m(ourText.height(), maxHeight) + maxHeight +
', W: ' + ourText.width() + _m(ourText.width() , maxWidth) + maxWidth +
', minFontPixels: ' + minFontPixels +
', maxFontPixels: ' + maxFontPixels
);
}
function _sizing(prefix, ourText, func, max, maxHeight, maxWidth, minFontPixels, maxFontPixels) {
_debug_sizing(prefix + ': ', ourText, maxHeight, maxWidth, minFontPixels, maxFontPixels);
while (minFontPixels < maxFontPixels - 1) {
var fontSize = Math.floor((minFontPixels + maxFontPixels) / 2)
ourText.css('font-size', fontSize);
if (func.call(ourText) <= max) {
minFontPixels = fontSize;
if (func.call(ourText) == max) {
break;
}
} else {
maxFontPixels = fontSize;
}
_debug_sizing(prefix + ': ', ourText, maxHeight, maxWidth, minFontPixels, maxFontPixels);
}
ourText.css('font-size', maxFontPixels);
if (func.call(ourText) <= max) {
minFontPixels = maxFontPixels;
_debug_sizing(prefix + '* ', ourText, maxHeight, maxWidth, minFontPixels, maxFontPixels);
}
return minFontPixels;
}
this.each(function() {
var ourText = $(Opts.innerTag + ':visible:first', this);
// Use explicit dimensions when specified
var maxHeight = Opts.explicitHeight || $(this).height();
var maxWidth = Opts.explicitWidth || $(this).width();
var oldFontSize = ourText.css('font-size');
var fontSize;
_debug('Opts: ', Opts);
_debug('Vars:' +
' maxHeight: ' + maxHeight +
', maxWidth: ' + maxWidth
);
var minFontPixels = Opts.minFontPixels;
var maxFontPixels = Opts.maxFontPixels <= 0 ? maxHeight : Opts.maxFontPixels;
var HfontSize = undefined;
if (!Opts.widthOnly) {
HfontSize = _sizing('H', ourText, $.fn.height, maxHeight, maxHeight, maxWidth, minFontPixels, maxFontPixels);
}
var WfontSize = _sizing('W', ourText, $.fn.width, maxWidth, maxHeight, maxWidth, minFontPixels, maxFontPixels);
if (Opts.widthOnly) {
ourText.css('font-size', WfontSize);
} else {
ourText.css('font-size', Math.min(HfontSize, WfontSize));
}
_debug('Final: ' + ourText.css('font-size'));
if (ourText.width() > maxWidth
|| (ourText.height() > maxHeight && !Opts.widthOnly)
) {
ourText.css('font-size', oldFontSize);
if (Opts.fail) {
Opts.fail(this);
}
} else if (Opts.success) {
Opts.success(this);
} else if (Opts.callback) {
_warn('callback is deprecated, use success, instead');
// call callback on each result
Opts.callback(this);
}
});
// call complete when all is complete
if (Opts.complete) Opts.complete(this);
return this;
};
var ourText = $(".textfill");
// reset the size so we can calculate again
ourText.find("span").css("fontSize", "");
Ready to run.
Test | Ops/sec | |
---|---|---|
textfill by GeekyMonkey |
| ready |
textfill by Alexander Sandstorm |
| ready |
textfill by mekwall |
| ready |
// by Russ Painter |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.