Log in / Register

Forum › How do I...?

How to prevent image in header from overlapping contents in page body?

Cymru
In the XML input to Prince shown below the intent is to have a header with an image on the right. The image is a logo which is supplied to the system that generates the input to Prince at run time. The dimensions of the logo can vary - in the case below the logo is tall enough to overlap the heading in the table in the main body. Is there a recommended way to keep the header and body separate?


<html>
<head>
<style>
@page {
margin: 1.05in .5in .25in .5in;
size: A4 landscape;
@top-left { content: flow(header); }
prince-shrink-to-fit: auto;
}
div.prince_header { flow: static(header); background-repeat: no-repeat; background-position: right; }
div.prince_header span { line-height: 25pt; }
div.prince_header img { prince-image-resolution: 124dpi; float: right; padding-top: 20px; }
</style>
</head>
<body class="landscape">
<div class="prince_header">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAAB8CAIAAABFSKPuAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIaSURBVHhe7daxTStBFEBRx0RkPyEhcg80QA8UQEYNboFqaIZi+F4bvPYabearETqjE73Ry65md/O128Kt6YyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojMJQnT2+P2xeXxbD7dfbv6fNfJ6eH1duL9bXFwkN39nL/T6ReXhIZy5mcbt7eN3cf/x6tVikNXhn02QZxxTQMaZ9VVddfltfpDZ2Z9MjdPf+djaZ7PM6DFe6WV+8GFIYv7Prkn6esbPOPp/vpl+w6Rwm64vLOTf3t96z08R7NpjB/89+e4HmvK5uV64ubqkN3tnxg3j2CE0P1fyDf/xczitnJa0vEhuus7PzU8lUz+lcffgOAZ3ORUnri4SG6ow/S2cUdEZBZxR0RkFnFHRGQWcUdEZBZxR0RkFnFHRGQWcUdEZBZxR0RkFnFHRGQWcUdEZBZxR0RkFnFHRGQWcUdEZBZxR0RkFnFHRGQWcUdEZBZxR0RkFnFHRGQWcUdEZBZxR0RkFnFHRGQWcUdEZBZxR0RkFnFHRGQWcUdEZBZxR0RkFnFHRGQWcUdEZBZxR0RkFnFHRGQWcUdMbt7bb/AaDnuiXUQy1aAAAAAElFTkSuQmCC"/>
<span class="line1">Heading</span>
<br/>
<span>Sub Heading</span>
<br/>
</div>
<table style="width:100%;border-width: 1px 1px 1px 1px; border-style: solid;">
<thead>
<tr>
<td>Heading1</td>
<td>Heading2</td>
<td>Heading3</td>
<td>Heading4</td>
<td>Heading5</td>
<td>Heading6</td>
<td>Heading7</td>
<td>Heading8</td>
</tr>
</thead>

</table>
</body>
</html>

mikeday
You could apply "clear: right" to push it below the floated image?
mikeday
Sorry, I misread the document. Since the logo is being placed in the page margin, this is a more difficult situation. The margin has a fixed size, and content that overflows it is not visible to the page body content, so regular float clearance will not work.

Do you need to repeat the logo on every page?
Cymru
Yes, the logo is needed on every page.
mikeday
This is an awkward situation. You could place the entire document inside a table, and put the logo in the table header, which will be repeated on each page. Or you could check the size of the logo and adjust the CSS accordingly, although this would require some scripting. Unfortunately I don't think it is possible to do this in a simple way with regular page margin boxes.
Cymru
I'm getting promising results specifying the CSS attributes max-height and max-width for the logo. What are the fixed dimensions of the margin in portrait and landscape?
mikeday
The margin size depends on what you specify with the margin property in the @page rule.
Cymru
Mike, In the original situation I was looking at it appears that prince-image-resolution: 124dpi was specified in the XML along with an image that was 300dpi. Can you provide some insight into how these two values contribute to the final output in the PDF?
mikeday
If you have an image, you can specify the exact dimensions it should have on the page using the width and height properties.

However, you might not want to specify a width, you might want the width to be determined by the number of pixels in the image, multiplied by the resolution (a DPI value) of the image.

Some image formats include internal metadata specifying the physical resolution of the image, eg. 300dpi. Normally Prince will not use this, for compatibility with web browsers: all images are treated as being 96dpi by default.

There is a CSS property called prince-image-resolution which allows you to override this behaviour. Specifying "auto" will use the image resolution found in the image, if it exists. The default value is "normal", ie. 96dpi, or you can specify any other resolution you like, such as 300dpi.
[code]prince-image-resolution: