How to scale text size compared to container

Question

How would you scale text size based on container size. Other questions state it can\'t be done with css, if not how would you go about it?

Answer 1

You should be able to do this using jQuery -- something like..

$('#cooldiv').css('font-size', '100%')

and

$("#cooldiv").animate({ 
    'width' : (xWidth * (35 / 100)) + 'px',
    'minWidth' : (xWidth * (35 / 100)) + 'px',
    'maxWidth' : (xWidth * (35 / 100)) + 'px',
    'fontSize' : (xWidth * (35 / 100)) + '%'
}, 1000);

Answer 2

Here is a way to set the text to fit the width of the container. It works by incrementally increasing the font size of a hidden div until it is smaller than the width of the container for which you want to text to fit inside. It then sets the font size of the container to that of the hidden div.

This is a little inefficient and could be optimized by caching the old width of the container, then incrementing from the old font size to either larger or smaller values based on how the width of the container changed.

jsFiddle: http://jsfiddle.net/sarathijh/XhXQk/

<div class="scale-text styles">
    This is a test of scaling text to fit the container. Lorem Ipsum Dolor Sit Amet.
</div>
<div id="font-metrics"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    var fontMetrics = document.getElementById('font-metrics');
    var scaleTexts  = $('.scale-text');

    $(window).on('resize', updateFontSize);
    updateFontSize();

    function updateFontSize()
    {
        scaleTexts.each(function()
        {
            var $scaleText = $$(this);

            fontMetrics.innerHTML = this.innerHTML;
            fontMetrics.style.fontFamily = $scaleText.css('font-family');
            fontMetrics.style.fontWeight = $scaleText.css('font-weight');
            fontMetrics.style.fontStyle = $scaleText.css('font-style');
            fontMetrics.style.textTransform = $scaleText.css('text-transform');

            var fontSize = 50; // max font-size to test
            fontMetrics.style.fontSize = fontSize + 'px';

            while ($$(fontMetrics).width() > $scaleText.width() && fontSize >= 0)
            {
                fontSize -= 1;
                fontMetrics.style.fontSize = fontSize + 'px';
            }

            this.style.fontSize = fontSize + 'px';
        });
    }

    /**
     * A simple caching function for jQuery objects.
     */
    function $$(object)
    {
        if (!object.jquery)
            object.jquery = $(object);

        return object.jquery;
    }
</script>

Answer 3

I couldn't work out how to do it with CSS, so I used pure JS (don't need jquery).

var els = document.getElementsByClassName('abc')
for (var i = 0; i < els.length; i++){
    els[i].style.fontSize = els[i].clientHeight + 'px'
}

Example: http://jsfiddle.net/nickg1/H64mQ/

Answer 4

Here's how I accomplished it- I wrapped the text in a span and scaled that down with a CSS transform:

<div id="fit-text-in-here">
    <span>Scale this text to fit inside the parent div.</span>
</div>

jQuery:

$(function(){
    var textWidth = $('#fit-text-in-here span').width(),
        fitWidth = $('#fit-text-in-here').width();

    if (textWidth > fitWidth) {
        var scaleTo = fitWidth / textWidth,
            offset = (fitWidth - textWidth)/2;

        $('#fit-text-in-here span').css({
            '-moz-transform': 'scale('+scaleTo+')',
            '-webkit-transform': 'scale('+scaleTo+')',
            '-o-transform': 'scale('+scaleTo+')',
            'transform': 'scale('+scaleTo+')',
            'margin-left': offset,
            'display': 'inline-block'
        });
    }
});