3 Replies Latest reply on Feb 6, 2011 5:26 AM by Spark2011

    Text Rendering: Spark vs Halo

    Spark2011

      Why text rendering quality on Spark component are not as good as on the Halo

      counterpart. Is it because spark don't have GridFitType = pixel as default compared to Halo? But, how to set the GridFitType on spark component? (the fontGridFitType style seems not working on Spark)

       

      For comparison, you can see the example of the "Undefined" skin on this links:

      http://www.scalenine.com/themes/undefined/Undefined.html#app=8798&c134-selectedIndex=0

       

      Take a look on the "Text" tab, you can see all the text (the Lorem Ipsum one..), all have clear, non-blurry edges of text.

      The source code for that text input element is like this:

       

      the css:

       

      @font-face
      {
      src: url("../assets/fonts/FRABK.TTF");
      fontFamily: franklin;
      font-anti-alias-type: advanced;
      font-weight: normal;
      }

       

      .personalTextInput
      {
      background-image: Embed("/assets/botones/textInput.png", scaleGridTop="6",

            scaleGridBottom="16", scaleGridLeft="6", scaleGridRight="16");
      background-disabled-color: none;
      background-size: "100%";
      color: #333333;
      disabled-color: #999999;
      border-thickness: 0;
      focus-thickness: 0;
      font-size: 11;
      font-family: franklin;
      border-style: none;
      font-weight: normal;
      padding-left: 3;
      padding-top: 2;
      }

       

      and the mxml:

       

      <mx:TextInput x="426" y="8" text="TextInput" height="22" styleName="personalTextInput"/>

       

       

      Then, I try to recreate the same text input like the above code, but using Spark TextInput (but without the skinning yet), like this:

       

      the css:

       

      @font-face
      {
      src: url("../assets/fonts/FRABK.TTF");
      fontFamily: franklin;
      embedAsCFF: true;
      }

       

      and the mxml:

       

      <s:TextInput width="250" fontFamily="franklin" fontSize="11" color="#333333" />

       

       

      But all I got is the blurry edges text, I'm already playing around with the advancedAntiAlias, cff, cffHinting, embedAsCFF, renderingMode, fontGridFitType, fontSharpness, fontThickness combination values, but still cannot achieve the same good result as the Halo ones.

       

      Could somebody please give me a clue about this things? How can I achieve the same result using Spark?

       

      Thanks & regards