AS3 htmlText in TLFTextField with CSS <a> and <h> tag bugs

Question

Firstly, I know as3 doesn't like css or html and that there's about a billion questions on this forum alone about it, but after searching and searching I can't seem to find anything like what I'm experiencing. Please forgive me if this is painfully obvious to answer/has been answered already.

The Situation

• I have a project made in Flash CS6 with the coding on the timeline (I know this is bad, but it's too late to change)
• The project is importing a wordpress page that has been exported to an RSS feed and imported in flash as an xml file
• A TLF textfield (I can get it working with classic textfields, but want to try to get it to work with TLF for various reasons) is created and a loaded CSS sheet is applied via .stylesheet = and the text is set via .htmlText =

The Problems

There are a few glitches in the rendering of the text. I know Flash doesn't support all css tags, but even the basic ones aren't quite working. The exact problems are:

• A heading followed by a heading (i.e. < /h1>< h2>) is merged to the preceding heading (so both are formatted as < h1>), adding a < p/> tag between them seems to fix this, but adds a line break :/
• Bold and italic tags are proving difficult, replacing < strong> and < em> with < b> and < i> makes them work by themselves, but when they're mixed together (like this) they stop working altogether
• This is my main problem: links are always in blue, no matter what the CSS says, despite a:hover being correct (fix this and I could live with everything else)

I think the problem lies in my code somewhere, so here's the as3:

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.text.TextField;
import flash.events.ProgressEvent;
import fl.text.TLFTextField;

var fonts:Array = Font.enumerateFonts();
for each (var font:Font in fonts)
{
    trace( font.fontName+":"+font.fontType );
}

var rss_xml:XML = new XML();
var test_txt:TLFTextField = new TLFTextField  ;
with (test_txt)
{
    antiAliasType = AntiAliasType.ADVANCED;
    width = 940;
    height = 600;
    x = 0;
    y = 0;
    autoSize = TextFieldAutoSize.LEFT;
    wordWrap = true;
    embedFonts = true;
}
var sulsc_style:StyleSheet = new StyleSheet();
var css_loader:URLLoader = new URLLoader();

css_loader.load(new URLRequest("sulsc_style.css"));
css_loader.addEventListener(Event.COMPLETE, onCSSComplete);
function onCSSComplete(e:Event):void
{
    sulsc_style.parseCSS(e.target.data);
    rss_xml.ignoreWhitespace = false;
    var rss_loader:URLLoader = new URLLoader(new URLRequest("http://news.sulsc.org/feed"));
    rss_loader.addEventListener(Event.COMPLETE,rss_loaded);
    l.mode = "manual";
    rss_loader.addEventListener(ProgressEvent.PROGRESS,rss_load);
}

function rss_load(e:ProgressEvent):void
{
    //trace(e.bytesLoaded/(113*1024));
    l.setProgress(e.bytesLoaded,(113*1024));
}

function rss_loaded(e:Event):void
{
    removeChild(l);
    l = null;
    rss_xml = XML(e.target.data);
    rss_xml.ignoreWhiteSpace = true;
    var rss_raw:String = String(rss_xml);
    rss_raw = rss_raw.split(":encoded").join("");
    rss_raw = rss_raw.split("\n").join("");
    rss_raw = rss_raw.split("</h1><h2>").join("</h1><p/><h2>");
    rss_raw = rss_raw.split("</h2><h3>").join("</h2><p/><h3>");
    rss_raw = rss_raw.split("</h3><h4>").join("</h3><p/><h4>");
    rss_raw = rss_raw.split("</h4><h5>").join("</h4><p/><h5>");
    rss_raw = rss_raw.split("<strong>").join("<b>");
    rss_raw = rss_raw.split("</strong>").join("</b>");
    rss_raw = rss_raw.split("<em>").join("<i>");
    rss_raw = rss_raw.split("</em>").join("</i>");
    rss_xml = XML(rss_raw);
    test_txt.styleSheet = sulsc_style;
    test_txt;
    test_txt.htmlText = rss_xml.channel.item.(guid == "http://news.sulsc.org/?page_id=656").content;
    addChild(test_txt);
}

Here's the XML that it's reading:

<h1>Heading 1</h1><p/><h2>Heading 2</h2><p/><h3>Heading 3</h3><p/><h4>Heading 4</h4><p><a title="SULSC" href="http://www.sulsc.org">Isolated link.</a></p><p>Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh risus, elementum in tempor non, <a title="SULSC" href="http://www.sulsc.org">normal link</a>. Donec consequat arcu in nulla rhoncus aliquam. Fusce eu leo nunc, eget tempus risus. Aliquam imperdiet, sem non euismod blandit, nisi sapien pharetra leo, ac facilisis velit purus nec <i><b>bold italic</b></i>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales vulputate interdum. <del>Strikethrough</del> congue, purus ut rhoncus porttitor, erat velit iaculis libero, nec commodo leo dui eget ante. Vivamus volutpat sollicitudin vulputate.</p><blockquote><p>Block quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh risus, elementum in tempor non, malesuada ac nisl. Donec consequat arcu in nulla rhoncus aliquam. Fusce eu leo nunc, eget tempus risus. Aliquam imperdiet, sem non euismod blandit, nisi sapien pharetra leo, ac facilisis velit purus nec tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales vulputate interdum. Vestibulum congue, purus ut rhoncus porttitor, erat velit iaculis libero, nec commodo leo dui eget ante. Vivamus volutpat sollicitudin vulputate.</p></blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh risus, elementum in tempor non, malesuada ac nisl. Donec consequat arcu in nulla rhoncus aliquam. Fusce eu leo nunc, eget tempus risus. <i>Italic</i> imperdiet, sem non euismod blandit, nisi sapien pharetra leo, ac facilisis velit purus nec tellus. <b>BOLD</b> aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <a href="http://sulsc.org">Link</a> sodales vulputate interdum. Vestibulum congue, <a href="http://sulsc.org"><b><i>BOLD ITALIC LINK</i></b></a> ut rhoncus porttitor, erat velit iaculis libero, nec commodo leo dui eget ante. Vivamus volutpat sollicitudin vulputate.</p><ol><li>Numbered list</li><li>Number two</li><li>Number three</li></ol>

And here's the CSS that's being applied:

/*
leading is line height
*/
p, ol, ul, li, body {
    font-family: Fontin Sans Rg;
    font-size: 12pt;
    color: #666666;
    text-align: justify;
}
h1 {
    font-family: Nilland;
    font-size: 30pt;
    text-align:left;
    color: #999999;
}
h2 {
    font-family: Nilland;
    font-size: 20pt;
    color: #ff9900;
    margin-left:25px;
    letter-spacing: 1px;
}
h3 {
    font-family: GeosansLight;
    font-size: 16pt;
    text-align:left;
    color: #999999;
    margin-left:50px;
    letter-spacing: 1px;
}
h4, h5, h6 {
    font-family: GeosansLight;
    font-size: 14pt;
    text-align:left;
    color: #999999;
    margin-left:75px;
    letter-spacing: 1px;
}
ol, ul, li {
    margin-left: 50px;
}
b-quote,blockquote {
    font-family: Fontin Sans Rg;
    font-style:italic;
    color:#999999;
    margin-left: 100px;
    margin-right: 100px;
}
a, {
    text-decoration: underline;
    color: #666666;
}
a:hover {
    color: #FF9900;
    text-decoration: underline;
}

Combined they produce this:

If you have idea what I'm doing wrong, please let me know, but I am a complete novice so layman's terms would be appreciated (:

Answer 1

On the bold/italic issue, we found that we needed to have entirely separate fonts/classes to handle them. So you will need to export one each of a regular, italicized and bold styled font, and then wrap the appropriate sections in font tags. We use and to do a find/replace adding parentClassName_italic to the font tag, and then point to the exported font in the css. A real pita, but there you go.

Answer 2

Using a:link in the CSS sets the link style in flash.

Inserting a paragraph tag with a specific style (one that has no line height) effectively fixes the headings issue.

Haven't figured out bold and italic, but that's not really a major worry. If anyone does, let me know!

Here's the current working code for anyone who's interested:

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.text.TextField;
import flash.events.ProgressEvent;
import fl.text.TLFTextField;

var fonts:Array = Font.enumerateFonts();
for each (var font:Font in fonts)
{
    trace( font.fontName+":"+font.fontType );
}

var rss_xml:XML = new XML();
var test_txt:TLFTextField = new TLFTextField  ;
with (test_txt)
{
    antiAliasType = AntiAliasType.ADVANCED;
    width = 940;
    height = 600;
    x = 0;
    y = 0;
    autoSize = TextFieldAutoSize.LEFT;
    wordWrap = true;
    embedFonts = true;
}
var sulsc_style:StyleSheet = new StyleSheet();
var css_loader:URLLoader = new URLLoader();

css_loader.load(new URLRequest("sulsc_style.css"));
css_loader.addEventListener(Event.COMPLETE, onCSSComplete);
function onCSSComplete(e:Event):void
{
    sulsc_style.parseCSS(e.target.data);
    rss_xml.ignoreWhitespace = false;
    var rss_loader:URLLoader = new URLLoader(new URLRequest("http://news.sulsc.org/feed"));
    rss_loader.addEventListener(Event.COMPLETE,rss_loaded);
    l.mode = "manual";
    rss_loader.addEventListener(ProgressEvent.PROGRESS,rss_load);
}

function rss_load(e:ProgressEvent):void
{
    //trace(e.bytesLoaded/(113*1024));
    l.setProgress(e.bytesLoaded,(113*1024));
}

function rss_loaded(e:Event):void
{
    removeChild(l);
    l = null;
    rss_xml = XML(e.target.data);
    rss_xml.ignoreWhiteSpace = true;
    var rss_raw:String = String(rss_xml);
    rss_raw = rss_raw.split(":encoded").join("");
    rss_raw = rss_raw.split("\n").join("");
    rss_raw = rss_raw.split('<p style="text-align: right;">').join('<p class="right">');
    rss_raw = rss_raw.split('<p style="text-align: center;">').join('<p class="centre">');
    rss_raw = rss_raw.split('<p style="text-align: left;">').join('<p class="left">');
    rss_raw = rss_raw.split('<p style="text-align: justify;">').join('<p class="just">');
    var heading_replace:RegExp = new RegExp("(</h[0-9]>)(<h[0-9]>)","g9");
    var underline_replace:RegExp = new RegExp('<span style="text-decoration: underline;">(.*?)</span>',"gi");
    var bold_replace:RegExp = new RegExp('<strong>(.*?)</strong>',"gi");
    var italic_replace:RegExp = new RegExp('<em>(.*?)</em>',"gi");
    rss_raw = rss_raw.replace(heading_replace,'$1<p class="space"></p>$2');
    rss_raw = rss_raw.replace(underline_replace,'<u>$1</u>');
    rss_raw = rss_raw.replace(bold_replace,'<b>$1</b>');
    rss_raw = rss_raw.replace(italic_replace,'<i>$1</i>');
    rss_xml = XML(rss_raw);
    test_txt.styleSheet = sulsc_style;
    test_txt.htmlText = rss_xml.channel.item.(guid == "http://news.sulsc.org/?page_id=400").content;
    addChild(test_txt);
}

and the CSS:

/*
flash doesn't support:
-bold and italic
-strikethrough
*/
p, ol, ul, li, body {
    font-family: Fontin Sans Rg;
    font-size: 12pt;
    color: #666666;
    text-align: justify;
    padding-bottom: 12px;
    padding-top: 6px;
}
h1 {
    font-family: Nilland;
    font-size: 30pt;
    text-align:left;
    color: #999999;
}
h2 {
    font-family: Nilland;
    font-size: 20pt;
    color: #ff9900;
    margin-left:25px;
    letter-spacing: 1px;
}
h3 {
    font-family: GeosansLight;
    font-size: 16pt;
    text-align:left;
    color: #999999;
    margin-left:50px;
    letter-spacing: 1px;
}
h4, h5, h6 {
    font-family: GeosansLight;
    font-size: 14pt;
    text-align:left;
    color: #999999;
    margin-left:75px;
    letter-spacing: 1px;
}
ol, ul, li {
    margin-left: 50px;
    line-height:5px
}
b-quote,blockquote {
    font-family: Fontin Sans Rg;
    font-style:italic;
    color:#999999;
    margin-left: 100px;
    margin-right: 100px;
    padding-bottom: 12px;
}
a:link {
    text-decoration: underline;
    color: #666666;
}
a:hover {
    color: #FF9900;
    text-decoration: underline;
}
/* DO NOT DELETE THESE */
.space { 
    line-height:1px;
    padding-bottom: 0px;
    padding-top:0px;
}
.right {
    text-align:right;
}
.centre {
    text-align:center;
}
.left {
    text-align:left;
}
.just {
    text-align:justify;
}

Which makes:

Thanks for your help!

Answer 3

Like you said, Flash has its problems with StyleSheets. Maybe you should try setting the style direct in as3! Always worked for me!

var style:StyleSheet = new StyleSheet();

var hover:Object = new Object();
hover.color = "#FF9900";

var link:Object = new Object();
link.fontWeight = "bold";
link.textDecoration= "underline";
link.color = "#00FF00"; //green

style.setStyle("a:link", link);
style.setStyle("a:hover", hover);

html_txt.styleSheet = style;

That to the link problem! For the otherones i would have to test it myself, i'll update the answer when i do! But you could try and set all your Style attributes in as3.