Flash htmlText, or how to display images correctly

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 <p>-tags or <br>-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 (<font size="30"><img ...><br></font>); 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;
}

If it helps you, then please leave a comment!

Note: I expected you to already clean the html: <br /> must already be converted to <br>, etcetera.

del.icio.us Digg StumbleUpon Facebook Technorati Fav reddit Google Bookmarks
| Viewed 5366 times
  1. John

    #1 by John - januari 25, 2010 at 10:53

    Thanks for information!
(will not be published)
Leave this field empty

truncated-rock