Mangled Kerning in Flash HTML Text
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.
Update: Screenshot of effected swf. Verified broken in Flash 10 beta player. 🙁
[…] the original Mangled Kerning […]
dude… thanks! darn issue! too bad anti-alias for animation isn’t as crisp
thanks for this great post! i had exactly the same problem with jumpig text links. unfortunately the error issn’t corrected in flash 10.
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…
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! 🙂
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.