Posted by: edsyrett | 26 September 2009

Scaling an mx:Text – The Bottom Line…


Have a look at my little test app here.

On the numeric stepper, keep increasing the scaling.

You’ll find at about 1.26, a strange thing happens – you lose the bottom line.

As usual in my adventures with the Flex SDK, it’s a bug.  But this time I don’t think it’s a bug in the Flex SDK.   I believe it is in the text control in Flash Player.

Anyway, there is a bug report, and it’s here: SDK-16876.

If you encounter this issue with showing controls on the screen, you can probably get around it by setting an explicit height on the Text control.  However, what happens if you want the Text control to grow it’s height?  Setting an explicit height simply isn’t going to work if you don’t know at runtime if the Text control will hold 2 lines or 20.

But there is another sting in the tail of this particular bug.  You may be able to work around this issue on the screen by either sizing components or not scaling them.  But there is one time where you will have to use scaling…..

Printing.

And that’s where I hit this problem.  I can’t use any of the existing solutions in my app because I need the Text control to grow to show all it’s text, and I need to print that Text component, so it needs to scale properly.

My test app uses a copy of the Text component, and I have updated it a bit.   I have added a new function:

private function getCalculatedTextHeight():Number { var textHeight:Number = 0; for(var i:int=0; i < textField.numLines; i++) { textHeight += textField.getLineMetrics(i).height; } // SDK-16876 // Comment in this line instead of the following one // to fix the issue. // return Math.ceil(textHeight) + 4; return Math.ceil(textHeight); }

It seems that there is a rounding error somewhere, because if you add 4 to the height returned by getCalculatedTextHeight(), the problem goes away. The downside is that Text controls appear a bit larger in height, but the major plus side is that all the lines in my Text controls now get printed.

I thank you.

Advertisements

Responses

  1. Everything beyond simple text is a huge pain in Flex 3, but it appears Adobe has decided to have mercy on us with Flex 4 and the new TLF.

    Here’s a text scaling example from Flex 4:

    http://www.jamesward.com/blog/2009/08/11/fonts-in-flex-4-flash-player-10-air-1-5-make-me-happy/

  2. This is an old post but I have the solution (for Flex 3):

    1) You need to embed the font for the text area:


    @font-face {
    src:url("MyriadWebPro.ttf");
    fontFamily: "MyriadWebPro";
    fontWeight: normal;
    fontAntiAliasType:"animation"
    }

    2) Use the setStyle method on each text area to give it the fontFamily value you set in the embedded font declaration:


    YOURTEXTCONTROL.setStyle("fontFamily", "MyriadWebPro");

    If fonts aren’t embedded, Flash relies on the OS to scale the text and the OS does not do continuous scaling for text – the result is the dance of the text reflow.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: