Text Wrapping

This forum is for all Flare issues not related to any of the other categories.
Post Reply
Fiscal
Propeller Head
Posts: 98
Joined: Mon Jul 12, 2010 6:55 am

Text Wrapping

Post by Fiscal »

I'm not sure this is possible with PDF output but it works with Web. I really need to wrap text around images. Otherwise, i have huge amounts of blank space.

I know that in web, align="right" , style works to wrap text around an image. But PDF ignores it.

Has anyone gotten creative and come up with a way to do this functionally for PDF output?
Nita Beck
Senior Propellus Maximus
Posts: 3672
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Text Wrapping

Post by Nita Beck »

Yes, you can do this. The attribute you want to play with the float attribute, not the align attribute. You can float the image left or right, and text will wrap around it. I've gotten this to work nicely in PDFs.

In the Flare Help system, check out the topic "Positioning Pictures."

Note that there is a strange bug, however, regarding floats. If you try to float an image next to a numbered or bulleted list, you'll lose the numbers or bullets. Weird... but there it is. For those situations, I've had to "fake it" by creating a one-row, two-column table with no borders. I've put the list in one cell and the picture in the other cell. I didn't float the picture in that case, just set it to have a left or right alignment.

Hope this helps, or at least points you in a direction to pursue.
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
katrinabmg
Jr. Propeller Head
Posts: 7
Joined: Wed Feb 22, 2017 9:22 am

Re: Text Wrapping

Post by katrinabmg »

Of course the whole project I am working on is a series of numbered steps, so that bug with wrapping images and lists is quite annoying.
I have gotten a float right for the image to work, as long as the list has paragraphs, and the image is inside of a paragraph tag.
here is what the html looks like:
<ol>
<li>
<p>
<img src="Resources/Images/new job.PNG" alt="" border="0" class="right"/>
First Paragraph of text wrapping the image</p>
<p> more text </p>
</li>
</ol>

My class in CSS has these properties:
img.right
{
margin: 10px;
max-width: 75%;
float: right;
position: relative;
display: block;
overflow: visible;
}
I think there may be some better settings, but its working ok. The big problem is the next image doesn't respect the wrapping if its not also floating right, so right now I am just manually adding extra whitespace.
Post Reply