TextFields and pure HTML – it’s a mess

September 3, 2010

Estimated Reading Time: 3min

Handling HTML in Flash TextFields as you all know is far from easy and intuitive. One thing that really drove me crazy is the fact that when adding Text or HTML to a TextField that already has HTML-Text in it a lot of weird or at least not quite intuitive things happen:

The problems

new <p>’s everywhere…

If you try this:

var txtField:TextField = new TextField();
txtField.multiline = true;
addChild(txtField);
			
txtField.htmlText = "Text";
txtField.htmlText += "more Text"

What you get is:

Text
more Text

And if you trace(txtField.htmlText) you see what has happened:

<P ALIGN="LEFT">
<FONT FACE="Times New Roman" SIZE="12" COLOR="#000000" LETTERSPACING="0" KERNING="0">Text</FONT>
</P>
<P ALIGN="LEFT">
<FONT FACE="Times New Roman" SIZE="12" COLOR="#000000" LETTERSPACING="0" KERNING="0">more Text</FONT>
</P>

That’s definitely not what I have expected.

What happened to my format?

Another weird thing comes from malformed HTML:

var txtField:TextField = new TextField();
txtField.multiline = true;
addChild(txtField);			
txtField.htmlText = "TEXT<b>TEXT";
txtField.htmlText = "TEXT";

Again, what’s expected is…

TEXT

…and what you get is…

TEXT

Somehow the malformed html causes the TextField to mess up the defaultTextFormat.

The solution

So what are we going to do about this?
The first problem is caused by the inner workings of the TextField Class. The only solution is to store the HTML-Text apart from the TextField internals and completely reassigning the complete text whenever something is changed:

var txtField:TextField = new TextField();
txtField.multiline = true;
addChild(txtField);

var htmlText:String;
htmlText = "Text";
txtField.htmlText = htmlText;
htmlText += "more Text";
txtField.htmlText = htmlText;

The second problem can be solved if you clear the defaultTextFormat whenever you assign text:

var txtField:TextField = new TextField();
txtField.multiline = true;
addChild(txtField);
			
var defaulTextFormatStorage:TextFormat = txtField.defaultTextFormat;
			
txtField.htmlText = "TEXT<b>TEXT";
txtField.defaultTextFormat = defaulTextFormatStorage;
txtField.htmlText = "TEXT";

TextFieldHTML

To handle all this for you I created a class: TextFieldHTML. It is really easy to use:

//create a normal Textfield
txtFieldHTML = new TextField();
txtFieldHTML.x = 10;
txtFieldHTML.y = 100;
txtFieldHTML.width = 370;
txtFieldHTML.height = 100;
txtFieldHTML.multiline = true;
txtFieldHTML.wordWrap = true;
txtFieldHTML.background = true;
txtFieldHTML.backgroundColor = 0xCBF23D;
addChild(txtFieldHTML);

//assign this TextField to the TextFieldHTML Class
txtFieldHTMLManager = new TextFieldHTML(txtFieldHTML);

//assign htmlText as usual
txtFieldHTMLManager.htmlText = "<p>Text REPLACETHIS</p>";
//add new html directly at the TextFieldHTML without messing up and unwanted new <p>'s
txtFieldHTMLManager.htmlText += "<P>new Line</P><P>new Line</P><p><b>malformed HTML";
txtFieldHTMLManager.appendText("</b></p><p>no color <FONT FACE='Verdana' SIZE='20' COLOR='#00A0FF'>color!</FONT> no color</p>");
//replace text affecting the pure HTML not only the text
txtFieldHTMLManager.replaceText(3, 19, "REPLACED");

And finally you can try it yourself.

At the top you can enter your HTML. Below you see the result and at the bottom you see the HTML Flash creates after assigning your nicely hand crafted HTML to a TextField.

Get Adobe Flash player