Forum How do I...?

Apply Custom Watermark

matt_d_rat
Hi guys,

Have been trying to figure this one out myself but alas I am a little stumped, but since this forum is an excellent source of knowledge I wonder whether someone would be able to help me.

Basically we use Prince to produce PDF versions of invoices we generate in our SASS accounting package. We have had a request from one of our users to basically display a watermark text (possibly semi-translucent if possible) over the top of the content in the center of each page, something like: "Paid with thanks." when a status of an invoice is paid. What is the best way of going about doing this? Is there an internal function to prince I can utilise to achieve this result?

Thanks for your help in advance.
mikeday
You could use a page header, so that it repeats on each page, and within it place an absolutely positioned block so that you can move it to the center of the page without disturbing other content, and then use an rgba() color so that it can be semi-transparent. Does this sound plausible? :)
matt_d_rat
Ok I am almost there with this, but I cannot get this text to display in the center of the page, it always stays fixed to the top of the header, any ideas? Here is the code I am using:

meta[name="statustext"] {
	string-set: statustext attr(content);
}
			
@page {
	@top-center {
		color: rgba(0,0,0,0.8);
		content: string(statustext);
		font-size: 20pt;
		text-align: center;
		position: absolute;
		top: 50%;
		z-index: 99;
	}
}
jim_albright
Since you have positioned it at top-center that is where you will find it. The 50% is of the top-center.

You can try putting it on @page but I think you might get it to work if you add a lot of space above forcing the content onto the page area.

Jim Albright
Wycliffe Bible Translators

matt_d_rat
I tried adding it to @page but it did not render the text. Are you suggesting that I simply pad out the text with line breaks to force it onto the page area? - Seems a bit, hackey lol. Is there not a more elegant way of doing it? How do Prince apply their watermark to the free licensed version? Couldn't this be done in a similar way through CSS or some prince specific command?
mikeday
Actually, now that I look at it you can drop the absolute positioning and just add some padding-top to push it down into the middle of the page:
@page {
   @top-center {
      color: rgba(0,0,0,0.8);
      content: string(statustext);
      font-size: 20pt;
      padding-top: 6in;
   }
}

I think absolute positioning will only work for a document element that is flowed into the margin box.
matt_d_rat
Cheers mike, this solution will work for me. But would be cool if we could see some kind of prince command developed as a solution to apply a watermark to document, can see this application being quite useful for freelancers who need to provide proofs of work to clients. Once again, great support on these forums. Keep up the good work.
trevordevore
@mikeday - Is there a way to use the @top-center approach while still using @top-left to show a header that spans the width of the page?

I have a template that places a solid color with some text and a logo in it across the top of the page by means of @top-left. I would like to add a watermark to this using the @top-center approach but when I do that the @top-left content gets cut off (I can only see about an inch of the header on the left side of the page).

Can I center the watermark using @top-center without disturbing the regular header?

Trevor DeVore
ScreenSteps
http://www.screensteps.com

mikeday
How about moving the watermark to the @left margin box instead?
trevordevore
Yes, the @left margin box does work. I was just hoping for automatic centering so that padding didn't have to be adjusted if the page width changes.

Trevor DeVore
ScreenSteps
http://www.screensteps.com

pencir
@mikeday
For this syntax:

content: string(statustext);


What and where are the content methods defined? i.e.:
string() *
Where is the variable that you are passing into that method declared?
statustext *

*the definitions/declarations of the methods and variables are not shown in this code, so I want to understand how to use this. Are these methods native to Prince or user-defined?
csant