Forum How do I...?

Flowing paragraph text around blocks of content

Problem: Flowing paragraph text around blocks of content
Use Case: 2 Column Format
Version: Prince 5.1b3

Is it possible to set a block of content so that it will keep its general position within a document but yet normal text will flow around it *if* Prince detects that there will be a certain amount of white space below it?

Is there a way to add attachments to topics? I have a screen capture of what I'm seeing that I'd like to post with this inquiry.

I have photo + caption content that has a wrapper around them set to 'display: inline-block;' so that they don't break in half across columns or pages. This sometimes leads to large amounts of white space at the bottom of a column depending on what comes afterwards. Typically I see this when I have two photo/caption blocks fairly close to one another within the article text. The one photo/caption block will render in the left colum, there will be a bit of paragraph text below it, and then the second photo/caption block will force a new column leaving white space at the bottom of the previous column.

I've toyed with the 'float' attribute (which works in some cases) but I don't want to float all of my photo/caption blocks to one side of the document page. It would be nice if there was some way to allow text to flow around a block of content to make it look a bit cleaner.

Is this possible in Prince?

Thanks in advance,

Here is Shane's screenshot, which is a nice demonstration of two column layout and shows the effect he would like to achieve:

Currently in Prince it is not possible to achieve this effect and remove the blank space at the bottom of the first column. You can do similar things with floats and with page floats, such as floating the image to the top of the page above both columns, but this is not quite what you want.

In the next major release of Prince we will be including support for column floats, which are closer to what you need. Column floats allow you to float things to the top/bottom of the column, like this:
float: column-top | column-bottom

This will not leave any blank space where the image was in the source; the text will continue uninterrupted. However, it does mean that images have to be at the top or bottom of the column, and will never be placed midway through the column even if there is actually space for them.

What you are asking for is really a new kind of float, in which the image will stay where it is if there is space for it, or will be floated to the top of the next column/page if there isn't space for it, with the text flowing to neatly fill the gap where it was. Actually, this feature sounds quite cool -- I think we should consider implementing it! :D

Thanks for the feedback!

Ah, I didn't realize you were working on a 'float: column-top | column-bottom' attribute. That would be pretty sweet. :) Between that and this new float we're talking about here would be very nice additions to Prince.

Keep up the great work! :)

Hi Shane,

Today we have released a new alpha version of Prince that includes new features for columns and floats that should allow you to create just the kind of layout you were looking for! :D

In particular, give these new values a try:
float: column-top | column-bottom
float: top-if-necessary | bottom-if-necessary
float: column-top-if-necessary | column-bottom-if-necessary

Best regards,