开发者

TLF - Flowing text through multiple containers and line breaks

开发者 https://www.devze.com 2023-01-26 07:01 出处:网络
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, primaril

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:

TLF - Flowing text through multiple containers and line breaks

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

TLF - Flowing text through multiple containers and line breaks

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

TLF - Flowing text through multiple containers and line 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.


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号