Font Rendering - problem with...

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.

And this is the code

%26lt;?xml version = ''1.0'' encoding = ''utf-8''?%26gt;

%26lt;mx:WindowedApplication

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

layout = ''

absolute''

width = ''

900''

height = ''

500''%26gt;

%26lt;mx:Script%26gt;

%26lt;![CDATA[

import mx.graphics.ImageSnapshot;

[

Bindable]

private var zoomBitmap:Bitmap;

]]%26gt;

%26lt;/mx:Script%26gt;

%26lt;mx:Style%26gt;

@font-face {

src: local(''Verdana'');

fontFamily: ''VerdanaEmbedded'';

advancedAntiAliasing: true;

}

Label {

fontFamily: VerdanaEmbedded;

}

%26lt;/mx:Style%26gt;

%26lt;mx:Boolean id = ''isAdvanced''%26gt;

{antiAliasTypeComboBox.selectedIndex == 1}

%26lt;/mx:Boolean%26gt;

%26lt;mx:VBox%26gt;

%26lt;mx:HBox%26gt;

%26lt;!-- =========== THE CONTROL PANEL ================= --%26gt;

%26lt;mx:Form%26gt;

%26lt;mx:FormItem label = ''fontAntiAliasType:''%26gt;

%26lt;mx:ComboBox id = ''antiAliasTypeComboBox''

dataProvider = ''

['normal','advanced']''

selectedIndex = ''

1''/%26gt;

%26lt;/mx:FormItem%26gt;

%26lt;mx:FormItem label = ''fontSharpness:''

enabled = ''

{isAdvanced}''%26gt;

%26lt;mx:HSlider id = ''sharpnessSlider''

minimum = ''

-400''

maximum = ''

400''

value = ''

0''

liveDragging = ''

true''

snapInterval = ''

1''

tickInterval = ''

20''/%26gt;

%26lt;/mx:FormItem%26gt;

%26lt;mx:FormItem label = ''fontThickness:''

enabled = ''

{isAdvanced}''%26gt;

%26lt;mx:HSlider id = ''thicknessSlider''

minimum = ''

-200''

maximum = ''

200''

value = ''

0''

liveDragging = ''

true''

snapInterval = ''

1''

tickInterval = ''

10''/%26gt;

%26lt;/mx:FormItem%26gt;

%26lt;mx:FormItem label = ''fontGridFitType:''

enabled = ''

{isAdvanced}''%26gt;

%26lt;mx:ComboBox id = ''gridFitTypeComboBox''

dataProvider = ''

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

selectedIndex = ''

1''/%26gt;

%26lt;/mx:FormItem%26gt;

%26lt;/mx:Form%26gt;

%26lt;mx:VBox%26gt;

%26lt;mx:Label text = ''Verdana - 12 pixels high''/%26gt;

%26lt;mx:HBox%26gt;

%26lt;!-- =========== THE TEXT EXAMPLE RESULTS ================= --%26gt;

%26lt;mx:Canvas id = ''resultsCanvas''

width = ''

300''

height = ''

60''

backgroundColor = ''

0xffffff''%26gt;

%26lt;mx:HTML id = ''helpHtml''

width = ''

300''

height = ''

20''%26gt;

%26lt;mx:htmlText%26gt;

%26lt;![CDATA[%26lt;html%26gt;%26lt;body style=''background-color:#FFFFFF; width:300px; margin:0px; padding:0px; font-family: Verdana; font-size:12px; text-align:center'' ;%26gt;[HELLO hello Font Rendering - problem with... GOODBYE goodbye]%26lt;/body%26gt;%26lt;/html%26gt; ]]%26gt;

%26lt;/mx:htmlText%26gt;

%26lt;/mx:HTML%26gt;

%26lt;mx:Label id = ''lbl1''

y = ''

20''

width = ''

300''

height = ''

20''

textAlign = ''

center''

text = ''

[HELLO hello Font Rendering - problem with... GOODBYE goodbye]''

fontSize = ''

12''

fontAntiAliasType = ''

{antiAliasTypeComboBox.selectedItem}''

fontSharpness = ''

{sharpnessSlider.value}''

fontThickness = ''

{thicknessSlider.value}''

fontGridFitType = ''

{gridFitTypeComboBox.selectedItem}''

truncateToFit = ''

false''/%26gt;

%26lt;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))''%26gt;

%26lt;/mx:Label%26gt;

%26lt;/mx:Canvas%26gt;

%26lt;mx:Canvas%26gt;

%26lt;mx:Label text = ''%26amp;lt;-- Lovely clear text rendered in a HTML control''

height = ''

20''/%26gt;

%26lt;mx:Label text = ''%26amp;lt;-- blury text rendered by Flash/Flex''

height = ''

20''

y = ''

20''/%26gt;

%26lt;mx:Label text = ''%26amp;lt;-- and again half a pixel to the left''

height = ''

20''

y = ''

40''/%26gt;

%26lt;/mx:Canvas%26gt;

%26lt;/mx:HBox%26gt;

%26lt;/mx:VBox%26gt;

%26lt;/mx:HBox%26gt;

%26lt;!-- =========== 3xZOOM OF THE TEXT EXAMPLE RESULTS ================= --%26gt;

%26lt;mx:Image source = ''{zoomBitmap}''

x = ''

300''

y = ''

0''

width = ''

900''

height = ''

180''/%26gt;

%26lt;!-- =========== MY QUESTIONS AND COMMENTS ================= --%26gt;

%26lt;mx:Text fontSize = ''14''

fontFamily = ''

Verdana''

paddingLeft = ''

6''%26gt;

%26lt;mx:htmlText%26gt;

%26lt;![CDATA[It seems that setting fontGridFitType to pixel %26lt;b%26gt;only half works!%26lt;/b%26gt; It snaps the horizontal parts of the text

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

%26lt;b%26gt;Am I missing something?%26lt;/b%26gt;

I would %26lt;b%26gt;love%26lt;/b%26gt; to get my Flash/Flex text as clear as the HTML text.

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

%26lt;i%26gt;Code precedent thanks to Peter deHaan.%26lt;/i%26gt;

]]%26gt;

%26lt;/mx:htmlText%26gt;

%26lt;/mx:Text%26gt;

%26lt;/mx:VBox%26gt;

%26lt;/mx:WindowedApplication%26gt;