Skip navigation
cnbliv
Currently Being Moderated

Text display and scaling issue

Apr 23, 2010 6:09 AM

Hello,

 

I don't know if this is done by design, but after I released our internal newspaper build on Flex, the number one complaint I received was that when zooming in, the space between the letter was not consistent and in some of the words, the letter are either too far spaced or glued to each other.

 

I build a little test app to demonstrate what I mean.

I will first post the results and then the code.

 

First here is a snapshot of text at scale 1: Everything looks great

Scale1.png

 

Now, here is the same text at scale 1.5: (I only scale x and y, it never occur to me at first that I should use z as well)

Notice how crisp the text is but the downside are the distorded words: I highlighted a few in yellow.

Scale2.png

 

So then I figured I give a shot to the z axis and scale that one as well: to my satisfaction the words keep their spacing but the crispiness of the text, not so good!

 

Scale3.png

 

Here is the little app:

 

<?xml version="1.0" encoding="utf-8"?>

<s:Application

 

 

xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="

library://ns.adobe.com/flex/spark"

xmlns:mx="

library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

 

 

<fx:Declarations>

 

 

<!-- Place non-visual elements (e.g., services, value objects) here -->

 

 

</fx:Declarations>

 

 

<fx:Script>

<![CDATA[

 

 

private function Size(value:Number, useZ:Boolean=false):void

{

 

 

this.TextToSize.scaleX = value;

 

this.TextToSize.scaleY = value;

 

if(useZ)

{

 

this.TextToSize.scaleZ = value;

}

 

else

{

 

 

this.TextToSize.scaleZ = 1;

}

 

}

]]>

 

</fx:Script>

 

 

 

<s:VGroup>

 

 

<s:HGroup>

 

 

<s:Button label="Scale 1" click="Size(1)">

 

 

 

</s:Button>

 

 

<s:Button label="Scale 1.5" click="Size(1.5)">

 

 

 

</s:Button>

 

 

<s:Button label="Scale 1.5 All Dimensions" click="Size(1.5, true)">

 

 

 

</s:Button>

 

 

</s:HGroup>

 

 

<s:RichEditableText id="TextToSize" editable="false" fontFamily="Verdana" fontSize="10" width="300">

 

 

<s:content>

 

 

<s:p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

 

 

</s:p>

 

 

</s:content>

 

 

</s:RichEditableText>

 

 

 

</s:VGroup>

 

</s:Application>

 

 

 

 

So now the big question:

Is there a way to get the best of both world? Even word sizing, with crisp text?

 

 

Did I miss something, a property that would adjust the fuzziness?

 

Thanks for any input

 

