Expounding on last week’s image flow algorithm, I present to you a generalized algorithm for text flow around inline graphics. You can see it here: ImageFlowContainer, and fork the repo here: tinytlf.
This algorithm only works for left-aligned paragraphs, if you try it with any other alignment I can’t guarantee it’ll look good. These images don’t respect float, they’re just placed at fortuitous positions in the content. They respect box-model padding properties (padding-left, etc.). Also, I changed the default selection colors to be as close to Aqua Blue as possible.
Here’s the original Wikipedia article for comparison. As always, here’s the source for this demo. Just XHTML and CSS.
Selection
Tinytlf’s selection algorithms are character and line level algorithms, not block level algorithms like most web browsers. That means that even if you select an entire paragraph, tinytlf only knows you’re selecting from the paragraph begin index to the paragraph end index.
This leads to some interesting consequences, like an image on the first atomIndex in a line causing the entire line height to be as tall as him. You see some overlap, because tinytlf’s default selectionAlpha is 0.28.
In addition, all the decorations in tinytlf only draw underneath the TextLines. Therefore you don’t see selection over images, like you would in a web browser. Later I might allow the option for decorating on top of the Lines layer, but I’ve left it out for 1.0.
Tags: Flash Text Engine, text layout, tinytlf
Great!!
I’ve been playing around a little bit now, trying to build a resizeable UIComponent around it and implement measure() and updateDisplayList(), and that’s what I’ve come across:
- when I set the width, the height always remains 0.
- getBoundingBox().width and height are o.k., but there update asynchronously, when you render the TextField. It would be nice if there would be an event to listen after the TextField is rendered.
- I don’t seem to be able to change the width once after style and text have been set – although it’s rendered again, there’s no change in the appearance and in the boundingBox.width/height either. Is this supposed behaviour?
Looking forward to your next postings!
- David
Ha oh man I’m working on this exact feature right now. This will actually be the topic of my next example post. There are a few things I’m working on that I need before I can efficiently resize the TextContainers.
Hi Paul!
When I select the text and right click it, the common FLash context menu appears, there isn’t any “copy” option, is possible to add that? also, is possible to copy or save the images too?
hello Paul,
I’m sorry about my question but … I can’t figure out how to make an SWC of your library. Can you point me in the right direction? Or provide in the download (easier!) an SWC?.
Thanks a lot.
Roberto.
Hi Paul, again
I’m fighitin with your ant build file! I guess is not updated!
True? or what I’m missing?
roberto.
Roberto – once I manually created a “report” directory I was able to use the ant build to make the swcs.
Paul – I notice that some of the link states in the example above have different mouseout behaviors depending on which way you leave the link – up, down, left and right. It looks like if the mouse moves from a link to an adjacent line the mouseout may not be handled.
Alan,
Unfortunately in the cases you’ve highlighted, the TLMRs aren’t mirroring the mouseOut event to the event mirrors. I’m working on a solution to manually take over the mirroring task. I’m also working on a few new line rendering algorithms, and I’m exploring the possibility of blitting the lines to a Bitmap, to cut down on the load of lots of lines on the display list.
Thanks, P.
This library rocks by the way. Great effort.
Here’s a bug fix:
In HTMLImageAdapter in the ImageLoader onComplete() handler get rid of the padding measurements when creating the BitmapData. If you keep the padding there it will draw a white gap next to the image where the padding should be. It’s not noticeable on your site since it uses a white background anyway. But with other color backgrounds it is apparent.
Change:
var bmd:BitmapData = new BitmapData(lp.width + lp.paddingRight + lp.paddingLeft – 10, lp.height + lp.paddingTop + lp.paddingBottom);
To:
var bmd:BitmapData = new BitmapData(lp.width, lp.height);
Thanks Stephen, I’ve fixed this particular issue. Honestly, it was a hack to get around some limitations in the layouts. Since then I’ve seriously advanced the layout algorithms and there’s no need for this workaround.