Increase or decrease font size based on percentage change of height and width of an element

Question

I want to adjust the font size of the text within an element as the element is resized. I managed to get it to resize the font fairly well with the width in this jsFiddle:

http://jsfiddle.net/jWKWS/3/

However, I can only resize it based on one dimension. I can either use the height percentage or I can use the width percentage. Is there away to take both dimensions into account with a single equation so that the size adjusts appropriately for both the height and the width?

Answer 1

How about basing it off area? Add:

percentageAreaDifference = (1-percentageWidthDifference)*(1-percentageHeightDifference)

and then

newFontSize = startingFontSize * percentageAreaDifference;

Although you might want to play with it; I suspect that will shrink/grow the font a little faster than needed. You might want to make that:

newFontSize = startingFontSize * Math.sqrt(percentageAreaDifference);

Since changing the font size actually shrinks it along both dimensions, and so a 50% decrease in font size decreases the area a character occupies by 75% (roughly).

Answer 2

I think you just need to change the newfontsize calculation to:

newFontSize = startingFontSize + (startingFontSize * (percentageWidthDifference + percentageHeightDifference ));

If width decreases a lot, and height increases a little, net decrease. And vice versa. Presumeably you want to keep the text contained in the box, however, and reflow is going to bite you there. Not sure how you would keep it contained with certainty

Answer 3

I put far more time into this than I care to admit but a friend and I finally figured out the best way to scale text with an element. You have to calculate the 2-dimensional diagonal using Pythagorean Theorem and get the percentage differences from the diagonal.

var diagonal = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));

Just calculate it once for the original size and again for the new size, then get the percentage difference.

var percentage = (newDiagonal - oldDiagonal) / newDiagonal;

Then simply increase the font size by the same percentage.

var newFontSize = oldFontSize + (oldFontSize * percentage);

---

The other option is to skip all the crappy math and use this plugin we wrote:

jquery.dynamiText

Answer 4

I think you might want the sqrt of the area (as a multiple of the original area). Demo in this jsfiddle .

The key lines are (in the var statement):

        newArea = newWidth*newHeight,
        origArea = startingWidth*startingHeight,
        areaDiff = (newArea/origArea),
        newFontSize = (startingFontSize * Math.sqrt(areaDiff));

The sqrt is used because the area taken up by a character is roughly proportional to the font size squared. So the total area needed for N characters is ~[(f1/f0)^2]N. So the square root of the area 'factor' gives a measure of the new font size factor to use.

A worked example; if the new width is 1.2x the old width, and the new height is 1.5x the old height, the new area is 1.8x the old area. This formula then says the new font size should be 1.34x the old font size. And it seems to work.