Question

EDIT:

It looks like a bug in AIR.

I’ve reported it here: https://bugbase.adobe.com/index.cfm?event=bug&id=2955444

please vote on it ↑

---

Problem:

I’ve tried to display white text on a colored background in FlashPlayer & AIR runtime. Unfortunately, the text displayed in the AIR runtime looks much worse, than FlashPlayer one.

Here is how does it look (AIR version at top, FlashPlayer at bottom):

IMG: http://imageshack.us/photo/my-images/710/fontcomparison.png/

So, the question is,

• why there is such a difference?
• how to resolve this issue, so the text in AIR looks exactly like FlashPlayer one (without font embedding)?

code:
main.mxml:

<?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:Style source="style.css" />
    <s:Label text="() sample text ()" styleName="test" />
</s:Application>

style.css:

/* style.css CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.test {
    font-family: Arial;
    font-size: 10;
    font-weight: bold;
    color: white;

    background-color: #BC2C49;
    paddingBottom:10px;
    paddingLeft:10px;
    paddingRight:10px;
    paddingTop:10px;
}

Answer 1

I’ve finally found a workaround (based on fact, that fonts are drawn correctly on bitmaps). Feel free to use it, just replace <s:Label ...>, with <components:LabelWorkaround .../>.

package components
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;

    import spark.components.Label;

    /**
     * <p>This class is a simple workaround for a bug 
     * <a href="https://bugbase.adobe.com/index.cfm?event=bug&id=2955444">#2955444</a>.
     * The trick is to draw base text on a <u>non-transparent</u> bitmap, so it renders correctly.</p>
     *
     * <p>Unfortunately if you would like to have background color other than white, <br/>
     * then you have to pass it using styles.</p>
     * 
     * @author Filip Zawada
     * @license Free to commercial use.
     * 
     * @see spark.components.Label
     * @see flash.display.BitmapData
     */
    public class LabelWorkaround extends Label
    {
        private var textBitmapData:BitmapData;
        private const textBitmap:Bitmap = new Bitmap();

        public function LabelWorkaround()
        {
            super();
            addChild(textBitmap);
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            textBitmap.visible = false; // turn off bitmap layer, to draw base text
            textBitmapData = new BitmapData(unscaledWidth, unscaledHeight, false);
            textBitmapData.draw(this); // render modified base text
            textBitmap.bitmapData = textBitmapData;
            textBitmap.visible = true; // turn on bitmap layer
        }

    }
}