Click here to get a complete list of blogentries.

Broken Bad letter spacing in Flash on Macs with “_sans” and Helvetica

Cross-platform font support? Every platform (Windows, Mac, Linux, …) has their own set of standard fonts? You never really know what fonts a user has installed? Flash provides a solution for this: standard font family names! By using “_sans”, “_monospace” and “_serif” the Flash player automatically chooses a font accessible on the system that has no serifs (“_sans”), is mono-spaced (“_monospace”) or has serifs (“_serif”).

So, if you decide to use e.g. “_sans” the player will first look for “Arial” then for “Helvetica”. While this works great on Windows machines it fails on most Apple Macs. On Macs the player will always choose “Helvetica”. Unfortunately, on many Macs the font looks broken with weird spacing between certain letters.

I really banged my head over this one. I tried setting kerning and letter-spacing in the TextFormat object to no avail. Eventually, I simply tried out most of the different fonts on Macs and realized that only “Helvetica” had this problem. Apple provides an “Helvetica” alternative called “Helvetica Neue”, which is the same as “Helvetica” except it does not have the aforementioned problems.

So, to fix the “_sans” problem in our project I wrote a little workaround, which goes like this:

When a TextField with “_sans” font family should be created, I check if the font “Helvetica Neue” is present on the system. If it is there, I can be pretty sure that there also is a defective “Helvetica” font on the system, too.
(check Font.enumerateFonts())

So, if “Helvetica Neue” is there, I replace “_sans” with “Helvetica Neue” and suddenly everything is fine.

It took me a whole afternoon to find that out. Hopefully, if somebody else runs into this problem, this post will prevent him/her to waste their time by finding that out again.

Coding Example

Alright, to make things a bit easier to understand the matter I'll put down some code as well:

import flash.text.Font;
import flash.text.TextField;
import flash.text.TextFormat;

/*	
	This function takes a font name and converts into the correct Mac font name
	if neccessary.	
*/

private static function GetMacFontName(_font:String):String 
{
	// only do something if the specified font is _sans
	if (_font != "_sans")
		return _font;
		
	// if the new helvetica is installed, force flash to use this one
	// go through all installed fonts and check if "Helvetica Neue" is present
	var allFonts:Array = Font.enumerateFonts(true);
	for each (var font:Font in allFonts)
	{
		if (font.fontName == "Helvetica Neue")
		{
			// "Helvetica Neue" is there so use it instead of "_sans"
			return font.fontName;
		}
	}
	
	return _font;
}	

So, with the function above we can turn "_sans" into the correct font on Macs and PC. Now, let's have a look at how you can use the method:

// create a text field and put some text into it
var textfield:TextField = new TextField();
textfield.text = "This is a text correctly rendered with _sans! ... Or so I hope.";
textfield.width = stage.stageWidth;		

// create and set TextFormat with the device-specific font	
var txtFormat:TextFormat = new TextFormat(GetMacFontName("_sans"), 14, 0x000000, true);
textfield.setTextFormat(txtFormat);			

// show the textfield
stage.addChild(textfield);

So, instead of passing "_sans" directly into the TextFormat's constructor, we pass it through the GetMacFontName()-method first. Now, your fonts should look fine!

Posted on 2010/9/12

---

blog comments powered by Disqus

Imprint: Small print: disclaimer

Important People: Jörg Winterstein Jazzoid Dirk Schreiter Thomas Schreiter Chris Noeth Rafael van Daele-Hunt Lars Kranebitter Ronny Kober

Important Links: sucodo (plagiarism detection) Gameforge Inside Hacker News Golem Heise SLAY RADIO