A Few <P>s on HTML Display in Flash

If you intend to repurpose html-formatted text for use in Flash, you will be surprised by Flash’s rather unique parsing. This can be a pleasant surprise [like when Flash skates over certain tags that you can then reserve for browser-only content], but this can also be a very frustrating constraint. A glaring case in point is Flash’s parsing of the paragraph tag.

The standard browser method of displaying a paragraph is to block the text and follow it with a line feed. This provides a visual gutter between paragraphs and improves legibility of the text. In Flash, the paragraph tag blocks the text and follows it with a break, but not a line feed. The result can be a scrunched-up mess.

One possible solution is to add artificial ingredients to set the paragraphs apart. Unfortunately, this will also double-space these items when the source html is parsed raw to a browser — not to mention how this will complicate editing the source via a WYSIWYG application such as Dreamweaver. You can try applying disparate CSS styles or a Flash TextFormat — one or the other, mind you — but you will be frustrated in finding an adequate solution.

A solution that I have developed takes the html source and parses it as an xml structure in Flash. Once parsed, you can then traverse the nodes and slip an empty <br> node into the end of each paragraph node and toss the result into the htmlText property of a TextField object. It works and it keeps your source pristine. Plus, this subroutine can easily be conditioned out if future players modify the parsing behavior.

Note, however, that If you do this it will be very important that your source be xhtml compliant, otherwise the content will “break off” when open or overlapping nodes are encountered in the source. Most notably, you must self-close all image and break tags, ie: <img src=”pix.jpg”/><br/>. Do that, then do this …

xhtml = new XML();
xhtml.ignoreWhite = true;
xhtml.load (“someSource.html”);
xhtml.onLoad = function () {

  massage (this);
  someTextInstance_txt.htmlText = this;
};

massage = function (xml, node) {
  if ( !node ) { var node = xml; }
    for ( var pnode = node.firstChild; pnode; pnode = pnode.nextSibling ) {
      if ( pnode.nodeName.toLowerCase () == “p” ) {
      pnode.appendChild (xml.createElement (“br”));
    }
    // recursively search through deeper nodes
    if ( pnode.hasChildNodes ) { massage (xml, pnode); }
  }
};