How do I make text resizable to browser?

Question

So I want to make the word "WIDTH" resize according to the width of the browser. Right now, only the box around the word resizes, but I want the word to resize as well. I feel like there's something wrong with my calculations.

<!DOCTYPE html>
<html>
<head>


<style>

    #header{

        margin: 0px;
        font-size: 200px;
        display:inline;
        padding:0px;
        position:absolute;
        white-space:nowrap;
        overflow:hidden;
        border:thin solid black;
        height:800px;

    }

</style>
</head>

<body style="padding:0px;">
<div id="header"> WIDTH </div>

    <script>

        var text_div = document.getElementById("header");

        var size = function (){

            var winW = window.innerWidth;
            var winH = window.innerHeight;
            var win_ratio = winW/winH;
            var offset_width = text_div.offsetParent.clientWidth;
            var offset_height = text_div.clientHeight;
            var offset_ratio = offset_width / offset_height;
            text_div.style.width = offset_width + "px";
            document.title = winW + ":" + offset_height;
            text_div.style.fontSize=String(parseInt(winW/offset_ratio)) + "px";

        }

        window.onresize=function() {size();}

       //size();

   </script>
</body>
</html>

possible duplicate of [Auto-size dynamic text to fill fixed size container](http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container) — John Koerner, Jan 28 '13 at 21:14
You might also want to have a look at [slabText](http://www.frequency-decoder.com/demo/slabText/). — Félix Saparelli, Jan 28 '13 at 21:16
sorry, i fixed client_ratio to offet_ratio. either way, I think my formula is wrong. — Jay, Jan 28 '13 at 21:28
Fiddling... http://jsfiddle.net/tHBpJ The text and container only get larger. I'm guessing a logic issue rather than a math issue. — isherwood, Jan 28 '13 at 22:13

isherwood · Answer 1 · 2013-01-28T22:36:33.520

I'm not sure why you were using all the ratio stuff. Here's a simple example based on width alone.

http://jsfiddle.net/tHBpJ/3

var text_div = document.getElementById("header");
var initWinW = window.innerWidth;
var initFontSize = 40;

var size = function () {
    var winW = window.innerWidth;
    var textFactor = winW / initWinW
    text_div.style.fontSize = initFontSize * textFactor + "px";
}

window.onresize = function () {
    size();
}

score 0 · Answer 2 · answered Jan 28 '13 at 22:39

0

I've used the jquery plugin fittext.js for this kind of thing in the past, and its worked quite nicely.

answered Jan 28 '13 at 22:39

Zach Lysobey

14,959
20
95
149

Olaf Dietsche · Accepted Answer · 2013-01-29T17:03:58.357

0

If you wrap your text in a span, you can get the text's offsetWidth

<div id="header"><span>WIDTH</span></div>

The div's width is fixed with left: 0px and right: 0px

#header {
    position: absolute;
    left: 0px;
    right: 0px;
    border: 1px solid black;
}

and the font-size is then adjusted dynamically. The for is there to prevent an endless loop

var epsilon = 5;
var div = document.getElementById('header');
var span = div.childNodes[0];

function size() {
    var dw = div.offsetWidth;
    var fs = 200;
    span.style.fontSize = fs + 'px';
    var cw = span.offsetWidth;
    for (var i = 0; i < 10 && Math.abs(cw - dw) > epsilon; ++i) {
        fs *= dw / cw;
        span.style.fontSize = fs + 'px';
        cw = span.offsetWidth;
    }
}

window.onresize = size;
size();

JSFiddle

edited Jan 29 '13 at 17:03

answered Jan 28 '13 at 23:17

Olaf Dietsche

72,253
8
102
198

thanks! this is perfect :) for the for loop, can i also have "while(true)" since its an infinite loop? – Jay Jan 29 '13 at 16:58
@Jay Yes, you can of course. But I won't do it, because it might lock up your computer, if the sizes `cw` and `dw` don't converge. You should at least allow for some difference, see updated answer and JSFiddle. – Olaf Dietsche Jan 29 '13 at 17:04

How do I make text resizable to browser?

3 Answers3