Flash htmlText, or how to display images correctly

Posted by Paul Klinkenberg in Flash , Flex on February 27, 2009

Update: new improved component! Read about it here!

Today, I came across another problem in flash: the displaying of <img>'s in htmlText.
A whole lot of things turned out to be wrong:
- text is always wrapped around an image, even if there is no space at all, and even when -tags or -tags are used after the image;
- the image's height is not used when calculating the total height of a text component, if it is at the end of the text.

So I wrote a function that takes an html string, and changes it in such a way, so that images are displayed as they should have been displayed anyway.

You can check out the working example here, and the source code for the example is here.

Technical details:
- Flash adds 8px vspace and hspace to every image, unless it is explicitly set in the <img> tag;
- Flash adds 1/6th of extra space to a line where an image is set inside a font tag (<img ...> ); Am I missing something, or is this just plain strange?!

So here's the function:

public function correctHtmlImageTextFlow(htmlTxt:String):String
{
    /** put every &amp;lt;img&amp;gt; tag inside a &amp;lt;font&amp;gt; tag with the same fontHeight as the image,
     * so text won't flow around it.
     * But, since some mysterious margin of 1/6th is used when putting a &amp;lt;br&amp;gt; inside &amp;lt;font&amp;gt;,
     * we'll have to calculate the fontHeight as imgHeight*5/6
     */
    var currImgHeight:Number;
    while (htmlTxt.match(/&amp;lt;img[^&amp;gt;]*height=.[0-9]+.[^&amp;gt;]*&amp;gt;/i))
    {
        currImgHeight = parseInt(htmlTxt.replace(/^.*?&amp;lt;img[^&amp;gt;]*height=.([0-9]+).[^&amp;gt;]*&amp;gt;.*$/i, "$1"));
        // here, we temporarily rename &amp;lt;img tags to &amp;lt;xXxXimg tags, sow e won't match the tag again
        htmlTxt = htmlTxt.replace(/(&amp;lt;br&amp;gt;)? ?&amp;lt;(img[^&amp;gt;]*height=.[0-9]+.[^&amp;gt;]*&amp;gt;) ?(&amp;lt;br&amp;gt;)?/i, '&amp;lt;br&amp;gt;&amp;lt;font size="'+Math.ceil(currImgHeight*5/6)+'"&amp;gt;&amp;lt;xXxX$2&amp;lt;br&amp;gt;&amp;lt;/font&amp;gt;');
    }
    // now un-rename the &amp;lt;xXxXimg tags
    htmlTxt = htmlTxt.replace(/&amp;lt;xXxXimg/gi, "&amp;lt;img");
    
    // remove optionally existing vspace and hspace from img tags (who uses this anyway??)
    htmlTxt = htmlTxt.replace(new RegExp("(&amp;lt;img[^&amp;gt;]*)hspace=.[0-9]+.", "gi"), '$1');
    htmlTxt = htmlTxt.replace(new RegExp("(&amp;lt;img[^&amp;gt;]*)vspace=.[0-9]+.", "gi"), '$1');
    // now set vspace=0 and hspace=0 in the img tags
    htmlTxt = htmlTxt.replace(new RegExp("&amp;lt;img", "gi"), '&amp;lt;img vspace="0" hspace="0"');
    // done!
    return htmlTxt;
}