Copy Fit Text Wrapped Around Inline Boxes

I have a template that I am using inline boxes on to get a variable pre formatted paragraph to wrap around. I am having a problem where it is breaking into the next paragraph, but I cant copy fit a item. I tried a positioned box but that didn’t wrap around the inline boxes.

Let me know anything that you think could help I am new to using inline boxes so I might just be missing something.

Would you be able to share a screenshot and/or simplified template to illustrate the situation?

Erik

1 Like


Here is the image the boxes are all inline and the message is my variable text that I don’t want to spill over to the next page.

I assume you want to run the text in the orange area, is that correct?

1 Like

Yes I do without going to the next page I have it flowing around the boxes but when it is to long it goes to the second page.

What should happen when the text does not fit that area? Apply copy fitting?

1 Like

What kind of element do I need to put it in the have the copy fit work? I have it in a P element right now and the copy fit just forces it to the largest size and places it on the next page. I also tried a positioned box and that didn’t flow around the inline boxes.

To my knowledge, there is no way to achieve that exact design. I have run various tests, including with a newer OL Connect engine, and text will not flow around positioned or inline boxes when these are aligned to the bottom (the white inset in the lower right of the image).

1 Like

Thank you for the information. I have another question then is there a way to have copy fit and also flow around the bottom white box? That is the only box that it needs to flow around the other boxes contain items but I can just change the size of the box to stop before that.

Perhaps I don’t fully understand what we are trying to achieve since Erik said this is not possible, but I gave it a try:

The text is restricted to the outer box so it will never flow to the next page. Copy Fit ensures that the text fits in preview mode. The inner boxes both have float: right which makes the text wrap around them. The bottom inner box also has clear: right to push it below the top inner box.

Some of the styles can be found in context_all_styles.css.

CopyFit.OL-template (8.0 KB)

1 Like

That worked perfect. Thank you very much. Can you tell me exactly how you made it? I tried but every time I did when I pressed space or enter to make a new line it dropped the inner boxes down.

Copying the HTML from my template to a different template is not sufficient, you also need the style rules I added to context_all_styles.css.

The float: right style is what makes the text wrap. If the inner boxes are pushed down after you press Enter in the outer box, I assume that means the inner boxes do not have float: right.

I wanted to know in case I needed to apply it in something else. Cause I made a positioned box put two inline boxes in it formatted like you stated and it is causing the issue that mentioned. On the other hand yours is working perfectly.