<p>I have a weird bug involving Flash text and hyperlinks, htmlText in a TextField with <code>&lt;a&gt;</code> tags seem to truncate surrounding space:</p>

<p><a href="https://i.stack.imgur.com/FDA7a.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FDA7a.gif" alt="output"></a></p>

<p>Once I place my cursor over the text, it "fixes" itself:</p>

<p><a href="https://i.stack.imgur.com/YFbSR.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YFbSR.gif" alt="output with mouseover"></a></p>

<p>Here is the HTML in the textField:</p>

<pre><code>&lt;p&gt;The speeches at both the &lt;a href="http://www.demconvention.com/speeches/" target="_blank"&gt;Democratic National Convention&lt;/a&gt; last week and the &lt;a href="http://www.gopconvention2008.com/videos" target="_blank"&gt;Republican National Convention&lt;/a&gt; this week, have been, for me at least, must see TV.&lt;/p&gt;
</code></pre>

<p>When I disable the styleSheet attached to it, the effect still occurs, but placing my mouse over it does not fix the spacing. I am using "Anti-alias for readability", and have embedded the all Uppercase, Lowercase, Numerals, and Punctuation. I will also point out that if I change the rendering setting to "Use Device fonts" the bug goes away.</p>

<p>Any thoughts?</p>

[{'answer_id': 51590, 'author': 'Jon Cram', 'author_id': 5343, 'author_profile': 'https://Stackoverflow.com/users/5343', 'pm_score': 0, 'selected': False, 'text': '<p>Does it make any difference if you put non-breaking spaces immediately before and after the anchor element?</p>\n\n<pre><code>&lt;p&gt; ... &amp;nbsp;&lt;a ... &gt;Link text&lt;/a&gt;&amp;nbsp; ... &lt;/p&gt;\n</code></pre>\n\n<p>Admittedly a workaround at best but it might buy you some time to research a real solution.</p>\n'}, {'answer_id': 126075, 'author': 'Brian Hodge', 'author_id': 20628, 'author_profile': 'https://Stackoverflow.com/users/20628', 'pm_score': 1, 'selected': False, 'text': '<p>Make sure you styleSheet declares what it is supposed to do with Anchors.  You are obviously using htmlText if your using CSS so soon as it sees &lt; in front of "a href" it immedietly looks for the CSS class definition for a and when it doesn\'t find one, the result is the different looking text you see.</p>\n\n<p>Add the following to your CSS and make sure that it has the same settings as the regular style of your text as far as style, wieght, and size.  The only thing that should differ is the color.</p>\n\n<pre>\na:link\n{\n   font-family: sameAsReg;\n   font-size: 12px; //Note flash omits things like px and pt.\n   color:#FF0000; //Red\n}\n</pre>\n\n<p>Be sure that the fonts you are embedding are in the library and being instantiated into your code.  Embedding each textfield through the UI is silly when you can merely load the font from the library at runtime and then you can use it anywhere.  </p>\n\n<p>You can also import multiple fonts at compile time and use them in the same textfield with the use of &lt; class span="someCSSClass">Some Text &lt; /span>&lt; class span="someOtherCSSClass">Some Other Text &lt; /span></p>\n\n<p>Good luck and I hope this helps.</p>\n'}, {'answer_id': 1827708, 'author': 'Sandro', 'author_id': 107797, 'author_profile': 'https://Stackoverflow.com/users/107797', 'pm_score': 1, 'selected': False, 'text': '<p>Holy cow just had the same problem. Apparently the order in which you set the variables matters. Look a the sixth reply on <a href="http://forum.sephiroth.it/showthread.php?t=10000&amp;page=2" rel="nofollow noreferrer">this thread</a>. I also noticed that this only occurs with AntiAliasType.ADVANCED, which is the default on a TextField.</p>\n\n<pre><code>_description = new TextField();\n_description.selectable = false;\n_description.width = WIDTH; // Global.\naddChild(_description);\n\nvar myriadPro:Font = new MyriadPro(); // Embedded font.\nvar style:StyleSheet = new StyleSheet();\n\nvar styleObj:Object = new Object();\nstyleObj.fontFamily = myriadPro.fontName;\nstyleObj.fontSize   = 13;\nstyleObj.textAlign  = "left";\nstyleObj.color      = "#FFFFFF";\n\nstyle.setStyle("p", styleObj);\nstyle.setStyle("a:link", styleObj);\nstyle.setStyle("a:hover", styleObj);\n\n_description.autoSize = TextFieldAutoSize.LEFT;\n_description.antiAliasType = AntiAliasType.ADVANCED;\n_description.condenseWhite = true;\n_description.wordWrap   = true;\n_description.multiline  = true;\n_description.embedFonts = true;\n\n_description.styleSheet = style;\n_description.htmlText = \'&lt;p&gt;A short description with an &lt;a href="http://www.example.com/"&gt;HTML&lt;/a&gt; link that can be clicked.&lt;/p&gt;\';\n</code></pre>\n'}, {'answer_id': 3054815, 'author': 'Sean Higgins', 'author_id': 368413, 'author_profile': 'https://Stackoverflow.com/users/368413', 'pm_score': 1, 'selected': False, 'text': '<p>I was having this issue also and found setting the following fixed it for me.</p>\n\n<pre><code>yourTextField.gridFitType = GridFitType.SUBPIXEL;\n</code></pre>\n\n<p>It looks as though it might be caused by when the <code>AntiAliasType</code> is set to advanced which defaults to a PIXEL gridFitType. I presume its shifting some of the copy as its trying to fix the characters to whole pixel values.</p>\n'}, {'answer_id': 3292065, 'author': 'Robin', 'author_id': 397025, 'author_profile': 'https://Stackoverflow.com/users/397025', 'pm_score': 1, 'selected': False, 'text': '<p>I tried all the above, but found making sure autosize = false was what fixed it for me.</p>\n'}, {'answer_id': 5108229, 'author': 'foti', 'author_id': 632792, 'author_profile': 'https://Stackoverflow.com/users/632792', 'pm_score': 1, 'selected': False, 'text': "<p>I had the same problem. If you set autoSize to center, it gets rid of the problem. I don't know why but it does fix it. It seems to be a Flash bug.</p>\n"}]
['https://Stackoverflow.com/questions/50005', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1306/']