Welcome Guest Search | Active Topics | Sign In | Register

Page Breaks with Multiple Columns Options
James Noble
Posted: Thursday, December 6, 2012 3:54:56 PM
Rank: Newbie
Groups: Member

Joined: 12/6/2012
Posts: 2
I have a simple HTML layout using two columns. Example markup can be reviewed at http://jsfiddle.net/MJzZE/

This layout is going to represent a 5 - 7 page report, so there must be page breaks.

The content of the columns is user-provided markup, so it is varies at runtime, is not easily split up, and I don't know how large it will end up being on the page -- so I don't know where I would put manual page breaks.

Intuitively, the user expects the content to fill both columns on page 1 first, then both columns on page 2, etc. So column 1 on page 2 should begin with the overflow from column 2 on page 1.

But EO PDF appears to just make two very tall columns (as the browser does) then slice them at page boundaries. The effect is that the content of column 1 extends to page 2 and onward before wrapping back to column 2 on page 1.

EO PDF also slices images in half if they happen to span a page boundary.

Both effects can be seen at http://screencast.com/t/ojIPeamht

It seems like these issues make a multi-column layout across pages infeasible. Is there a way to get this done?
eo_support
Posted: Thursday, December 6, 2012 7:37:59 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Hi,

You will need to use EO.Pdf's multi-column feature, not making multi-column with HTML. If you make multi-column with HTML, EO.Pdf will render them EXACTLY as they appear in your browser. EO.Pdf will try to page contents, but it will not try to rearrange items in a way that would conflict layout defined by HTML. For example, if you use an HTML table to put two images side by side, EO.Pdf will render them side by side. It would be wrong for EO.Pdf to "assume" that you actually meant two columns so try to rearrange them based on the column height of the paper.

In order to use EO.Pdf's multi-column feature, you simply set HtmlToPdf.Options.ColumnCount (usually to 2). And then EO.Pdf will take care of the rest. EO.Pdf's multi-column feature works exactly the way you described: It fills column 1 on page 1 first, then column 2 on page 1, then column 1 on page 2, and so on.

Thanks!
James Noble
Posted: Friday, December 7, 2012 11:00:47 AM
Rank: Newbie
Groups: Member

Joined: 12/6/2012
Posts: 2
Thank you for the information. I am trying those settings and getting good results, with one exception: images are still cut off at page boundaries. I need for the images to be pushed to the next column if they do not fit in the remainder of the current column. Example shot:

http://screencast.com/t/jJsq2mLdDItQ

The grey box is an img tag with display: inline-block. Is there a way to keep it from being cut off?

Another concern I have is that HtmlToPdf.Options is a static property. This is a routine on a web server that may be running several times at once. Won't the options set bleed between worker threads? Or are they somehow threadsafe?


eo_support
Posted: Friday, December 7, 2012 11:18:21 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Hi,

To make sure image don't get cut off, you would just put this in your page:

Code: CSS
img
{
    page-break-inside: avoid;
}


See here for more information about the page break CSS options:

http://www.essentialobjects.com/doc/4/htmltopdf/paging.aspx

There is no need to worry about the thread-safety of HtmlToPdf.Options. A separate set of options are maintained for each thread. So setting it in one thread won't affect another thread.

Thanks!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.