Mangled Kerning in Flash HTML Text

 Jul, 26 - 2008   7 comments   Things that are broken

Work long enough with Flash and dynamic textfields, and you'll probably run into this one—words that appear to have an extra and/or missing space preceding or following them, often when a link is introduced via the <A> tag. It doesn't happen with every font (I was using Helvetica Condensed—other condensed fonts seemed faulty as well), it doesn't happen with every link (certain letter combinations have a high degree of reproducability, others no problem).

I spent half a day narrowing it down. Since my text was originating from XML, it first masqueraded as some sort of entity or character encoding problem. I messed with TextFormat and StyleSheet (mutually exclusive by-the-way). A later wild goose test-case showed that flipping the autosize flag off made the issue disappear. Fine, but I need autosizing.

When Andreas Heim pointed out the solution, I remembered I'd run into this before: "Do you happen to be using 'Anti-alias for readability?'" Sure enough, flip it to "Anti-alias for animation" and all's well with the world.

I can only hope that the Flash 10 player addresses this bug. With all the work that's gone into its type rendering features in this revision, I'd certainly assume so. I'll post some test cases / screenshots in the next update.

Download example FLA & SWF

Update: Screenshot of effected swf. Verified broken in Flash 10 beta player. :(


Related articles

 Comments 7 comments

  • Kramer auto Pingback[...] change, and sometimes the new layout is also incorrect. More info, screenshot, sample FLA/SWF: http://karoshiethos.com/2008/07/26/mangled-kerning-in-flash-html-text/ Show » Note: broken in both v9 and v10 beta 2 Steps to reproduce: 1. Multiline HTML [...]

  • dude… thanks! darn issue! too bad anti-alias for animation isn’t as crisp

    ReplyReply
  • lauritz says:

    thanks for this great post! i had exactly the same problem with jumpig text links. unfortunately the error issn’t corrected in flash 10.

    ReplyReply
  • wagster says:

    I had dancing text when I rolled over links – only by a pixel or so but still horrible to look at.  I fixed it by changing TextFieldAutoSize.LEFT to TextFieldAutoSize.CENTRE.  It was a fixed width field that expanded downwards so it made no difference functionally, but I shouldn’t have had to…

    ReplyReply
  • Og2t says:

    I’ve got a very simple fix to this problem, go to http://play.blog2t.net/fixing-jumpy-htmltext-links and download the linkes .zip file with FixedTextField class. Then replace your example code in the first frame to this:

    <pre>
    import flash.text.*
    import net.blog2t.text.*;

    a.autoSize = TextFieldAutoSize.LEFT
    b.autoSize = TextFieldAutoSize.LEFT
    c.autoSize = TextFieldAutoSize.LEFT
    d.autoSize = TextFieldAutoSize.LEFT

    var ac:FixedTextField = new FixedTextField(a);
    var bc:FixedTextField = new FixedTextField(b);
    var cc:FixedTextField = new FixedTextField(c);
    var dc:FixedTextField = new FixedTextField(d);

    addChild(ac);
    addChild(bc);
    addChild(cc);
    addChild(dc);

    var styles = new StyleSheet();
    styles.setStyle(“p”, {kerning: false, letterSpacing: 0, color: ‘#CCCCCC’})
    styles.setStyle(“a”, {textDecoration: ‘underline’, kerning: false, letterSpacing: 0, color: ‘#FFFFFF’} );
    ac.styleSheet = styles
    bc.styleSheet = styles

    ac.htmlText = bc.htmlText = cc.htmlText = dc.htmlText = “<p>This top line is necessary to push the content down because that matters somehow in this simple example of <a href=\”http://google.com\”>Quirky</a> text in Flash.</p>”
    </pre>

    Voila! :-)

    ReplyReply
  • drewb2b says:

    Son… of… a…

    That did it!

    You would not believe how much this problem has been plaguing me over the last 2 weeks.  I just could not find a solution no matter where I looked.

    However big or small… thank you, thank you, thank you.

    ReplyReply

  • Leave a Reply

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

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>