Entrepreneur Geek

Nirav Mehta on life, technology and future

Zooming Text Area in Flex – messes up word wrap – bug??

with 10 comments

We have been struggling with zooming TextArea in Flex for 2 months now. Tried lots of combination but nothing worked. Can someone help?

Essentially, we scaleX and scaleY the TextArea as the zoom level changes. The component zooms in fine, but the text in it keeps wrapping as we keep zooming. We expect the text to stay as it is and just zoom. Not re-wrap.

Here is the text at 100%. Notice the last words on the lines.

TextArea zoom at 100%

TextArea zoom at 100%

Here is the TextArea at 150% zoom. Notice how the wrapping disrupts.

TextArea zoom at 150%

TextArea zoom at 150%

I have a live example if you want to try this out.

We have tried using zoom effect, adding line breaks at the end of each line before zooming and removing them, trying different fonts, embedding them – everything we could think of! But this looks like a bug! TextArea keeps wrapping the text as we zoom.

What could be a solution?

Related posts:

  1. Auto Complete Text Component for Flex Was looking for ways to skin a combobox and found...
  2. Live Scribe – Amazing Writing Technology – Never Miss A Word I have trained my eyes to skip all ads on...
  3. Intelligent Time Duration / Estimate Slider in Flex (inspired from The Hit List) I wrote yesterday that I am working on a time...
  4. Card Deck Animation in Flex I was trying out a GTD application the other day...
  5. Notification Components in Flex If you are building a Flex application, you may need...

Written by Nirav

August 20th, 2008 at 5:49 pm

Posted in Flex & Flash

Tagged with , , ,

 

«
»

10 Responses to 'Zooming Text Area in Flex – messes up word wrap – bug??'

Subscribe to comments with RSS or TrackBack to 'Zooming Text Area in Flex – messes up word wrap – bug??'.

  1. Try embedFonts=true

    maliboo

    20 Aug 08 at 8:14 pm

  2. My Flex is very sketchy, but have you tried embedding the text area into another control, *then* scaling that?

    James Urquhart

    20 Aug 08 at 8:27 pm

  3. That happens when you scale device fonts or embedded fonts with the antiAliasType set to ‘advanced’.
    For device fonts, it’s because the Flashplayer can only tell the OS to scale the font to integer values, causing the glyphs not to scale smoothly during a scaling transition.
    For embedded fonts with antiAliasType ‘advanced’ it’s caused by the font engine optimizing the glyphs and text runs for readability, e.g. by changing the hinting for different (rendered) font sizes.

    Solution: Embed the font and set the antiAliasType to ‘animation’.

    Till Schneidereit

    20 Aug 08 at 8:48 pm

  4. +antialias for animation!

    maliboo

    20 Aug 08 at 9:17 pm

  5. Thanks Till and Maliboo. Setting “animation” for anti alias solved the problem. The zoom works well now!

    Whew!

    Nirav

    21 Aug 08 at 7:25 pm

  6. Nirav, please can you send me a simple example. I’ve tried what you suggested but i can’t access to the antiAliasType property of textArea component.
    thanks in advance !

    angelo

    3 Sep 08 at 10:38 pm

  7. How to prevent Browser Defaults(ctrl+c, ctrl+p etc) in Flex especially in Internet Explorer?

    Gaurav Vichare

    17 Sep 08 at 3:25 pm

  8. This is for anyone who may ever have this problem, within Flex now the property you want to set is fontAntiAliasType=”animation”

    Travis

    9 Oct 09 at 11:54 am

  9. Nirav/Travis

    The only available enumeration values for fontAliasType are “normal” and “advanced”. How did you set “animation” as the value for the fontAliasType?

    Thanks in advance!

    Binu Moothedan

    19 Dec 09 at 2:33 pm

  10. We did it via Action Script.

    Nirav

    21 Dec 09 at 6:48 pm

Leave a Reply