0 Replies Latest reply on Jun 7, 2009 12:14 AM by AUS_ALTER_EGO

    Font Rendering - problem with fontGridFitType

    AUS_ALTER_EGO

      Hi I am trying to create a Flex/Air application which has both mx:Label and mx:HTML components.

      The text in the mx:Label components renders very differently (and nowhere near as legibly) as the text

      in the mx:HTML controls.

       

      It seems to me that selecting the fontGridFitType to "pixel" only half works. It snaps the character

      components to a pixel boundary in the vertical direction but does nothing in the horizontal direction.

      The text in the mx:HTML component seems to adjust very nicely in both directions.

       

      Does anyone know of anything that I am missing to get the text rendered by Flash to behave

      consistently with the text rendered by (I assume) WebKit?

       

      I would dearly love assistance with this.

       

      I have created an Air application to demonstrate the issue.

      This is a screen shot of the results.

       

      Result.png

      And this is the code

       

       

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

      <mx:WindowedApplication

       

      xmlns:mx = "http://www.adobe.com/2006/mxml"

      layout = "

      absolute"

      width = "

      900"

      height = "

      500">

       

       

      <mx:Script>

      <![CDATA[

       

      import mx.graphics.ImageSnapshot;

       

      [

      Bindable]

       

      private var zoomBitmap:Bitmap;

      ]]>

       

      </mx:Script>

       

      <mx:Style>

       

      @font-face {

       

       

       

      src: local("Verdana");

       

      fontFamily: "VerdanaEmbedded";

       

      advancedAntiAliasing: true;

      }

       

       

      Label {

       

      fontFamily: VerdanaEmbedded;

      }

       

      </mx:Style>

       

       

      <mx:Boolean id = "isAdvanced">

      {antiAliasTypeComboBox.selectedIndex == 1}

       

      </mx:Boolean>

       

       

      <mx:VBox>

       

      <mx:HBox>

       

      <!-- =========== THE CONTROL PANEL ================= -->

       

      <mx:Form>

       

      <mx:FormItem label = "fontAntiAliasType:">

       

      <mx:ComboBox id = "antiAliasTypeComboBox"

      dataProvider = "

      ['normal','advanced']"

      selectedIndex = "

      1"/>

       

      </mx:FormItem>

       

      <mx:FormItem label = "fontSharpness:"

      enabled = "

      {isAdvanced}">

       

      <mx:HSlider id = "sharpnessSlider"

      minimum = "

      -400"

      maximum = "

      400"

      value = "

      0"

      liveDragging = "

      true"

      snapInterval = "

      1"

      tickInterval = "

      20"/>

       

      </mx:FormItem>

       

      <mx:FormItem label = "fontThickness:"

      enabled = "

      {isAdvanced}">

       

      <mx:HSlider id = "thicknessSlider"

      minimum = "

      -200"

      maximum = "

      200"

      value = "

      0"

      liveDragging = "

      true"

      snapInterval = "

      1"

      tickInterval = "

      10"/>

       

      </mx:FormItem>

       

      <mx:FormItem label = "fontGridFitType:"

      enabled = "

      {isAdvanced}">

       

      <mx:ComboBox id = "gridFitTypeComboBox"

      dataProvider = "

      ['none','pixel','subpixel']"

      selectedIndex = "

      1"/>

       

      </mx:FormItem>

       

      </mx:Form>

       

       

      <mx:VBox>

       

      <mx:Label text = "Verdana - 12 pixels high"/>

       

      <mx:HBox>

       

       

      <!-- =========== THE TEXT EXAMPLE RESULTS ================= -->

       

      <mx:Canvas id = "resultsCanvas"

      width = "

      300"

      height = "

      60"

      backgroundColor = "

      0xffffff">

       

       

      <mx:HTML id = "helpHtml"

      width = "

      300"

      height = "

      20">

       

      <mx:htmlText>

      <![CDATA[<html><body style="background-color:#FFFFFF; width:300px; margin:0px; padding:0px; font-family: Verdana; font-size:12px; text-align:center" ;>[HELLO hello ||| GOODBYE goodbye]</body></html> ]]>

       

      </mx:htmlText>

       

      </mx:HTML>

       

       

      <mx:Label id = "lbl1"

      y = "

      20"

      width = "

      300"

      height = "

      20"

      textAlign = "

      center"

      text = "

      [HELLO hello ||| GOODBYE goodbye]"

      fontSize = "

      12"

      fontAntiAliasType = "

      {antiAliasTypeComboBox.selectedItem}"

      fontSharpness = "

      {sharpnessSlider.value}"

      fontThickness = "

      {thicknessSlider.value}"

      fontGridFitType = "

      {gridFitTypeComboBox.selectedItem}"

      truncateToFit = "

      false"/>

       

      <mx:Label id = "lbl2"

      y = "

      40"

      width = "

      299"

      height = "

      20"

      text = "

      [HELLO hello ||| GOODBYE goodbye]"

      textAlign = "

      center"

      fontSize = "

      12"

      fontAntiAliasType = "

      {antiAliasTypeComboBox.selectedItem}"

      fontSharpness = "

      {sharpnessSlider.value}"

      fontThickness = "

      {thicknessSlider.value}"

      fontGridFitType = "

      {gridFitTypeComboBox.selectedItem}"

      truncateToFit = "

      false"

      render = "zoomBitmap =

      new Bitmap(ImageSnapshot.captureBitmapData(resultsCanvas))">

       

       

      </mx:Label>

       

       

      </mx:Canvas>

       

      <mx:Canvas>

       

      <mx:Label text = "&lt;-- Lovely clear text rendered in a HTML control"

      height = "

      20"/>

       

      <mx:Label text = "&lt;-- blury text rendered by Flash/Flex"

      height = "

      20"

      y = "

      20"/>

       

      <mx:Label text = "&lt;-- and again half a pixel to the left"

      height = "

      20"

      y = "

      40"/>

       

      </mx:Canvas>

       

      </mx:HBox>

       

      </mx:VBox>

       

      </mx:HBox>

       

       

      <!-- =========== 3xZOOM OF THE TEXT EXAMPLE RESULTS ================= -->

       

      <mx:Image source = "{zoomBitmap}"

      x = "

      300"

      y = "

      0"

      width = "

      900"

      height = "

      180"/>

       

       

      <!-- =========== MY QUESTIONS AND COMMENTS ================= -->

       

      <mx:Text fontSize = "14"

      fontFamily = "

      Verdana"

      paddingLeft = "

      6">

       

      <mx:htmlText>

      <![CDATA[It seems that setting fontGridFitType to pixel <b>only half works!</b> It snaps the horizontal parts of the text

      to a pixel boundary but doesn't do anything with the uprights.

      <b>Am I missing something?</b>

      I would <b>love</b> to get my Flash/Flex text as clear as the HTML text.

      Also subpixel fontGridFitType doesn't seem to be different from pixel type.

       

      <i>Code precedent thanks to Peter deHaan.</i>

      ]]>

       

      </mx:htmlText>

       

      </mx:Text>

       

       

      </mx:VBox>

       

      </mx:WindowedApplication>