Copy link to clipboard
Copied
Hi all,
We want to implement text wrap like you have in InDesign, ie. text wrap around an image that has a fixed position on page as opposed to floats that has a fix position in the text. I have a version that works fine as long as the objects to wrap around cover a whole column. If object to wrap around covers only part of the column, I create three containerControllers, one above, one to the side and one below. That also works. Almost. Line heights between those containers end up wrong as my containers have a fixed height and there can't be a conditional check if line fits or not. See attached image - the purple lines and fills show extents of containerControllers for debugging purposes.
I've started to dive into the source-code of TLF, and found that BaseCompose has a parcelList of Parcels that seems to be implemented with this in mind as a future expansion. From what I can work out, Parcels are sort of sub-parts of containerControlles to flow text into My idea is to somehow create my own parceList version instead of creating three containerControllers.
Anyone out there who has attempted the same? Is there future version of TLF that will include similar functionality?
Copy link to clipboard
Copied
I've dug into the source code some more. Floats in TLF 2.0 seems to be handled at low level by Parcel.knockOut() that looks like it defines a part of the parcel that text cannot be placed in and forces lines to be narrower. Perhaps that can be used to set similar knockOut areas for the fixed areas to wrap around?
Copy link to clipboard
Copied
TLF will not support any float property except "left", "right" and "none". The reason for this is TLF is trying to follow W3C definition for html and CSS float. You can refer to the following document to find out how W3C define the float:http://www.w3.org/wiki/CSS/Training/floating. It makes no sense for Adobe to offer other properties for float.
Basically, if a client wanted a "text wrap". We would suggest them to use Multi-Container or re-write their own TLF -- Just like what you said.
If you wanted to re-write your own TLF to support "text wrap". We would suggest you to take a look at BaseCompose::composeFloat and BaseCompose::calculateFloatBounds. We calculate the float knock-out rectangle there. Also, you need to take care of the Parcel::knockOut and Parcel::removeKnockOut.
We would suggest you to use a custom style to control your own knock out properties. This is how some of the Adobe internal team to implement the "text wrap" with TLF.
Hopefully, these information will be helpful.
Copy link to clipboard
Copied
The multi-container solution is what I've implemented already and that works quite well, but as shown above, it doesn't handle correct lineheight across containers. Which is a showstopper.
I've begun to explore the innards of TLF and found what you suggest - extending / rewriting BaseCompose to get to the Parcel class. It feels a bit shaky and I'm afraid that this solution could easily break if something changes in the next version of TLF. But quick hacks shows that Parcles can handle having knockOuts with static placement, so it looks like it might be possible to implement without having to write a Composer from scratch.
I agree that it doesn't make sense to offer more properites for "float", but I can't see that I've asked for it either.
Copy link to clipboard
Copied
I don't try your Multi-Container scenario. But I suggest you to try textFlowFormat.lineBreak = LineBreak.EXPLICIT.
Hope it will be helpful
Copy link to clipboard
Copied
I'm continuing on the Parcel.knockOut path. it's looking promising. Especially using TLF 3.0, which seems more robust when handling multiple floats
Not sure how textFlowFormat.lineBreak = LineBreak.EXPLICIT would be use in this context. Are you suggesting putting all content into first container, then splitting text at first word that doesn't fit, continuing through, creating containers pr. line?
Copy link to clipboard
Copied
Sorry for not making it clear.
Our discussion got two threads, one is for the Multi-Container solution and one is for the rewritten solution.
For the Multi-Container solution, you met the Line heights between those containers end up wrong. I suggest that there are quite of options in TLF can control the last line's height. For example the lineBreak formats and the leadingModel formats.
I am not sure what's your expected results. But I would suggest you to try those formats to see if there is anything that matches your expectation.
Copy link to clipboard
Copied
If you look at the image in the first post of this thread, you'll see that changing the lineHeight of the last line won't help. The problem there is that there should have been one more wrapped line to completely clear the float. The only way I know of to do that with multiple containers would be to give all containers extra height and then for each text change check what height they need to be to clear floats. That again means recompositioning as many times as we have containers. And that will be slow, too slow to allow edit of text by user.
Copy link to clipboard
Copied
We would suggest you to use a custom style to control your own knock out properties. This is how some of the Adobe internal team to implement the "text wrap" with TLF.
hi Gang,
Where could I see the works from adobe teams that have this text wrap feature in it ? thanks.
Copy link to clipboard
Copied
I've managed get a solution up and running based on TLF3.0. Currently, it's made to work with our framework for print templates (www.papirfly.no), but if Adobe is interested in rolling this functionality into the core TLF, I'd be happy to share code and work with you.
Copy link to clipboard
Copied
hi Casper,
Any chance to have a try on your work ? thanks.
Copy link to clipboard
Copied
Hi ASHandler:
I don't think I can give you the answer here as it will need quite a few words to describe what we do to implement such a function. And I am not sure if it is allowed to talk about what we do. But you can give me your email address. I will send you what I can give you through email.
Copy link to clipboard
Copied
hi Gang,
My email is forlist66@gmail.com, would appreciate any info in this regard, thanks.
Copy link to clipboard
Copied
ASHandler: It's not straightforward to show the flow-code in action, it's part of a bigger framework (www.papirfly.com). I have made a debug project though, might be able to put that on a server and post the link. I'll look into it. It allows dragging of a rectangle with text flowing around it live. I have to say that the performance of TLF is impressing.
Copy link to clipboard
Copied
Here's a link to a version of the debug app. No frills or niceties, just an editable text and a draggable rectangle that the text wraps around
http://papirfly.test.papirfly.no/examples/textwrap/PapirflyWrapPoC.html
Copy link to clipboard
Copied
Hi Casper:
As I mentioned above, TLF will not support the 'Center Float'. I don't think we'll put the 'Center Float' related codes into core TLF.
But I think your implementation may be a great example for TLF user to implement 'Center Float' themselves. Currently, TLF is under the process to donate to Apache. We would like you to take part in anything including developing, testing and releasing after the TLF is Apache licenced under Apache rules. Thank you so much for your interests to TLF.
Copy link to clipboard
Copied
Gang
Are you confusing two discussion threads now? "Center Float" has never been mentioned here. I'm not even sure what they are, floats with text on both left and rigth side?
What I need is text wrap where the image (or other object) that the text wraps around stays in one place regardless of changes in text, as opposed to the float-model where the image is part of the textflow and can move if text before it is changes.
Copy link to clipboard
Copied
hi Casper,
Thanks for the demo, that does look very impressive, congrats on the good work !
On a side note, I'm more thinking along the line of something like this:
http://cl.ly/031J110g0L0s2E0w0F47
Where the image cuts the line in half hence there are texts on both side of the image, this is what Gang calls "center float".
I had read through the BaseCompose class and found the way that float was implemented in TLF would make "center float" most likely impossible, at least not in a "float" sense.
@Gang, can you shed a light on how center float might be implemented under current TLF structure ? I might be able to pick that up from there
Copy link to clipboard
Copied
Thanks.
I agree with you on that center floats will be hard to implement. BaseCompose is not structured for that sort of thing, so you'd have to build a lot code just to be able to split lines in two.
Handling wrap around non-rectangles like circles is probably easier, though not straight forward.
Copy link to clipboard
Copied
So can you handle non-rectangular shape now in your example ?
I've got a rough idea in my head about how to cut a line in two and place them on both side of the image, it will need a bunch of Math calculations to determine the intersection area of line and image, but should be highly doable, it's kind of like how columnCount is implemented say when you have two columns in one text container, it's just those lines are not always aligned.
If you got some spare minutes, probably we could setup a project on github and cowork on it.
Copy link to clipboard
Copied
No, I don't have an implementation that handles irregular shapes. It's on our "nice to have"-list, so maybe one day. Would be cool.
I don't think I can spend time on getting Center Float code up and running. It's not something I see Papirfly using in products. Also, I fear that it's going to be a lot of work, just getting the above text flow demo to run without freezing took days.
Copy link to clipboard
Copied
That's ok, I will have a try on that
Copy link to clipboard
Copied
Seems I can't share the codes but I can share where we have changed and the rough idea. I am preparing the email. I'll let you know when it is ready
Copy link to clipboard
Copied
Great, thanks for the follow up, will be waiting for the email to arrive
Copy link to clipboard
Copied
It is sent out. Please check