How can I wrap the text for my watermark? I was able to get it to wrap using the margin-top: 200px for the @page (see attachement usingmargintop.pdf). However, when I do this, naturally it moves my top margin down. It doesn't work if I place it inside the @top-center. Any ideas on how to get my watermark to wrap the text and remain in the center while also maintaining the top margin?


@page
{
/*if I don't have this, the watermark will not wrap */
/*if I move this into the @top-denter, it doesn't wrap the content*/
margin-top: 200px;

/* Watermark*/
@top-center
{
content: string(watermarktext);
color: rgba( 255, 0, 0, 0.10 );
font-family: arial,tahoma,helvetica,sans-serif;
font-size: 36pt;
width: 500px;
transform: rotate(-45deg) scale( 2 ) ;
transform-origin: 100% 0;
text-align: center;
word-wrap: break-word;
margin-left: 150px;
margin-right: 200px;
/*margin-top: 200px;*/
}

size: A4 landscape;
}

1. ate_style_print.css‎ 1.7 kB
2. notusingmargintop.pdf‎ 57.6 kB
3. tam.html‎ 25.7 kB
4. usingmargintop.pdf‎ 57.7 kB

I don't think the issue is text wrapping; rather the margin box isn't big enough to contain multiple lines of text. Setting the page margin to 200px makes the margin box bigger, making room for extra lines.

I find it very helpful to set a border on page margin boxes when troubleshooting, especially when transforming them!

Dave

Thank you Dave! I will take a look at your suggestions.

Ok this is how I resolved it. As Dave pointed out in my issue, I have to put the margin-top to allow space for the wrapping. However, in order to remove the extra spacing on my page, I offset it with the margin-top in the html body. I also needed the width in order to make it line-break. Thanks!


@page
{
margin-top: 150px;

/* Watermark*/
@top
{
content: string(watermarktext);
color: rgba( 255, 0, 0, 0.10 );
font-family: arial,tahoma,helvetica,sans-serif;
font-size: 40pt;
width: 500px;
transform: rotate(-45deg) scale( 2 ) ;
transform-origin: 100% 0;
word-wrap: break-word;
}

size: A4 landscape;
}


html, body {
font-family: arial,tahoma,helvetica,sans-serif;
font-size: 8pt;
width: 1024px;
margin-top: -120px;
}

The watermark text needing to fit in the page margin is a fundamental limitation that makes it frustrating to make watermarks with more than one line.

A workaround for this is to put the watermark as an element in the document and flow it to the header, this gives more scope to use child elements and positioning to take the text out of the flow and evade the clipping issue.

Long term I think it would be helpful if we were to add another @page region representing the entire page body area, specifically for use with watermarks and other overlays.

Mike, I filed an issue with CSS for this: https://github.com/w3c/csswg-drafts/issues/1393

Thanks!

The latest build includes support for a new @prince-overlay page region which makes it much easier to do watermarks:

@page {
  @prince-overlay {
    content: "WATERMARK";
    font-size: 300%;
    transform: rotate(-30deg)
  }
}