Log in / Register

Forum › Bugs

Using element to set the watermark text is leaving the text in the pdf

Christine
Hi

I'm trying to produce a watermark in the middle of my page using the prince-overlay, so I have:
@page {
   @prince-overlay {
      content: element(watermark_text);
   }
}


And then I have CSS to set the element:

#watermark {
  font: arial, sans-serif;
  color: rgba(0,0,0,0.1);
  text-align: center;
  font-size: 60pt;
  transform: rotate(-30deg);
  position: running(watermark_text)
}


and in the html I have the first element in the <body> as:

    <div id="watermark">
      Imfuna Free Trial
      <p>Not for commercial use</p>
    </div>


The watermark appears nicely, but I'm getting an extra blank page at the front of the PDF.

I read in your docs that "Any block-level element can be removed from the normal flow and placed in a page region." but it doesn't seem to be getting fully removed.

I've tried moving the div#watermark a bit further into the the document and I seem to get an extra page where ever its positioned.

I've tried removing the <p> element so its just plain text content, but no change. I've checked that the div is being set to display: block.

Any ideas?





Christine
I've tried switching the div to a different block element - I've used h6. Again the watermark appears but I still get the blank page at the front. I should have said earlier that this is with Prince Version 12.
mikeday
Do you have "page-break-before: always" applied to elements that follow the watermark, or are they unusually tall?
Christine
No, we actually have "page-break-before: avoid" on the section that starts each page. The front page is pretty full, but there's no I've also tried adding "page-break-after: avoid " to div#watermark.

The first page section does actually have a height which could account for it starting a new page, so I was hoping you were onto something, but when I move the watermark div to after that, the same thing happens - I get a blank page even though the next page has "page-break-before: avoid" and no specific height set and the sum of the height of the watermark and the contents of the next page are less than a page.

I noticed that user agent style sheet for the browser was adding some margin to top and bottom so I have now added the following to the CSS for the watermark div. 
  margin: 0;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  padding: 0;

I've also removed the rotation in case that was adding some height. But still no joy.

Is there anything in the user agent stylesheet you use that could be adding height or width which I could override?

But my reading of your docs is that "position: running(watermark_text)" should be removing the element from the flow of the document anyway.

Any other ideas?



mikeday
I'm not sure, would you be able to email me (mikeday@yeslogic.com) a document demonstrating the problem so I can take a closer look?
Christine
Thanks, I've emailed the pdf and html to you.
pencir
@Christine, would you share the solution here?
Christine
Hi. the issue was that I was setting changing the page and headers between the title and the table of contents and although the headers were removed from the flow, there was some white space. This is Mikes exact reply:


It seems to hinge on having the header and footer markup between two different named pages.

f I comment out the marked elements then the blank page will not appear. I think it is occurring because the first section has "page: prefix_page" and the second section has "page: toc", and although the header, footer, and toc are being taken out of the normal flow they may be leaving behind some empty content that is considered to be on the "auto" page. Unfortunately Prince will then insert two page breaks, between prefix_page and auto and between auto and toc.

You could work around this issue by placing the header/footer/h6 elements inside the toc, although this would require some adjustments to the CSS, which currently assumes they are direct children of the body.