Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"Zoom" text to be as big as possible within constraints/box

First problem: You have 400 pixels width to go on, and need to fit some text within that constraint as large as possible (thus, the text shall use that amount of space).

Throw in a new constraint: If the text is just "A", then it shall not zoom this above 100 pixels height (or some specific font size).

Then, a final situation: Linebreaks. Fit some text in the largest possible way within e.g. 400 x 150 pixels.

An obvious way is to simply start with point 1, and then increase until you can't fit it anymore. This would work for all three problems, but would be very crude. The fitting of a single line within bounds could be done by writing it with some fixed point size, check the resulting pixel bounds of the text, and then simply scale it with a transform (the text scales properly too then, check out TransformUI).

Any ideas of other ways to attack this would be greatly appreciated!

like image 783
stolsvik Avatar asked Jan 22 '23 01:01

stolsvik


1 Answers

As what you are modelling is complex, especially with line breaks, then your initial proposal of trying all sizes is along the right lines, especially if it needs to be accurate.

However, rather than testing each value, you can use a binary search to find the appropriate font size. You know the size is somewhere between 1 and 100 (your upper range). using a binary search, each test sets the font size and checks the resulting layout. If the text is too large, then we search the lower half of the current range of possible values. If the font size fits, then we search the upper half. Your search will use at most 7 attempts (100 log base 2 rounded up), it will be exact, finding the largest size without going over, and it will be flexible if you need to add more requirements later, such as a mix of fonts or more stringent constraints on the layout.

I'm assuming you are using a text component that does line wrapping, and that you can set the maximum width to 400. So, you set the font size and it does the layout giving you back the required height, laying out text within the given width.

You can use hints to try to guide the algorithm to the result quicker, such as making your first guess close to the expected size, but text rendering is fast, that the performance increase may not be worth the implementation effort.

See Wikipedia - Binary Search Algorithm

like image 155
mdma Avatar answered Feb 08 '23 12:02

mdma