fontSizeDownScaler

Scale down headlines or other texts which doesnt fit

by Kenneth Luplau-Brøgger

HTML

<h1>Fit your headlines into max lines count</h1>
<p>This example has 2 max lines</p>
<div id="two-lines-max">
    <h2>Helloooo this is a fairly long, headline which should be scaled down to fit as this would extend two lines</h2>
    <h2>This is a long (but okay) headline which should NOT be scaled down</h2>
    <h2>This should be a short headline</h2>
    <h2>This is a totally of the charts long headline which will extend alot lines, but will never happen in real life. This is just an example to show off...</h2>
</div>

<h1>...or if you want all text to fit into the width of the container?</h1>
<p>This example has max set to 1</p>
<div id="single-line-max">
    <h2>Kenneth Brøgger-Luplau</h2>
    <h2>Bo Becher-Carlsen</h2>
    <h2>Jens Jensen</h2>
    <h2>Per Gotfried Carl-Jessing Von Percy</h2>
</div>

CSS

body {
    font-family: "arial", sans;
}
div {
    background: yellow;
    padding: 20px;
}
#two-lines-max {
    width: 320px;
}
#single-line-max {
    width: 160px;
}
h1 {
    font-size: 30px;
}
div + h1 {
    margin-top: 70px;
}
h2 {
    line-height: 1.4em;
    font-size: 20px;
}

JavaScript

(function( $ ) {
    $.fn.fontSizeDownScaler = function(options) {
        var options = $.extend({
            maxlines: 2,
            scaleDownBy: 5
        }, options);
        
        //Minimum requirements
        options.scaleDownBy = options.scaleDownBy < 5 ? 5 : options.scaleDownBy;
        
        $(this).each(function() {
            function downScale($headline) {
                if ($headline.css("lineHeight") == "normal") {
                    $headline.css("lineHeight", "1em");
                }
                
                var lineHeight = [
                    parseInt($headline.css("lineHeight"), 10),
                    $headline.css("lineHeight").replace(/[0-9]/g, '')
                ]
                var fontSize = [
                    parseInt($headline.css("fontSize"), 10),
                    $headline.css("fontSize").replace(/[0-9]/g, '')
                ]
                var innerHeight = $headline.innerHeight();
                
                if (innerHeight > (lineHeight[0] * options.maxlines)) {
                    var newFontSize = fontSize[0]/100*(100-options.scaleDownBy);
                    var newLineHeight = lineHeight[0]/100*(100-options.scaleDownBy);
                    $headline.css("fontSize", parseInt(newFontSize, 10) + fontSize[1]).css("lineHeight", parseInt(newLineHeight, 10) + lineHeight[1]);
                    downScale($headline);
                }
            };
            
            downScale($(this));
        });
    
        return this;
    };
})( jQuery );

$(function() { 
    $("#two-lines-max h2").fontSizeDownScaler({
        maxlines: 2, //Default (and minimum) max allowed line count: 2
        scaleDownBy: 5 //Default (and minimum) decrement in percents: 5 
    });
    
    $("#single-line-max h2").fontSizeDownScaler({
        maxlines: 1, //Default (and minimum) max allowed line count: 2
        scaleDownBy: 5 //Default (and minimum) decrement in percents: 5 
    });
});