Can you make the font-size attribute scaleable based on the browser window?

Question

Here's one I've never encountered before. Is it possible to make a font scale with the window size of the browser. For example: making the font size 100% of the available width. I'm open to Javascript, jQuery or CSS solutions.

Answer 1

What do you mean by "font size 100% of the available width"? That your font size, in pixels, will be equal to the width, in pixels, of the page, or if some text will fill the width of a page?

First case: font-size equal to page width

If you can use JavaScript, you can listen to window size change event, then to change the font size each time the window size is changed. You can do it either in plain JavaScript or in JQuery, whatever you are familiar with.

Second case: the width of a text equal to page width

This one is quite impossible to implement easily, since different browsers have different layout options, also affected by accessibility settings for each user. What you may try to do is to adjust the font size inside a <div/>, measure the width of the <div/> and readjust the font size until you get the width you want.

Of course, at least you have a few days to spend at optimizing the thing, this will give a terrible visual effect. To reduce it, you can adjust text on background (an invisible text), find the font size/width you want, then apply it to a visible block.

Answer 2

I don't see why you couldn't. Just create a JS handler for the window resize event and change the style.fontSize property of the targeted element in the handler function. So, something like:

window.onresize = function(event) {
    document.getElementById('targ').style.fontSize='10';
}