Filling a textField dynamically either by scale or font size.

[jonnubroth]

Hello all,

I've been attempting to have text fill a textField width responsively. Here is my code:

while(textField.textWidth < textField.width)

{

    tf.size += 1;

    textField.setTextFormat(tf);

}

However, this causes the text to be huge! Even though the textWidth and width are similar, the text is huge and only shows one letter in the field. I've tried scaling with textField.scaleX, but then the textWidth doesn't change. Very confusing and any help would be greatly appreciated!

[JoãoCésar]

Hi.

Have you tried setting your text field to auto size and the behavior to single line or multiline without wrap?

Regarding the autoSize, it would be something like this:

import flash.text.TextFieldAutoSize;
txt.autoSize = TextFieldAutoSize.LEFT;
txt.text = "Your long text here.";

Regards,

JC

[jonnubroth]

The textWidth property doesn't change and I see no change of the text when I use the TextFieldAutoSize. Does it autoSize the textField or the actual text?

[JoãoCésar]

The autoSize property makes the text field change size according to the length of the text (string).

[jonnubroth]

I'm trying to do the opposite! I have a fixed textField size and want the text inside to fill the textField proportionally. When I increase the textWidth to match the textField size it is wildly too big. Thank you for the information so far!

[Colin Holgate · Accepted solution]

When you set the text of a textfield you can check the textHeight, and from that you know if the text is taking up two lines or one line. You then make function that keeps on increasing or decreasing the font size, until either there is now one line, or there is now two lines (depending on whether you're increasing or decreasing). When increasing, as soon as there is two lines you would then set the size to the previous attempt. When decreasing, as soon as there is one line you leave it at that size.

To decide whether to increase or decrease, just set the text at the current font size, if you get more than one line, do the decreasing approach. If you immediately get one line, do the increasing approach.

[jonnubroth]

Colin, you're the bee's knees! The cat's pajamas! Thank you so much! The MaxHeight worked like I wanted the MaxWidth to! Thanks again!