Math Is Fun Forum

Hey everyone,

I've been staring at this for over a week now and I cannot wrap my head around the math involved, probably due to an overload of info combined with a 'math-block'. I will use your answer/suggestions to improve the code in my answer on Stackoverflow question 60610396: Resize text within Circle..., which for now works, but seems flawed and incomplete.

As the subject says, (I think) I am looking for an equation to fill a large rectangle of width=X and height=Y with N smaller rectangles which have a given height to width ratio. Catch: the final result must be the height of a small rectangle.

I probably posted much more info than you actually need, but I want to make sure you understand what I am working on...

Background:

A text must fit on a large button which is either a square, rectangle or circle. The text can be 1 to N characters long and must be scaled to fit with minimal space left, possibly wrapping over multple lines. The only way to scale the characters is assigning the proper font height. The point of this is that when a user resizes the browser, the text must be dynamically scaled to proportion.

The widths and heights of the 3 variations are given, for the circle the inner square has to be used. To get the sides of the inner square of the circle I use:

1) diameter / sqrt(2) ( => a circle with d = 233 has an inner square with sides of 233 / 1.41421... = 164, rounded down to keep final text within inner square).

To fill the square of 164x164 with 100 characters with a H:W ratio of 1:1, the height of a character would be:

2) inner square side / sqrt(number of chars) ( => 164 / sqrt(100) = 16.4 )

This math is rather straighforward and will optimally fit 100 characters (squares) of 16.4x16.4 in a large square of 164x164. In this case a perfect fit.
Alas, non-proportional fonts don't have square characters and the widths vary per character, per font.

To get the final result I will have to use the average character width  combined with the height to width ratio of that avg character:

3) AVG character width method 1: width of character '0' (zero) of given font (derived).

4) AVG character width method 2:  total width of the text / the number of characters (both derived values).

5) AVG height to width ratio: character height/ avg character width.
E.g. method 1: 'monospace': height 16 (given), character '0': width 9.6.... This will yield an average height/width ratio of 16/9.6 = 1.67 (rounded) for this font. (Note that 'monospace' is a proportional font, so in this case all character are 9.6 wide).

E.g. method 2: 'monospace' text width = 1552.6..., number of characters = 162, character width = 1552.6 / 162 = 9.58... at given height 16, slightly less than method 1, but also 1.67 (16/9.58 rounded). The text width is the summed width of all characters, which seems more accurate (as a series of 'i' is less wide than a series of 'w', while the number of characters would be the same).

(note: pls ignore rounding errors, in the final code I will only round the calculated end result)

Statistically more correct would be to count all occurences of the various unique characters in the text and calculate a weighed average width. Would be fine for text with <10 characters, but getting the weighed avg of large paragraphs would take up way too much CPU time.

And here is where I get stuck: I cannot figure out how to connect all the width information to a final font height, especially when the text wraps over several rows.

Can you please help me with the math or point me to some site where I can get further info? I also would like to know whether to choose method 1 or 2 and if my height to width ratio has the correct logic.

Thank you very much!
~

Hi everyone,

This is not a request for coding help, but a genuine math problem used for:

Writing a tutorial for Codepen (non commercial CSS/HTML developers site) on using 'columns' in CSS.
It shows how to one can use "y = mx + b" to solve a variety of variable size, width and height problems,
saving time and amount of code.

I am using "y=mx+b" for points p1(320,80) and p2(1920,240) => y = 0.1x + 48, meaning:
at 320 we have column width 80 (4 columns)
at 1920 we have column width 240 (8 columns)

So, in this case "y = 0.1x + 48" yields a column width at any given screen width.

X-values 320 and 1920 are given
Y-values 80 and 240 were derived by dividing 320 and 1920 by 4 and 8 respectively.

Given result '0.1x + 48', how do I find the exact column width for 5, 6 and 7 columns
without drawing a xy-graph and find the answer visually (like with a little tool I created on
GeoGebra ERS linear equations (ERS - easy responsiveness series)

In CSS this would look something like:

   column-width: calc(0.1 * 100vw + 48px); /* 100vw = 100% of current viewport width */

Unfortunately in CSS it is not possible to substitute 'column-width' like:

   column-count: calc(column-width / some-equation);

And calc() only accepts +,-,*,/ as math operators

Thanks for your help!!