Flex when text is to big for text box...make smaller

Question

I have an < mx:Label > tag that has a set width, which is usually large enough to display the text it needs to show. Every once in a while though the text is a little too long and gets chopped off and "..." gets appended. Instead of this happening I would like to decrease the font-size just low enough to show the whole text.

Does anyone know of a nice way to do that?

Thanks

Answer 1

Fonts are a complicated beast. For a given text, you can find the string length and calculate the maximum allowable font-size very simply using the following approximate formula:

var max_allowable_size:int = yourLabel.width / yourLabel.text.length;

This could lead to serious issues for some fonts, namely:

• Remember not all fonts are equal i.e. they cannot all be resized gracefully.
• Anti-aliasing may break
• Fonts may not look good/text may become illegible
• The above naive formula will probably break when applied to non-roman characters
• Also, this is an inefficient way.

I would rather suggest that you define two different styles, one regular and another fallback one with font-size set to the smallest, which you switch to when you encounter longer label texts. You can calculate the threshold limit to switch by using the default font-size on the above mentioned formula. Of course, some experimentation is in order, if you have to support localization/multiple languages.

Finally, always embed the fonts if you are going to use anything other than the most common fonts.

Answer 2

There is a measureText function. Check out:

http://frankieloscavio.blogspot.com/2008/01/flex-use-measuretexttxt-to-calculate.html http://livedocs.adobe.com/flex/3/langref/mx/core/UITextFormat.html#measureText()

You can probably use measureText and decrease the font size till it fits.