CNB

 
Replies
  • Currently Being Moderated
    Nov 23, 2011 2:55 AM   in reply to cnbliv

    I have the same problem in our project, we are allowing users to zoom a container that contains images and text (RichText, RichTextArea).

    When I set scaleX, scaleY to the container, which is higher or lower than 1, the text is unreadable, sometimes the space between the characters is the same as between the words.

     

    TLF is very good framework and I see a lot of work behind it, but this bug makes the text layout framework useless. Its really a nightmare for flash projects with tlf.

     

    Has someone the solution for it?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 23, 2011 6:22 AM   in reply to tatar4

    I forgot to tell the platform I am using.

    I am on desktop Windows (both XP and VISTA).

    I have also tried to compile the same application as Flex Mobile Project, and it works fine, text scaling is perfect on both mobile device and standalone mobile flash player.

    It looks like the problem is in some swc library for the Flex Project, which has better version in Flex Mobile Project.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 23, 2011 7:55 AM   in reply to cnbliv

    How about an embedded font with cff true?

     

    <fx:Style>

        @namespace s "library://ns.adobe.com/flex/spark";

        @namespace mx "library://ns.adobe.com/flex/halo";

     

        @font-face {

            src: url("c:\windows\fonts\verdana.ttf");

            fontFamily: "VerdanaEmbedded";

            embedAsCFF: true;

        }

     

        s|RichEditableText {

            fontFamily: VerdanaEmbedded;

            fontSize: 10;

        }

    </fx:Style>

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 23, 2011 10:52 AM   in reply to flexercised

    This solution is not suitable for our project, because its multilingual, we use a lot of dynamic text saved in xml files, so embedding all fonts in all languages is almost impossible.

    But as I said, device fonts are rendered perfectly when scaled if I use RichText or RichEditableText in Flex Mobile Project in Flash Builder (flex SDK 4.5.1).

    I have also tried it on my mobile device (PlayBook), and font is nice and sharp when zooming (gestureZoom) in the application.

    This problem occurs only when using Flex Project (air or web).

     

    But anyway, thank you for your fast response!

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 23, 2011 11:53 AM   in reply to tatar4

    Embedding is the only way to guarantee visuals.  You can create RSLs or modules containing a font or fonts and they will end up in the browser cache.  You’ll see a delay when the font SWF is not in the cache, but then each newsletter doesn’t need to have the fonts in it.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2011 1:16 AM   in reply to Flex harUI

    Sorry, but I can not accept this as answer. If you told me that six years ago, I could think about it for a while, but today in 2011 (2012), when we have TLF 3 and the Flash Player 12 is behind the door?

    What is the main purpose for having text component in the application? That people can read the text. In 2005 we had flash 8, we could not apply alpha and rotation on dynamic textfield with device fonts, but "cacheAsBitmap" did the trick, so after that we could scale, rotate and apply alpha. Doesn't matter that text was jumping when scaled, but it was still readable.

    Now we have great FTE and TLF framework, we can write from right to left and from the top to bottom, we have striked text, multicolumn text, we can use ordered and unordered lists in html text, we can apply alpha and all transformations on the text and we can do it especially with device fonts (I thought that TLF was build mainly for working with device fonts?). But we cannot scale movieclip with the dymamic text within, because the text is unreadable. Is this the upgrade?

    I cannot use spark TextArea, RichText and RichEditableText in my desktop projects, but really I think it must be something with the spark skins, because the text scaling works great in Flex Mobile Project.

     

    Can you please advise me, which text component to use when I need zooming in my desktop / web application?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2011 9:48 PM   in reply to tatar4

    If Mobile components are working for you, you are welcome to use their skins in your desktop project, but I’ve heard just as many complaints about zooming device text in TextField as well as TextEngine/TLF.  The mobile components are using TextField.

     

    I don’t know of any other way if you want the font renderer to render at different scale.  Otherwise you are back to bitmaps and their limitations.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 28, 2011 5:43 AM   in reply to Flex harUI

    I can use mobile skins for RichText and RichEditableText components for desktop and web projects, but there is a little problem. They have no mobile skins and they are paradoxically not recomended by adobe to use within mobile projects, because they are heavy. But they work great even if they are scaled. Do you still think that this is not a bug?

     

    http://help.adobe.com/en_US/flex/mobileapps/WS19f279b149e7481c6a9f4512 12b87fe7e87-7fff.html#WS19f279b149e7481c6a9f451212b87fe7e87-7ffb

     

    "Try to avoid using the RichText and RichEditableText controls in mobile applications. These controls do not have mobile skins, and they are not optimized for mobile applications. If you do use these controls, you are using TLF, which is computationally expensive."

     

    Is there any chance that this bug will be resolved soon, or do I have to go back to 2004 and make my own class extended from TextField? :-))

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 28, 2011 10:00 AM   in reply to tatar4

    I don’t expect device font rendering to handle zoom any better than it does today.  Instead of using RichEditableText you can use Spark TextInput with the mobile skin which should swap in a TextField.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 13, 2012 12:21 PM   in reply to tatar4

    I have the same problem. Have you found the solution for this ugly letter spacing problem?

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 19, 2013 5:50 AM   in reply to nemi123

    I have done it in stupid but working way - I set fontSize to twice more and scale down... then when you scale it bigger it looks ok (not ideal but much better)

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points