Device font rendering in Flash content has always had some limitations, including the inability for text to be correctly scaled, rotated, and faded. Due to these limitations many developers using Flex resort to embedding fonts. But this can really bloat the size of applications – especially when working with non-English languages. Luckily Flash Player 10 / AIR 1.5 added a new font engine! To make using the new engine easy Adobe also created an open source library called the Text Layout Framework, which wraps Flash Player’s low level text APIs. Flex 4 Spark components use the Text Layout Framework for all text rendering. The end result is much better device font support in Flex applications. Here’s a quick example (view source):
Drag the slider to change the scaleX and scaleY on the Panels. Notice how the Flex 3 / Flash Player 9 text jumps around and flickers. And then notice how the Flex 4 / Flash Player 10 text looks wonderful as it scales up and down! That makes me happy.
Fonts in Flex 4 / Flash Player 10 / AIR 1.5 Make Me Happy
This entry was posted in Adobe AIR, Flash Player, Flex. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
12 Comments
Could you enlighten us with a second version of this demo with embedded fonts? Enough has changed to leave me confused.
They are both using device fonts. The top one is ultimately using the old font engine in Flash Player while the bottom one is using the new font engine.
-James
That change is a *really* welcome one! At least the font metrics are getting predictable, which is helpful if you design for tight layouts while having font size flexibility (e.g. NS travelplanner widget).
Cheers!
On linux the rendering is worse than normal font rendering…
Hi Andrej,
I use Ubuntu (jaunty and karmic) with Flash Player 10,0,32,18 and the Flex 4 font rendering looks just as good as it does on Windows. What flavor of Linux do you use? What version of Flash Player?
-James
Is it now possible to rotate/skew or fade system fonts? That’s still the biggest limitation in my book.
Hi Gilles,
Sorry I wasn’t more explicit in my post about all the features of the new Text APIs. Yes, you can do all those things now on device fonts. Here are some demos:
http://labs.adobe.com/technologies/textlayout/
http://labs.adobe.com/technologies/textlayout/demos/
-James
Do you still get this result using halo components compiled against sdk 4/fp10?
Hi Bjorn,
The Flex 3 / Flash Player 9 demo is actually compiled against SDK 4 / FP 10. Today Halo in Flex 4 still uses the old text rendering APIs. I’m not sure if they are planning on changing that.
-James
Any particular reason why the text in the first version (Flex 3/FP 9) is selectable but the one in the second version is not?
Hi Don,
I used a Spark (Flex 4) component which doesn’t support selection. I should have used RichEditableText which is selectable. Either way the font scaling would be the same.
-James
By the way, the example app exhibits a bug where the bottom line of text doesn’t show up. I’ve moaned about it and produced a workaround – here
SDK-16876