• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Extending TLF to handle InDesign-like text wrapping, pointers?

Community Beginner ,
Jan 23, 2012 Jan 23, 2012

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.

Screen Shot 2012-01-23 at 13.49.03.png

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?

TOPICS
Text layout framework

Views

10.7K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 24, 2012 Jan 24, 2012

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Jan 28, 2012 Jan 28, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 31, 2012 Jan 31, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Feb 01, 2012 Feb 01, 2012

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 06, 2012 Feb 06, 2012

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Feb 06, 2012 Feb 06, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 06, 2012 Feb 06, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 19, 2012 Mar 19, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 20, 2012 Mar 20, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 20, 2012 Mar 20, 2012

Copy link to clipboard

Copied

hi Casper,

Any chance to have a try on your work ? thanks.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mar 20, 2012 Mar 20, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 22, 2012 Mar 22, 2012

Copy link to clipboard

Copied

hi Gang,

My email is forlist66@gmail.com, would appreciate any info in this regard, thanks.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 21, 2012 Mar 21, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 21, 2012 Mar 21, 2012

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mar 20, 2012 Mar 20, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 21, 2012 Mar 21, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 22, 2012 Mar 22, 2012

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 22, 2012 Mar 22, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 22, 2012 Mar 22, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 22, 2012 Mar 22, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 22, 2012 Mar 22, 2012

Copy link to clipboard

Copied

That's ok, I will have a try on that

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mar 27, 2012 Mar 27, 2012

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 29, 2012 Mar 29, 2012

Copy link to clipboard

Copied

Great, thanks for the follow up, will be waiting for the email to arrive

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Apr 01, 2012 Apr 01, 2012

Copy link to clipboard

Copied

It is sent out. Please check

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines