Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating watermark text in CSS Paged Media

I've got a watermark that I need to repeat on every page of a PDF. The source text is a div in my HTML:

<div id="all"> (outermost container)
     <div id="background">
        <p id="watermark">Internal Use Only - Do Not Duplicate</p>
     </div>
    (more divs with the content of the book)
</div>

In my CSS, I have these declarations:

#background {
   position: absolute;
   display: block;
   top: 30mm;
   left: 10mm;
   bottom: 30mm;
   right: 10mm;
   z-index: -1;
   overflow: visible;
}
#watermark {
    color: cmyk(0,0,0, 0.4);
    font-size: 24pt;
    transform: rotate(-45deg);
}

This sort of works: the watermark is displayed on the first page of the PDF, but not on subsequent pages.
How can I get the watermark to display on every page?
I've tried various solutions, but the ones I found were all geared toward use in browsers and didn't address paged media.
I know this can be done with image watermarks, but I'd rather use text because it's a lot easier to change the text if e.g. a document gets translated.

I'm using Antennahouse to convert the HTML+CSS to PDF.

like image 279
Hobbes Avatar asked Dec 07 '25 21:12

Hobbes


1 Answers

This question was asked some time ago but I think the best answer is to handle this with the @page rule.

From W3C :

Authors can specify various aspects of a page box, such as its dimensions, orientation, and margins, within an ‘@page’ rule. ‘@page’ rules are allowed wherever rule-sets are allowed. An ‘@page’ rule consists of the keyword ‘@page’, an optional comma-separated list of page selectors and a block of declarations (said to be in the page context). An ‘@page’ rule can also contain other at-rules, interleaved between declarations. The current level of this specification only allows margin at-rules inside ‘@page’. read more...

One solution is to define @page in your stylesheet and use the css content property to place the watermark. Example:

@page:right {

    @top-left{
        content: 'Internal Use Only - Do Not Duplicate';
        font-size: 9pt;
        color: #000;
    }
}

Every page will contain the watermark in the top left.

like image 191
pwavg Avatar answered Dec 09 '25 14:12

pwavg



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!