1

I have a document that I'm converting to PDF using Prince. I want to have an overlay that will display a repeating text in demo envrionments so that generated documents can be marked.

Normally, I would apply such a watermark with an element like

<div id='overlay' style='position: absolute; top: 0; left: 0; background: url(watermark-demo-document.svg) repeat left top; width: 100%; height: 100%;'></div>

Prince, however, doesn't split absolutely positioned elements across page breaks, so the watermark will not be visible on any page apart from the first page. It was suggested that I put the watermark image in a page margin box, and then change the position of the box so that the image covers the page.

I've tried to do this to partial success, but I don't understand how to change the position of the page margin can so that it covers the whole page (can't make sense of this).

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
@page       { size: A4; margin: 25mm 8mm 27mm 8mm; padding: 0 0 0 0; @top { content: flow(header) } }
body        { margin:16mm; padding: 0; }
#overlay    { flow: static(header); background: url(watermark-demo-document.svg) repeat left top; width: 100%; height: 100%; }
    </style>
</head>
<body>
    <div id='overlay'></div>
    <p>Lorem ipsum...</p> <!-- multiple instances -->
</body>
</html>
Moss
  • 855
  • 1
  • 9
  • 23

1 Answers1

0

At DocRaptor (we're a Prince-based HTML-to-PDF service), we recently did the same thing to apply watermarks to our test documents.

It's definitely hacky, but the only thing we found for "breaking out" of the page margin box is a large image. It seemed to be the only way to expand your content outside the margin box, and I wouldn't be surprised if Prince "fixed" this issue, making the hack unusable, in a future version.

For your example, it would mean modifying your overlay code to this:

<div id='overlay'><img src='blank.png' width='3000' height='3000'></div>

You'd want to fool around with those heights and widths to get your desired size.

Note: Having this image as an overlay may affect (or may not, I'm not sure) the links within your document.

We ended up with code that looked like this:

<div id='overlay'>
   <img src='blank.png' width='3000' height='3000'>
   <div style='position: absolute; bottom: 0; left: 0; top: 0; right: 0; background-repeat: repeat-x; background-image: url(background.png); background-size: 570px 11px; background-position: 0 8px;'></div>
</div>
jamespaden
  • 448
  • 2
  • 10