CODEWITHSUNDEEP
csstextscale
Sam Sabin
Sam Sabin

Reputation: 1167

How to scale text size compared to container

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?

Upvotes: 1

Views: 3814

Answers (4)

kfhohn
kfhohn

Reputation: 135

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'
        });
    }
});

Upvotes: 0

Sarathi
Sarathi

Reputation: 1031

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>

Upvotes: 2

Nick Grealy
Nick Grealy

Reputation: 25854

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/

Upvotes: 0

Lieutenant Dan
Lieutenant Dan

Reputation: 8274

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);

Upvotes: 0

Related Questions