11 Replies Latest reply on Jan 19, 2013 5:50 AM by alizee1976

    Text display and scaling issue

    cnbliv

      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

        • 1. Re: Text display and scaling issue
          tatar4

          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?

          • 2. Re: Text display and scaling issue
            tatar4 Level 1

            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.

            • 3. Re: Text display and scaling issue
              flexercised Level 3

              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>

              • 4. Re: Text display and scaling issue
                tatar4 Level 1

                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!

                • 5. Re: Text display and scaling issue
                  Flex harUI Adobe Employee

                  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.

                  • 6. Re: Text display and scaling issue
                    tatar4 Level 1

                    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?

                    • 7. Re: Text display and scaling issue
                      Flex harUI Adobe Employee

                      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.

                      • 8. Re: Text display and scaling issue
                        tatar4 Level 1

                        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/WS19f279b149e7481c6a9f451212b87fe7e87-7fff.htm l#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? :-))

                        • 9. Re: Text display and scaling issue
                          Flex harUI Adobe Employee

                          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.

                          • 10. Re: Text display and scaling issue
                            nemi123

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

                            • 11. Re: Text display and scaling issue
                              alizee1976

                              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)