2 つの列を使用する単純な HTML レイアウトがあります。マークアップの例 (Chrome でのみ正しく表示されます。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>
この HTML をサーバー上の C# Web アプリで PDF に変換する必要があります。現在、Essential Objects PDF コンポーネントを使用しようとしていますが、必要なことを実行できる .NET API を検討したいと考えています。
このレイアウトは 5 ～ 7 ページのレポートを表すため、改ページが必要です。
直感的に、ユーザーはコンテンツが最初にページ 1 の両方の列に表示され、次にページ 2 の両方の列に表示されることを期待します。したがって、ページ 2 の列 1 は、ページ 1 の列 2 からのオーバーフローで開始する必要があります。
しかし、EO PDF は (ブラウザーが行うように) 2 つの非常に高い列を作成し、ページ境界でそれらをスライスするように見えます。その結果、列 1 のコンテンツがページ 2 以降に拡張されてから、ページ 1 の列 2 に折り返されます。
列のコンテンツはユーザー提供のマークアップであるため、実行時に変化し、簡単に分割できず、ページ上で最終的にどのくらいの大きさになるかわかりません。手動改ページを挿入します。
また、EO PDF は、画像などの要素がページ境界にまたがる場合、それらを 2 つにスライスします。
どちらの効果もhttp://screencast.com/t/ojIPeamhtで見ることができます
これらの問題により、EO では複数ページのレイアウトが不可能になっているようです。これを行う方法はありますか？