Images in flash as3 htmlText, part 2; how to display them correctly

Based on my previous post about the display of images in flash htmlText, I have made some changes to the correctHtmlImageTextFlow function.
Reader Ziggi posted a comment about the use of <textformat>, which turned out to be more handy then the <font> tag I used before. The big advantage is that the maximum font (and now image) height of 127 is now eliminated!
The function still puts all images on their own text line, which is the only way to be sure all text and images are displayed correctly.

You can check out the example here, check the mxml code here, or download the mxml file here, or check the code underneath!

UPDATE 15 jan. 2010: Added parameter 's' into the equation for all regEx'es, to allow for <img> tags to have line breaks in them. Thanks for the tip, Ivan C.!

/**
* Code author: Paul Klinkenberg, http://www.railodeveloper.com/
* Project: Images in flash as3 htmlText, part 2; how to display them correctly
* Blog post: http://www.railodeveloper.com/post.cfm/flash-as3-images-in-htmltext-how-to
* Date: 2010-01-15 19:10:00 +0100
* Revision: 1.1 (added parameter 's' to most regex'es)
* Copyright (c) 2010 Paul Klinkenberg, Ongevraagd Advies (www.ongevraagdadvies.nl)
* Licensed under the GPL license, see <http://www.gnu.org/licenses/>.
* Leave this copyright notice in place!
*/
/** put every <img> tag inside a <textformat> tag with the same leading height as the image has a height, * so text won't flow around it. * Also, since flash always displays images on a new line, add a line break <br> tag before * and after the image. * Yes, I know it IS possible to have text appear after the image on the same line, * but that has much complications: if you then have more then one image, they will often not be correctly * set in the text's order: 'text1 <img1> text2 <img2>' will become 'text1 text2 <img1> <img2>'. */ public function correctHtmlImageTextFlow(htmlTxt:String, fontSize:uint = 10):String {     // remove optional break before and after the image tag (since we will add it anyway)     htmlTxt = htmlTxt.replace(/<br>[\t ]*((<\/[^>]*>)*<img)/gsi, '$1');     htmlTxt = htmlTxt.replace(/(<img[^>]+>(<\/[^>]*>)*)[\t ]*<br>/gsi, '$1');         var currImgHeight:Number;     while (htmlTxt.match(/<img[^>]*height=.[0-9]+.[^>]*>/si))     {         // get the height from the current image         currImgHeight = parseInt(htmlTxt.replace(/^.*?<img[^>]*height=.([0-9]+).[^>]*>.*$/si, "$1"));         /** Now, the magic:         * - temporarily rename <img tags to <xXxXimg tags, so we won't match the tag again         * - wrap the img tag inside textformat tags         * - give the textformat tag a 'leading' attribute width a value of: image height - fontSize         * - add a break before and after the img tag, to be sure it displays correctly on a line of it's own.         */         htmlTxt = htmlTxt.replace(/<(img[^>]*height=.[0-9]+.[^>]*>)/si, '<br><textformat leading="'+Math.ceil(currImgHeight-fontSize)+'"><xXxX$1<br></textformat>');     }     // now un-rename the <xXxXimg tags     htmlTxt = htmlTxt.replace(/<xXxXimg/gi, "<img");         /** now check: if the image is the last visible thing in the html, then append a space to the html.     * Otherwise, the image's height won't be taken into account for the html's totalHeight, which     * causes part of the image to disappear below the end of the htmlText text box.     */     if (htmlTxt.match(/<br><\/textformat>(<[^>]+>)*$/))     {         htmlTxt += ' ';     }         // remove optionally existing vspace and hspace from img tags (who uses this anyway??)     htmlTxt = htmlTxt.replace(new RegExp("(<img[^>]*)hspace=.[0-9]+.", "gsi"), '$1');     htmlTxt = htmlTxt.replace(new RegExp("(<img[^>]*)vspace=.[0-9]+.", "gsi"), '$1');     // now set vspace=0 and hspace=0 in the img tags     htmlTxt = htmlTxt.replace(new RegExp("<img", "gi"), '<img vspace="0" hspace="0"');     // done!     return htmlTxt; }
del.icio.us Digg StumbleUpon Facebook Technorati Fav reddit Google Bookmarks
| Viewed 10707 times
  1. Ivan C.

    #1 by Ivan C. - januari 15, 2010 at 0:51

    Hey, thanks for the great job.

    I would just like to suggest you to add a s (treat string as single line) to your get height expression.

    currImgHeight = parseInt(htmlTxt.replace(/^.*?<img[^>]*height=.([0-9]+).[^>]*>.*$/si, "$1"));
  2. Paul Klinkenberg

    #2 by Paul Klinkenberg - januari 15, 2010 at 19:19

    Hi Ivan, Thanks for the tip! I updated the example code, zip file, mxml file, and the blog post. All for just one character ;-)
  3. Mauricio Pereira

    #3 by Mauricio Pereira - januari 29, 2010 at 19:56

    Hi,
    I'm making a small project and I used your component because of the images.
    Yet I still have a problem that i'd like you to see.
    I need to use htmltext to display a very large amount of text (near 6500 characters), but the text don't render. The scrollbars in the text box appear, but the text don't.
    can you figure out what may be happening?
    thanx
  4. Paul Klinkenberg

    #4 by Paul Klinkenberg - januari 29, 2010 at 21:11

    Hi Mauricio,
    At the moment I don't have a clue what could be the problem, because I haven't seen the text and the rest of the environment.
    What happens if you put your html text into here: http://www.coldfusiondeveloper.nl/correctHtmlImageTextFlow/timo.html

    This was a test file for someone else, and it will probably display your text 4 times.
    If it displays fine on that page, then it is something else within your application.
    But if it doesn't display, then mail me the text if you can: paul at ongevraagdadvies dot nl. Then I'm curious to find out :-)
    Paul
  5. Mauricio Pereira

    #5 by Mauricio Pereira - januari 30, 2010 at 0:32

    Hi Paul
    I tested and it worked fine. It's definitely a problem in my app.
    I don´t know what it can be! I used the flex Text component to display the htmltext. I set a percentWidth, a css style!!! Can it be the font? I embedded via css, the font is Forgoten Futurist, but I tried with Arial and the result was the same!
    thanx anyway
  6. Sharedtut

    #6 by Sharedtut - februari 3, 2010 at 5:01

    Thanks for updating.
  7. olivier

    #7 by olivier - maart 28, 2010 at 14:57

    Thanks for the hack!
  8. Bluntpixel

    #8 by Bluntpixel - april 8, 2010 at 15:02

    Thanks so much for this great workaround - it's been doing my brain in!

    A request though:
    I'd like some of my images to align left (or right) as normal, but some to runaround completely as in your fix. So maybe if I've put align="left" in my img tag, the function skips to the next instance.
    Any suggestions?
  9. Paul Klinkenberg

    #9 by Paul Klinkenberg - april 8, 2010 at 17:42

    Hi Bluntpixel, thtat off course can be done, by adding a check for these aligned img tags, and then skip them. But... Then you will get the problem back where this hack is for!
    So it doesn't sound too logical :-/ Am I missing something?
  10. Peter

    #10 by Peter - juni 11, 2010 at 8:23

    Hey thanks Paul, great flash hack script.

    Is there any workaround for AS2 version.

    Thanks
    Peter
  11. Paul Klinkenberg

    #11 by Paul Klinkenberg - juni 14, 2010 at 23:06

    Hi Peter, I am not using AS1/2, so I won't get into that.
    Are regexes actually supported in AS2? If so, then you could pretty easily rewrite it I guess...
    Good luck, Paul
  12. Tiago Pereira

    #12 by Tiago Pereira - november 26, 2010 at 15:30

    Hi there,
    This example is not working for me, probably because my img does not have the height and width specified. Is there a way to make it work without these properties defined ?
    Cheers.
  13. Minty Jones

    #13 by Minty Jones - januari 20, 2011 at 1:38

    WOW! The only solution to this problem that actually does what it says on the box. Thanks for all the time you invested in the solution.
  14. Paulo Araujo

    #14 by Paulo Araujo - maart 28, 2011 at 19:15

    Hello there, finally I found something that really works for this issue! I had problems making a custom accordion component that uses a Text to display html content (including images). And now it's working perfectly =).

    Thank you for this solution..!
  15. Steven Steel

    #15 by Steven Steel - mei 12, 2011 at 18:39

    This is great! Been looking for this. Thanks!
  16. Dong

    #16 by Dong - december 28, 2011 at 4:29

    Thank you ! I've been looking this for months !

    Furthermore, do you have any problem with ScrollBar in HTMLText, sometimes it doesn't work although my text is longer than the height of the board (Sprite or MovieClip)
  17. Buch

    #17 by Buch - januari 17, 2012 at 16:13

    Hi, nice script!

    But I'd like to put an extra twist on it. I need a textArea that will behave like RichText in flex, example:

    "Hi, how are you! <smiley>, im feeling fine myself! <another smiley>"

    Meaning: I want images and text to be mixed in one line... :)
    I've seen it done on many flash-chats, but how do they do it????
  18. Xavi

    #18 by Xavi - januari 25, 2012 at 17:06

    Thanks for the script, it was very useful.

    Just one question: if I have my textfield left aligned and I enter an image with your function how can I center that image? I tried to add a style to <img> tag with text-align:center but nothing happened.

    Any idea?
  19. Paul Klinkenberg

    #19 by Paul Klinkenberg - januari 25, 2012 at 19:49

    I suppose you can add <p align="center">...</p> around it.
    Hope that helps, Paul
  20. Karzin

    #20 by Karzin - augustus 26, 2012 at 22:54

    Thank you !
(will not be published)
Leave this field empty

commerce-broadgauge