Set font-size based on container size via CSS3

Question

Is there a way to set the font-size dynamically based on the containers size with CSS? At the momentan I'm using the following JS code to achieve this behaviour:

var cubeText = function() {
    var fontSize = parseInt($(".cube.avatar").width());
    fontSizeBig = fontSize/3.5
    fontSizeSmall = fontSize/6;
    console.log(fontSize);
    $(".cube span.big").css('font-size', fontSizeBig);
    $(".cube span.small").css('font-size', fontSizeSmall);
}

This has one big drawback: The test pops in and after the page is loaded resized which gives a very unpleasant "ploping" effect.

bookcasey · Accepted Answer · 2012-11-30 00:10:50Z

2

Check out the CSS3 unit vw.

If you need to support other browsers, JavaScript is the only way.

answered Nov 30, 2012 at 0:10

bookcasey

40.9k13 gold badges83 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wowpatrick Over a year ago

Also great answer, but the unfortunately, as you said, the support is just not far enough.

Valky · Accepted Answer · 2012-11-30 11:53:23Z

1

It wont be possible in CSS, and/or not supported by a lot of browsers. You can have a look at the viewport-relative-lengths but it wont work everywhere...

For the ploping effect, you can use something like the content with the same color as the background for example, or transparency. Demo

$(document).ready(function(){
   changeFontSize();
    });

function changeFontSize(){
    var fontSize = parseInt($(".cube").width());
    var fontSizeBig = fontSize/10;
    var fontSizeSmall = fontSize/20;
    console.log(fontSize);
    $(".big").css('font-size', fontSizeBig);
    $(".small").css('font-size', fontSizeSmall);
    $(".cube").css('color','#000');
}

You can also use a nice js plugin like this one : http://fittextjs.com/

edited Nov 30, 2012 at 11:53

answered Nov 30, 2012 at 0:37

Valky

1,8664 gold badges20 silver badges38 bronze badges

1 Comment

wowpatrick Over a year ago

Thanks for the additional link to the great JS plug-in!

Collectives™ on Stack Overflow

Set font-size based on container size via CSS3

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related