1

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?

4 Answers 4

2

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).

1
  • Since posting this I tried totaling the two percentages together and then using the total percentage to adjust the font size. It seems to work okay but I have to decrease the adjusted font size by about 7% to prevent accidental text overflow while resizing :/. It has some wonky side effects though. I'm going to play with your idea.
    – CatDadCode
    Sep 6, 2012 at 16:45
1

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

2
  • Yeah that's my issue. I did try totaling the percentages and it works alright. The only thing I can really do to prevent the overflows from happening is to decrease the new font size by about 7% it would seem. That seems to keep it contained most of the time.
    – CatDadCode
    Sep 6, 2012 at 16:55
  • 1
    I was off looking at the problem and missed the response come through :) It looks like you might be able to set the css on the containing box to overflow: hidden, and then check to see if any elements are overflowing: stackoverflow.com/questions/7668636/… Maybe then you could just keep decreasing font size by 1 until no overflow?
    – Jonathan
    Sep 6, 2012 at 17:06
1

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.