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.!
/**| Viewed 10966 times
* 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; }
#1 by Ivan C. - januari 15, 2010 at 0:51
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 by Paul Klinkenberg - januari 15, 2010 at 19:19
#3 by Mauricio Pereira - januari 29, 2010 at 19:56
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 by Paul Klinkenberg - januari 29, 2010 at 21:11
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 by Mauricio Pereira - januari 30, 2010 at 0:32
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 by Sharedtut - februari 3, 2010 at 5:01
#7 by olivier - maart 28, 2010 at 14:57
#8 by Bluntpixel - april 8, 2010 at 15:02
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 by Paul Klinkenberg - april 8, 2010 at 17:42
So it doesn't sound too logical :-/ Am I missing something?
#10 by Peter - juni 11, 2010 at 8:23
Is there any workaround for AS2 version.
Thanks
Peter
#11 by Paul Klinkenberg - juni 14, 2010 at 23:06
Are regexes actually supported in AS2? If so, then you could pretty easily rewrite it I guess...
Good luck, Paul
#12 by Tiago Pereira - november 26, 2010 at 15:30
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 by Minty Jones - januari 20, 2011 at 1:38
#14 by Paulo Araujo - maart 28, 2011 at 19:15
Thank you for this solution..!
#15 by Steven Steel - mei 12, 2011 at 18:39
#16 by Dong - december 28, 2011 at 4:29
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 by Buch - januari 17, 2012 at 16:13
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 by Xavi - januari 25, 2012 at 17:06
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 by Paul Klinkenberg - januari 25, 2012 at 19:49
Hope that helps, Paul
#20 by Karzin - augustus 26, 2012 at 22:54