Edit online

Draft Watermarks

A watermark is an image displayed as the background of a printed document and it is faded enough to keep the publication text readable. Draft watermarks are used to indicate that a document is under construction or has not yet been approved.

Edit online

How to Add a Draft Watermark on All Pages

To add a draft watermark to all of your publication pages, you can use the following page selector in your customization CSS:

@page {
    background-image: url("draft.svg");
    background-position:center;
    background-repeat:no-repeat;
    background-size: 100% 100%;
}

If you have already set a background image for other pages (for example, the front-page or table-of-contents), the above selector won't change them, as they are more specific.

The best practice is to use a different draft.css CSS file that imports the customization CSS where the rest of the style changes reside. If you need to publish the content as a draft, use the draft.css in your transformation scenario, otherwise directly reference the customization CSS.

Edit online

How to Add a Draft Watermark in the Foreground

If you want the watermark to be displayed above the text (in the foreground), instead of using the standard background-image property, you can use the -oxy-foreground-image property:

@page {
    -oxy-foreground-image: url("draft.svg");
}

You can set a more specific selector if you just need to display the foreground in a subset group of pages (for example, chapter). In this case, the above selector will not change it since it is more specific.

Note: The usage of SVG images is preferred because other image types suffer from pixelation and because foreground images are stretched to the full page size.
Edit online

How to Add a Draft Watermark Depending on Metadata

Suppose you want to apply a Draft watermark until your DITA bookmap is approved and the map is approved when an <approved> element has been added to the metadata section (for example, in the bookmeta/bookchangehistory element).

<bookmeta>
   <author>John</author>
   <critdates>
      <created date="1/1/2015"/>
      <revised modified="3/4/2016"/>
      <revised modified="3/5/2016"/>
   </critdates>          
   <bookchangehistory>
       <approved/>       
   </bookchangehistory>
...

Use oxy_xpath every time you need to probe the value from an element other than the one matched by the CSS selector, and test the expression on the merged HTML file using the Oxygen XPath Builder view.

You can either use a page selector that imposes the draft watermark on the entire page surface (recommended):

@page {
  background-image: url(oxy_xpath("if(//*[contains(@class, 'bookmap/approved')]) then '' else 'draft-watermark.png'"));
  background-position: center;
  background-repeat: no-repeat;
}

or use an element selector that restricts the watermark image only to the page area covered by that element:

:root, body{
  ... /* same as properties above */ 
}
Note: You can use another element selector to target a specific part of your publication (for example, marking only the tables as drafts).