Log in / Register

Forum › How do I...?

Long PDF page size

trideq
Our displays have page sizes from 20k pixels to 80k pixels in width and 1110px in height (basically a long petroleum well data).

How can i set PDF page size as per my html page size? Below is the html code.

<html>
<style>
#page {
width: 20000px;
min-height: 1150px;
}
</style>

<body>
<div id="page">
<img src="./test0.svg" style="width:3990px;height:1108px"; />
<img src="./test1.svg" style="width:3990px;height:1108px"; />
<img src="./test2.svg" style="width:3990px;height:1108px;" />
<img src="./test3.svg" style="width:3990px;height:1108px;" />
<img src="./test4.svg" style="width:3990px;height:1108px;" />
</div>

</body>
</html>
mikeday
That's big, what physical size do you want this to be?

20k pixels is about 5 metres wide at 96dpi. :D
trideq
Its a petroleum well log printed with log printers on a contiguous paper.
mikeday
In that case you can set the page size with this CSS rule:
@page {
    size: 5291mm 304mm
}

Or substitute appropriate dimensions for your printer.
trideq

Is it like the following? I am not well versed with CSS (i am basically an application developer).

<html>
<style>
#page {
size: 5291mm 304mm
}
</style>

<body>
<div id="page">
<img src="./test0.svg" style="width:3990px;height:1108px"; />
<img src="./test1.svg" style="width:3990px;height:1108px"; />
<img src="./test2.svg" style="width:3990px;height:1108px;" />
<img src="./test3.svg" style="width:3990px;height:1108px;" />
<img src="./test4.svg" style="width:3990px;height:1108px;" />
</div>

</body>
</html>
mikeday
No, the @page rule applies to the physical page itself, whereas #page applies to the element with the ID of "page".

You might not see @page much on the web because many websites don't have print-specific style sheets.

The user guide describes paged media styling in more detail.
trideq
Great. That did the magic. Thanks alot Mike.
trideq
When SVG images are converted to pdf, somehow a gap of 2-5 pixels is inserted between the images. Where as the html shows without any gap between the SVG images.

See attached screenshots.

How to remove gaps between the SVG images? Here is the html code

<html><style>#page { width: 70000px; height: 1200px }@page { size: 70000px 1200px }</style>
<body>
<div id="page">
<img src="line.png" style="width:2px;height:1056px;display:inline;font-size:0px;" /><img src="logo-Top.png" style="width:225;height:1000;display:inline;font-size:0px;" /><img src="line.png" style="width:2px;height:1056px;display:inline;font-size:0px;" /><img src="line.png" style="width:2px;height:1056px;display:inline;font-size:0px;" /><img src="cpRightImage.png" style="width:220;height:1056;display:inline;font-size:0px;" /><img src="line.png" style="width:2px;height:1108px;display:inline;font-size:0px;" /><img src="line.png" style="width:2px;height:1108px;display:inline;font-size:0px;" /><img src="legend.png" style="width:472;height:718;display:inline;font-size:0px;" /><img src="line.png" style="width:2px;height:1056px;display:inline;font-size:0px;" /><img src="line.png" style="width:2px;height:1056px;display:inline;font-size:0px;" /><img src="remarksImage.png" style="width:156px;height:1056px;display:inline;font-size:0px;" /><img src="line.png" style="width:2px;height:1056px;display:inline;font-size:0px;" /><img src="line.png" style="width:2px;height:1056px;display:inline;font-size:0px;" /><img src="test0.svg" style="width:3995px;height:1108px;display:inline;font-size:0px;" /><img src="test1.svg" style="width:3995px;height:1108px;display:inline;font-size:0px;" /><img src="test2.svg" style="width:3995px;height:1108px;display:inline;font-size:0px;" /><img src="test3.svg" style="width:3995px;height:1108px;display:inline;font-size:0px;" /><img src="test4.svg" style="width:3995px;height:1108px;display:inline;font-size:0px;" /><img src="test5.svg" style="width:3995px;height:1108px;display:inline;font-size:0px;" /><img src="test6.svg" style="width:3995px;height:1108px;display:inline;font-size:0px;" /><img src="test7.svg" style="width:3995px;height:1108px;display:inline;font-size:0px;" /><img src="test8.svg" style="width:3995px;height:1108px;display:inline;font-size:0px;" /><img src="test9.svg" style="width:3995px;height:1108px;display:inline;font-size:0px;" /><img src="test10.svg" style="width:3995px;height:1108px;display:inline;font-size:0px;" /><img src="test11.svg" style="width:3995px;height:1108px;display:inline;font-size:0px;" /><img src="test12.svg" style="width:3995px;height:1108px;display:inline;font-size:0px;" /><img src="test13.svg" style="width:3995px;height:1108px;display:inline;font-size:0px;" /><img src="test14.svg" style="width:3995px;height:1108px;display:inline;font-size:0px;" />
</div>
</body>
</html>
  1. gapinPDF.jpg‎ 48.2 kB ‎
    Shows Gap between svg images
  2. noGapinBrowser.jpg‎ 57.9 kB ‎
    No gap btn svg when displayed in browser
trideq
This gap is seen in PDF generated from the html code above.
mikeday
What are the internal dimensions eg. width/height/viewBox of the SVG files?
trideq
It shows as follows:

<svg xmlns="http://www.w3.org/2000/svg" id="SvgGdi_output">
<g id="root_group" style="shape-rendering:crispEdges;">
<rect width="4000" x="0" y="0" height="1108" id="19861" style="&E1;" />
<rect width="4000" x="0" y="0" height="1022" id="19864" style="&E2;" />
trideq
I changed the html code to set width as 4000px and it still shows 2 pixel gap.
mikeday
Do you see any gaps if you use a simple SVG like this one:
<svg viewBox="0 0 4000 1108" xmlns="http://www.w3.org/2000/svg">
<rect width="4000" x="0" y="0" height="1108" fill="blue" stroke="red"/>
</svg>
trideq
Inserting viewBox="0 0 4000 1108" takes care of the gap. But the problem is that these SVG files are produced by a software and editing them to insert viewbox may not be feasible. Is there anyway to include it as part of style or command line args?
mikeday
I'm guessing the issue here is that without a viewBox attribute Prince will look at the content to determine the canvas size, and perhaps some part of the content goes outside the 4000 pixel range, or appears to do so.

If you can email me (mikeday@yeslogic.com) one of the SVG files we can investigate this possibility and check that it's doing the right thing.

I don't think it's possible to add a viewBox via style to external SVG images; there might be a way if their content can be included inline in the document itself.
trideq
Thanks Mike. Sent you files.
Vancil
Is there a way to make everything auto fit on one page?
mikeday
No, the page size cannot be determined dynamically by the content.

(Although in some cases you could use JavaScript to add up all the image sizes and then apply CSS to set the page size appropriately; this won't work for variable text sections though).