I'm trying to create a pdf where each page contains multiple pages using floating div's. The weird thing is that Docraptor renders the PDF with less issues than my locally installed PrinceXML. Looking at the properties of the PDF's I see they are both rendered by PrinceXML 9.0 r5.
Still both have a yellow area which shouldn't be shown.
I'm just using the Windows GUI application to render the pdf locally. Am I missing some option?
My code:
Still both have a yellow area which shouldn't be shown.
I'm just using the Windows GUI application to render the pdf locally. Am I missing some option?
My code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Multipage test</title>
<style>
@page {
size: A4 landscape;
/*prince-bleed: 10mm;*/
/*prince-trim: 10mm;*/
/*prince-mark-offset: 1cm;*/
marks: crop cross;
margin: -3mm;
}
body, html, div {
margin: 0;
padding: 0;
}
.paper-page {
background-color: yellow;
height: 216mm; /*210mm + 3 + 3 */
width: 303mm; /* 297mm + 3 + 3 */
page-break-after: always;
}
.page {
float: left;
height: 216mm;
width: 101mm;
}
.color-1 {
background-color: #ffccff;
}
.color-2 {
background-color: #ccffff;
}
.color-3 {
background-color: #ffffcc;
}
.clear {
clear: both;
}
h1 {
font-family: "Times New Roman";
font-size: 24pt;
text-align: center;
}
</style>
</head>
<body>
<div class="paper-page">
<div class="page color-1">
<h1>Page 1</h1>
</div>
<div class="page color-2">
<h1>Page 2</h1>
</div>
<div class="page color-3">
<h1>Page 3</h1>
</div>
<div class="clear"></div>
</div>
<div class="paper-page">
<div class="page color-1">
<h1>Page 4</h1>
</div>
<div class="page color-2">
<h1>Page 5</h1>
</div>
<div class="page color-3">
<h1>Page 6</h1>
</div>
<div class="clear"></div>
</div>
</body>
</html>