Skip navigation
Currently Being Moderated

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

Jan 23, 2012 4:55 AM

Tags: #textflow #text_wrap #parcel

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?

 
Replies
  • Currently Being Moderated
    Jan 28, 2012 9:16 PM   in reply to casper_no

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 1, 2012 7:10 PM   in reply to casper_no

    I don't try your Multi-Container scenario. But I suggest you to try textFlowFormat.lineBreak = LineBreak.EXPLICIT.

     

    Hope it will be helpful

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2012 6:59 PM   in reply to casper_no

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 19, 2012 7:15 PM   in reply to Gang Cai

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 20, 2012 8:32 PM   in reply to casper_no

    hi Casper,

     

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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 20, 2012 11:28 PM   in reply to ASHandler

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 20, 2012 11:37 PM   in reply to casper_no

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 22, 2012 2:05 AM   in reply to Gang Cai

    hi Gang,

     

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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 22, 2012 2:12 AM   in reply to casper_no

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 22, 2012 2:36 AM   in reply to casper_no

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 22, 2012 3:25 AM   in reply to casper_no

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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2012 6:04 PM   in reply to ASHandler

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 29, 2012 5:28 AM   in reply to Gang Cai

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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 1, 2012 2:38 AM   in reply to ASHandler

    It is sent out. Please check

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2012 1:40 AM   in reply to casper_no

    What's your email address?

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points