Mangled Kerning Revisited—Now with Workaround!

 Aug, 14 - 2008   5 comments   How ToThings that are broken

(see the original Mangled Kerning post)

We decided when we started this blog it wasn’t going to be a bunch of whine, whine, whine such-and-such doesn’t work. If we couldn’t find a workaround of some sort, then we were just polluting the search space with more of the same “anyone else have an answer?” You may have dug through some of that to get here. There’s value in seeing you’re not the only one out there, but it’s so limited we decided to avoid it if at all possible.

So. You’ve got an autosized textfield. You want to use Anti-alias for readability. But you’ve noticed strange spacing problems around HTML anchors. You’ve got a few options. I’ve come back to edit this post several times after seeing opportunities to achieve the same fix with less effort, but I’m preserving some of the more complex work-arounds because the bug is so quirky, someone might have need to try one of the uglier approaches.

1) After setting the htmlText, access the height property of the field, then it’s safe to turn off autoSize which will allow correct kerning behavior:

var temp1 = (field.height)
field.autoSize = TextFieldAutoSize.NONE

You won’t have to wait additional frames or anything like that. Just remember to turn autoSize back on before changing the text.

2) Set the antiAliasType property of the TextField to flash.text.AntiAliasType.ADVANCED after the field has already been on the stage for at least two (count ’em: 2) frames. That’s frame 3 if you’re following along at home and your TextField was present on frame 1. Use the visible property to avoid epileptic seizures.

3) It would appear that only authoring-tool-placed TextFields require the extra 2 frames. Create a TextField from code, and you can set the antiAliasType property of the TextField to flash.text.AntiAliasType.ADVANCED in the next frame. Again, use the visible property to hide the layout jump:

var field = new TextField( 20, 20, 500, 1)

field.embedFonts = true
field.multiline = true
field.wordWrap = true
field.autoSize = TextFieldAutoSize.LEFT

var styles = new StyleSheet();
styles.setStyle("p", {fontFamily: "HelveticaNeueLT Std Med Cn", fontSize: "18", kerning: false, letterSpacing: 0, color: '#CCCCCC'})
styles.setStyle("a", {textDecoration: 'underline', kerning: false, letterSpacing: 0, color: '#FFFFFF'} );
field.styleSheet = styles

field.htmlText = "<p>This top line is necessary to push the content down because that matters somehow in this simple example of <a href=\"\">Quirky</a> text in Flash.</p>"

field.antiAliasType = flash.text.AntiAliasType.ADVANCED

4) If you must be a sadist, use a hybrid approach to replace authoring tool-placed TextFields with runtime-created TextFields while preserving position, dimensions, autoSizing, styles, etc. And after you’ve gone to all the trouble, don’t forget to set the antiAliasType to advanced. If you’re willing to let the original field handle the autoSizing, you can turn off autoSize on the dynamic field, size it according to the first field, and avoid having to wait a frame to set the antiAliasType as in #2. Just remember that if you need to change the field’s contents, you’ll have to turn autoSize back on. NOTE: Your mileage may vary, but I found that wordwrap was uneffected by this bug, so even though the kerning sometimes jumps around aggressively, I didn’t find any changes in wordwrapping, thus no changes in sizing to worry about … so far.

Related articles

 Comments 5 comments

  • Nic says:

    Many thanks for this. It was a life-saver.

    Also a similar problem can occur when there are invisible characters in the XML file. If this fix doesn’t solve your problems, try opening the XML file in an editor and viewing ‘invisible’ characters. You may need to strip them out.

    Thanks again

  • Cel says:

    O wow, this solution worked an absolute treat.

    I’ve spent 2 days trying to find a workaround for this nasty bug.

    Thanks for publishing your findings !

  • graybob says:

    THANK YOU!!!!!!!!!!!!!!!

  • Bjorn says:

    Thank you. Thank you. Thank you.
    I’ve spent so many hours on this problem, testing, searching, that it aint even funny. An half hour ago i stumbled upon the suggestion that it might be the antialias that could be the culprit, which led (googled) me here. Solution 1 worked like a charm for me.
    You’re my hero.


  • Og2t says:

    There’s another (simpler) solutoin to this, just check my post at


  • Leave a Reply

    Your email address will not be published. Fields with * are mandatory.