0

I'm using TLF to lay out a dictionary entry. It's working fairly well, but I need finer grained control of layout than I'm able to achieve through setting style properties on FlowElements, primarily for horizontal spacing and setting padding on SpanElements independently of their parents.

The solution that seems most promising is separating the various elements of the entry into separate containers and flowing the text through them by progressively adding new containers and ContainerControllers for each new element with size set to their content bounds so that the text will flow into each new container.

This ALMOST works, but the text will only flow correctly into the next container if an extra line break is inserted between the two sections of text that should go to different containers. Without the line break, the containers are sized correctly, but no text displays.

In these examples I've added borders to the container sprites so you can see where they're being drawn. Aside from the line break, the text is exactly the same. The syllable field is a SpanElement inside a ParagraphElement. The pronunciation label and text are separate SpanElements inside another ParagraphElement.

Without line break:

no line break

With line break between 'rab-bit' and 'Sounds Like:':

1 break

With line break AFTER 'rae biht' (line break beforehand has no effect):

2 breaks

As you can see, the pronunciation doesn't show unless a line break is added after the text, but the alignment is then off. No combination of line breaks seems to align them correctly.

Any ideas? Are these bugs in TLF? Should I try a different method? I would really like to have all the text selectable as one unit, and I love the better rendering and control that TLF offers, but I also need the layout flexibility. I suppose it's possible that I could hack something together like this with line breaks and positioning offsets, but it certainly wouldn't be pretty (or maintainable). Thanks for reading.

Dane
  • 874
  • 12
  • 18

1 Answers1

1

i wrote a recipe for Adobe Cookbooks a while back that might help you with this. basically, i found it much much easier to completely forgo using the span and paragraph elements in favor of focusing primarily on container controllers. hope it helps:

Generating a formatted TextFlow Layout for plain text assets

Update

for dynamic containers, you could probably use an end of line delimiter to determine your target string, along with it's string length, font size, padding, etc., you could find the required size for your container and change the size of your container accordingly by calling:

targetFlow.flowComposer.getControllerAt(controllerIndex).getContentBounds().width;

//and/or

targetFlow.flowComposer.getControllerAt(controllerIndex).getContentBounds().height;

here is another recipe i wrote which automatically changes the font size of a text flow to fit inside its container: Automating font size for TextFlow containers

but instead of changing the font size as i have done, you could change the container size to fit your text.

i hope this helps.

Chunky Chunk
  • 16,553
  • 15
  • 84
  • 162
  • @TheDarkInl1978 That's a great article. Thanks for linking. But I think the key difference between your example and what I'm trying to do is fixed vs. dynamic container sizing. In the article, you layout some containers with constant sizes, then flow text through them, and this seems to work pretty well. But what I want to do is constrain specific variable length portions of the text to corresponding independent, appropriately sized containers. Do you have any thoughts on adapting your approach to this task? Thanks. – Dane Nov 21 '10 at 19:33
  • @TheDarkInl1978 Thanks for the update. That is similar to what I tried to do above, but as you can see I ran into many inconsistencies with how the text flows from container to container. Are you saying I should do this by building a plain text string instead of adding FlowElements? I suppose one thing I could try is first creating independent TextFlows for each section of text (as plaintext) in order to establish the container sizes, then link all the containers to the full TextFlow. Seems inefficient but maybe worth a try. – Dane Nov 21 '10 at 20:55