Font size auto adjust to fit

Question

I'm trying to do what the title says. I've seen that font-size can be a percentage. So my guess was that font-size: 100%; would do it, but no.

Here is an example: http://jsfiddle.net/xVB3t/

Can I get some help please?

(If is necesary to do it programatically with js there is no problem)

Solution 1

This question might help you out but I warn you though this solves it through jQuery:

Auto-size dynamic text to fill fixed size container

Good luck.

The OP of that question made a plugin, here is the link to it (& download)

BTW I'm suggesting jQuery because as Gaby pointed out this can't be done though CSS only and you said you were willing to use js...

Solution 2

Can't be done with CSS.

100% is in relation to the computed font-size of the parent element.

reference: http://www.w3.org/TR/CSS2/fonts.html#font-size-props

For a jQuery solution look at Auto-size dynamic text to fill fixed size container

Solution 3

I was looking into this for work and I liked tnt-rox's answer, but I couldn't help but notice that it had some extra overhead that could be cut out.

document.body.setScaledFont = function(){
    this.style.fontSize = (this.offsetWidth*0.35)+'%';
    return this;
}
document.body.setScaledFont();

Cutting out the overhead makes it run a little bit quicker if you add it to an onresize event.

If you are only looking to have the font inside a specific element set to resize to fit, you could also do something like the following

window.onload = function(){
    var scaledFont = function(el){
            if(el.style !== undefined){
                el.style.fontSize = (el.offsetWidth*0.35)+'%';
            }
            return el;
        }
        navs = document.querySelectorAll('.container>nav'),
        i;
    window.onresize = function(){
        for(i in navs){
            scaledFont(navs[i]);
        }
    };
    window.onresize();
};

---

I just noticed nicolaas' answer also had some extra overhead. I've cleaned it up a bit. From a performance perspective, I'm not really a fan of using a while loop and slowly moving down the size until you find one that fits.

function setPageHeaderFontSize(selector) {
    var $ = jQuery;
    $(selector).each(function(i, el) {
        var text = $(el).text();
        if(text.length) {
            var span = $("<span>").css({
                    visibility: 'hidden',
                    width: '100%',
                    position: 'absolute',
                    'line-height': '300px',
                    top: 0,
                    left: 0,
                    overflow: 'visible',
                    display: 'table-cell'
                }).text(text),
                height = 301,
                fontSize = 200;
            $(el).append(span);
            while(height > 300 && fontSize > 10) {
                height = span.css("font-size", fontSize).height();
                fontSize--;
            }
            span.remove();
            $(el).css("font-size", fontSize+"px");
        }
    });
}
setPageHeaderFontSize("#MyDiv");

And here is an example of my earlier code using jquery.

$(function(){
    var scaledFont = function(el){
            if(el.style !== undefined){
                el.style.fontSize = (el.offsetWidth*0.35)+'%';
            }
            return el;
        };
    $(window).resize(function(){
        $('.container>nav').each(scaledFont);
    }).resize();
});

Solution 4

A bit late but this is how I approach this problem:

document.body.setScaledFont = function() {
    var f = 0.35, s = this.offsetWidth, fs = s * f;
    this.style.fontSize = fs + '%';
    return this
}
document.body.setScaledFont();

The base document font is now set.

For the rest of your elements in the dom set font sizes as % or em and they will scale proportionately.

View more solutions

Comments

[Diego]

Thanks. Here it is for anyone who'd like to see it: jsfiddle.net/xVB3t/2

[Trufa]

thank you very much fot sharing the solved problem, that is really helpful and is how things should be done +1!

[Chris Baker]

possible duplicate of Auto-size dynamic text to fill fixed size container

[Peter Olson]

@ChrisBaker The linked question is asking about jQuery, this question isn't, so I wouldn't tag it as a duplicate.

[Chris Baker]

@PeterOlson Considering that the entire content of the accepted answer links to that answer, and without the links this accepted answer would be 100% useless, this is a perfect example of a question that should be marked as a duplicate. Otherwise, this is a good example of "Your Answer is in Another Castle", which is a problem to be avoided and eliminated whenever you see it.

[Yogi]

Anyone looking for this information should read this related thread: Font scaling based on width of container

[Diego]

Thanks @Gaby, now I understand the font-size with percentage :). But still looking for an answer.

[Trufa]

I did a summery of that answer actually here: stackoverflow.com/questions/4371003/…

[Gabriele Petrioli]

@Diego, updated answer with a link to another answer in SO. @Akinator posted it as well.

[Liron Harel]

so simple, and I was lost in JavaScript solutions. Plain css solved this. thank you.