[css-page-4] Page margin box for watermarks and overlays

[dauwhe]

Mike Day of PrinceXML suggested that a page margin box which represents the entire page body would be quite useful for watermarks or other page overlays.

[dauwhe]

Prince has now implemented a prince-overlay page region:

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

[frivoal]

Should that be a magically always on top thing, regardless of what the actual content of the page does in terms of z-indexing, 3d transforming, outlines, and so on?

[dauwhe]

I don't think so. We often set watermarks underneath some layers. But author control would be useful.

[faceless2]

We've had this functionality in our Report Generator for years, and it's popular - mostly for stamping "confidential" or "draft" on things.

If there were two layers - "underlay" or "background" (behind any content but above the page background), and "overlay" (on top of all content)- that would cover the two obvious cases, and implementing both is no harder than implementing one. I'm not sure any other form of interleaving with document content would be possible (injecting things into layers containing transforms and z-index?) or desirable.

The underlay option would effectively be creating another background layer, above any background on the @page (which includes those propagated from the root or HTML body).

@page {
    @underlay {
         content: counter(page);
         font-size: 80vh;
         text-align: center;
    }
}

[tabatkins]

Those seem pretty reasonable to me, yeah.

[frivoal]

They do as mechanisms, but thinking from the use cases discussed here, stamping "Draft" or "Confidential" over the document doesn't seem to be specific to pagination, and fixed positioning seems pretty appropriate, no?

[dauwhe]

They do as mechanisms, but thinking from the use cases discussed here, stamping "Draft" or "Confidential" over the document doesn't seem to be specific to pagination, and fixed positioning seems pretty appropriate, no?

How these repeat is specific to pagination, I think.

[frivoal]

Forgive my naiveté, but doesn't position:fixed essentially get you the same type of repetition? Or is the problem that it would cover the page's content area but not the surrounding page margin boxes?

[dauwhe]

Forgive my naiveté, but doesn't position:fixed essentially get you the same type of repetition?

I think it's quite interesting that at least PrinceXML doesn't do this.

With page margin boxes in conjunction with named pages, you have a lot more control over where the repeating content appears—I also wonder (pure speculation) if using PDF formatters on websites that may abuse position: fixed creates bad user experiences.

[faceless2]

There's at least one case where you couldn't do this with position: fixed, and that's where the stamp has to contain a page number: See https://github.com/w3c/csswg-drafts/issues/1879. The summary is that "fixed" is a single element repeated, so has to have the same counter values on every page.