I have a simple HTML layout using two columns. Example markup (shows properly in Chrome only, can be reviewed at http://jsfiddle.net/MJzZE/ ):
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
html
{
font-family: 'Open Sans';
width: 8.5in;
margin: 0px auto;
background-color: #eee;
}
body
{
padding: 25px;
background-color: #fff;
}
h1
{
color: red;
border-top: solid 22px red;
text-transform: uppercase;
font-weight: bold;
font-size: 38px;
}
h2
{
color: red;
border-top: solid 6px red;
font-size: 21px;
text-transform: uppercase;
font-weight: bold;
}
h2:first-child
{
font-size: 25px;
}
p
{
margin-bottom: 20px;
font-size: 13px;
line-height: 21px;
}
.content
{
-webkit-column-count: 2;
column-count: 2;
-webkit-column-gap: 30px;
column-gap: 30px;
clear: both;
}
.image
{
background-color: #444;
text-align: center;
color: #fff;
text-transform: uppercase;
font-size: 30px;
}
.logo.image
{
float: right;
width: 300px;
height: 105px;
line-height: 105px;
margin-top: -40px;
margin-bottom: 20px;
}
.inline.image
{
height: 300px;
line-height: 300px;
display: inline-block;
width: 100%;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Title</h1>
<div class="logo image">Logo</div>
<div class="content">
<h2>Introduction & Context</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
non dui neque. Aliquam tortor libero, accumsan quis viverra
egestas, consectetur at augue. Pellentesque metus erat,
tincidunt aliquam tincidunt et, dapibus eget nisl. Vivamus sit
amet ultricies arcu. In hac habitasse platea dictumst. Pellentesque
non porta leo. non bibendum nisi. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Ut non dui neque.
Aliquam tortor libero, accumsan quis viverra egestas, consectetur
at augue. Pellentesque metus erat, tincidunt aliquam
tincidunt et, dapibus eget nisl. Vivamus sit amet ultricies arcu.
In hac habitasse platea dictumst. Pellentesque non porta leo.
non bibendum nisi.
</p>
<p>
Pellentesque non porta leo. non bibendum nis, consectetur
adipiscing elit. Ut non dui neque. Aliquam tortor libero, accumsan
quis viverra egestas, consectetur at augue. Pellentesque
metus erat, tincidunt aliquam tincidunt et, dapibus
eget nisl. Vivamus sit amet ultricies arcu. In hac habitasse
platea dictumst. Pellentesque non porta leo. non bibendum
nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut non dui neque. Aliquam tortor libero, accumsan quis viverra
egestas, consectetur at augue. Pellentesque metus erat,
tincidunt aliquam tincidunt et, dapibus eget nisl. Vivamus sit
amet ultricies arcu. In hac habitasse platea dictumst.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
non dui neque. Aliquam tortor libero, accumsan quis viverra
egestas, consectetur at augue. Pellentesque metus erat,
tincidunt aliquam tincidunt et, dapibus eget nisl. Vivamus sit
amet ultricies arcu. In hac habitasse platea dictumst. Pellentesque
non porta leo. non bibendum nisi. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Ut non dui neque.
Aliquam tortor libero, accumsan quis viverra egestas, consectetur
at augue. Pellentesque metus erat, tincidunt aliquam
tincidunt et, dapibus eget nisl. Vivamus sit amet ultricies arcu.
In hac habitasse platea dictumst. Pellentesque non porta leo.
non bibendum nisi.
</p>
<h2>The Problem</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non
dui neque. Aliquam tortor libero, accumsan quis viverra egestas,
consectetur at augue. Nullam a risus non tellus ultrices placerat ut
ultrices lectus. Nam gravida venenatis ipsum eu malesuada. Fusce
lobortis odio id mi eleifend consequat sit amet id felis. Pellentesque
tempor pharetra odio quis interdum. Curabitur eleifend dolor at turpis
lobortis porta. Nullam a risus non tellus ultrices placerat ut ultrices
lectus. Nam gravida venenatis ipsum eu malesuada. Etiam quis
aliquam lacus. In libero neque, fermentum quis laoreet in, fringilla vel
ipsum. Donec ut augue quis neque aliquet venenatis vitae et dui.
</p>
<img class="inline image" />
<p>
Pellentesque tempor pharetra odio quis interdum. Curabitur eleifend
dolor at turpis lobortis porta. Nullam a risus non tellus ultrices placerat
ut ultrices lectus. Nam gravida venenatis ipsum eu malesuada.
Etiam quis aliquam lacus. In libero neque, fermentum quis laoreet
in, fringilla vel ipsum. Donec ut augue quis neque aliquet venenatis
vitae et dui. Fusce lobortis odio id mi eleifend consequat sit amet id
felis. Proin pharetra semper tincidunt. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Ut non dui neque. Aliquam tortor libero,
accumsan quis viverra egestas, consectetur at augue.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non
dui neque. Aliquam tortor libero, accumsan quis viverra egestas,
consectetur at augue. Nullam a risus non tellus ultrices placerat ut
ultrices lectus. Nam gravida venenatis ipsum eu malesuada. Fusce
lobortis odio id mi eleifend consequat sit amet id felis. Pellentesque
tempor pharetra odio quis interdum. Curabitur eleifend dolor at turpis
lobortis porta. Nullam a risus non tellus ultrices placerat ut ultrices
lectus. Nam gravida venenatis ipsum eu malesuada. Etiam quis
aliquam lacus. In libero neque, fermentum quis laoreet in, fringilla vel
ipsum. Donec ut augue quis neque aliquet venenatis vitae et dui.
</p>
<p>
Pellentesque tempor pharetra odio quis interdum. Curabitur eleifend
dolor at turpis lobortis porta. Nullam a risus non tellus ultrices placerat
ut ultrices lectus. Nam gravida venenatis ipsum eu malesuada.
Etiam quis aliquam lacus. In libero neque, fermentum quis laoreet
in, fringilla vel ipsum. Donec ut augue quis neque aliquet venenatis
vitae et dui. Fusce lobortis odio id mi eleifend consequat sit amet id
felis. Proin pharetra semper tincidunt. Lorem ipsum dolor sit amet.
</p>
<h2>Solution Selected</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non
dui neque. Aliquam tortor libero, accumsan quis viverra egestas,
consectetur at augue. Nullam a risus non tellus ultrices placerat ut
ultrices lectus. Nam gravida venenatis ipsum eu malesuada. Fusce
lobortis odio id mi eleifend consequat sit amet id felis. Pellentesque
tempor pharetra odio quis interdum. Curabitur eleifend dolor at turpis
lobortis porta. Nullam a risus non tellus ultrices placerat ut ultrices
lectus. Nam gravida venenatis ipsum eu malesuada. Etiam quis
aliquam lacus. In libero neque, fermentum quis laoreet in, fringilla vel
ipsum. Donec ut augue quis neque aliquet venenatis vitae et dui.
</p>
<img class="inline image" />
<p>
Pellentesque tempor pharetra odio quis interdum. Curabitur eleifend
dolor at turpis lobortis porta. Nullam a risus non tellus ultrices placerat
ut ultrices lectus. Nam gravida venenatis ipsum eu malesuada.
Etiam quis aliquam lacus. In libero neque, fermentum quis laoreet
in, fringilla vel ipsum. Donec ut augue quis neque aliquet venenatis
vitae et dui. Fusce lobortis odio id mi eleifend consequat sit amet id
felis. Proin pharetra semper tincidunt. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Ut non dui neque. Aliquam tortor libero,
accumsan quis viverra egestas, consectetur at augue.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non
dui neque. Aliquam tortor libero, accumsan quis viverra egestas,
consectetur at augue. Nullam a risus non tellus ultrices placerat ut
ultrices lectus. Nam gravida venenatis ipsum eu malesuada. Fusce
lobortis odio id mi eleifend consequat sit amet id felis. Pellentesque
tempor pharetra odio quis interdum. Curabitur eleifend dolor at turpis
lobortis porta. Nullam a risus non tellus ultrices placerat ut ultrices
lectus. Nam gravida venenatis ipsum eu malesuada. Etiam quis
aliquam lacus. In libero neque, fermentum quis laoreet in, fringilla vel
ipsum. Donec ut augue quis neque aliquet venenatis vitae et dui.
</p>
<p>
Pellentesque tempor pharetra odio quis interdum. Curabitur eleifend
dolor at turpis lobortis porta. Nullam a risus non tellus ultrices placerat
ut ultrices lectus. Nam gravida venenatis ipsum eu malesuada.
Etiam quis aliquam lacus. In libero neque, fermentum quis laoreet
in, fringilla vel ipsum. Donec ut augue quis neque aliquet venenatis
vitae et dui. Fusce lobortis odio id mi eleifend consequat sit amet id
felis. Proin pharetra semper tincidunt. Lorem ipsum dolor sit amet.
</p>
<h2>Desired Outcome</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
non dui neque. Aliquam tortor libero, accumsan quis viverra
egestas, consectetur at augue. Pellentesque metus erat,
tincidunt aliquam tincidunt et, dapibus eget nisl. Vivamus sit
amet ultricies arcu. In hac habitasse platea dictumst. Pellentesque
non porta leo. non bibendum nisi. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Ut non dui neque.
Aliquam tortor libero, accumsan quis viverra egestas, consectetur
at augue. Pellentesque metus erat, tincidunt aliquam
tincidunt et, dapibus eget nisl. Vivamus sit amet ultricies arcu.
In hac habitasse platea dictumst. Pellentesque non porta leo.
non bibendum nisi.
</p>
<p>
Pellentesque non porta leo. non bibendum nis, consectetur
adipiscing elit. Ut non dui neque. Aliquam tortor libero, accumsan
quis viverra egestas, consectetur at augue. Pellentesque
metus erat, tincidunt aliquam tincidunt et, dapibus
eget nisl. Vivamus sit amet ultricies arcu. In hac habitasse
platea dictumst. Pellentesque non porta leo. non bibendum
nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut non dui neque. Aliquam tortor libero, accumsan quis viverra
egestas, consectetur at augue. Pellentesque metus erat,
tincidunt aliquam tincidunt et, dapibus eget nisl. Vivamus sit
amet ultricies arcu. In hac habitasse platea dictumst.
</p>
</div>
</body>
</html>
I need to convert this HTML to a PDF on the server in a C# web app. Presently I am trying to use the Essential Objects PDF component, but I am willing to consider any .NET API that is capable of doing what I need.
This layout is going to represent a 5 – 7 page report, so there must be 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.
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.
EO PDF also slices elements such as images in two 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 impossible with EO. Is there a way to get this done?
According to official corresponance with Essential Objects support, HTML columns across multiple pages aren’t really supported, since they can’t be specified well.
I was instead able to use the HtmlToPdf.Options.ColumnCount and HtmlToPdf.Options.ColumnGapWidth options, along with multiple drawing passes, to get the job done.