Adobe AIR Runtime Font Differences

This was a heck of a problem to discover and even worse to try to figure out why. Sadly, I did not find a good solution the problem. I will give the short and sweet rundown of the issue. You have three different machines, three different operating system, the same version of Flex Builder (3.0.2), and the same code base. Now you would think that when you create a release version of an AIR application on one machine, then deploy it on another, you would get consistent results. However, we experienced that an AIR file created one Windows environment was different from the AIR file created on another Windows environment and a Mac machine. The difference was visible with the fonts displayed in the application.

I have to be clear about this part, because first you might think that the fonts are rendered differently on each machine because we didn’t embed the font within the application. So you would see different fonts on a Mac or from one PC to another. That would be a good guess, but you would be wrong. I have running on my Mac three copies of our AIR application (app_1.air, app_2.air, app_3.air), running side-by-side at the same time on the same screen. All three applications compiled form the same exact code base, but from different machines (two PC’s and one Mac).

One version of the application shows clearly readable fonts, the others two applicaions show thinner more jaggy fonts with some color differences. The most significant differences are displayed with italic text and text on fonts. I couldn’t believe it myself, but I have a screen shot to prove it. Below you can see all three applications. The screen shot was taken of the applications side-by-side and then changed in Photoshop for better display on the blog page (vertical instead of horizontal). You will notice that one has better looking text, thicker, richer colors, and just more readable. The other two are crap, well, not as readable, especially the button text and the italic text.

Image

The middle application clearly has the best displayed fonts, even though they are all running on the same exact machine, there is noticeable display differences. The only difference is the machine that compiled each AIR file. The font on the tabs is thicker for the middle one, the button fonts are clearer and thicker for the middle one, and the italic font is more readable. I don’t know how to fix this issue, embedding fonts did not work, installing the same fonts on each machine didn’t work, nothing helped! Why do some machines produce a better quality AIR file while others produce jaggy text? I couldn’t find any information on this problem, so please let me know if anyone has any solution.

UPDATE

If you run your AIR package on a Windows machine with “clear type” turned on, then it actually produces better fonts. This makes all three applications look identical on a PC, but with clear type off, then only one of the applications looks good. The application generated on the Mac, and generated on the PC with clear Type on, still look the degraded when compared to the middle application.

The best solution I could find to have a consistent look for the AIR application when created from different computers is to embed fonts within the application. Still does not solve the reason why there was a difference, but it does offer a temporary solution. For more information on embedding fonts check out Adobe docs on the topic.

– Mister

6 Comments

  1. For the two Windows machines, try comparing the ClearType settings and see if one has it enabled and the other doesn’t, or see if they have different settings.

    Display Properties -> Appearance tab -> Effects -> “Use the following method to smooth edges of screen fonts:”.

    I have mine deselected, but one machine may have it set to “Standard” or “ClearType”, or whatever.

    Peter

    1. @ Peter

      Remember that I viewed all three applications on both Windows and Mac at the same time, meaning I had all three applications running at the same time on each test machine side-by-side. There should be no difference in the fonts displayed for the applications. If you are saying that having “ClearType” enabled on the machine that creates the AIR runtime package, then this is still whacked. It would mean that you always have to create the runtime on a Windows machine to produce a higher quality AIR runtime application. This seems to be counter-intuitive to the purpose of AIR, which is to have the same application run on multiple operating systems without any difference in the application. I can’t imagine always having to do my work on my Mac, then run over to my Windows machine and compile my runtime to achieve optimum results. Of course I would have to be sure I have at least one machine that produces the clear fonts because one version was created on another Windows machine and still the fonts are different.

  2. You dont’t think this could have anything to do with window position, i.e, if the window is on a half pixel, the anti-aliasing is different? Could try pixel snapping it you havn’t already.

    For the record I don’t see any significant difference in the screen shots, apart from a missing tab on the Windows XP, and the tab text is slightly thicker on the middle example (actually prefer the others, the middle one looks like it’s got glow on). I certainly wouldn’t descibe any as “crap”. Maybe a screenshot dosn’t show the problem correctly, as it is a bitmap being interpreted by our graphic cards, not a font. You might consider posting a small test app for people to try and post feedback?

    1. @Peter Stromberg

      I viewed all three applications simultaneously on both a Windows machine and a Mac machine in different positions, there was no difference when moving the applications to different window positions. I believe that there is something different when creating an AIR file on certain machines as opposed to others. The question then is, what is significant about the environment of the computer/os of the machine that produced the middle image? When I described the text as “crap”, I was talking more about the text on the buttons and the italic text, this is the area of the most significant readability issues. My hypothesis was that creating an AIR file on three different machines, and then running those AIR files on a single machine would show that it was in fact the machine that produced the AIR file that somehow caused the display differences. It does not matter which machine you run the three files on, you always get the same results. Something about the Windows XP Pro machine produced different fonts than the AIR files created on the other two machines. It is as if the AIR file is being “injected” with some quality by the Windows XP Pro machine that is not happening with the other two machines.

      My other theory is that there is some element of the Flex Properties that is different from machine to machine, but I just don’t know what it is. My other thought was that some how the application is scaling the fonts slightly, causing the effect on the fonts. I say this because we just checked out the code with the .flexProperties file already attached, rather than create a new Flex project and just adding the class files. I will test this soon.

  3. @Peter deHaan I think your solution works for displaying the applications on the PC, they all look the same. But when displayed on the Mac, two of the applications still show the same font differences as before, even though two of the applications were generated on Windows with cleartype on.

Comments are closed.