Edit online

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

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-color:inherit; 
}

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 as draft, use the draft.css in your transformation scenario, otherwise directly reference the customization CSS.

Edit online

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  (//bookmeta/bookchangehistory/approved) then ""
else  "../../images/draft-watermark.png" '));
    background-position:center;
    background-repeat:no-repeat;
    background-color:inherit; 
}

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 */ 
}

The body selector is used here in case you want to apply the DITA Map PDF - based on HTML5 & CSS transformation type. You can use another element selector to target a specific part of your publication (for example, marking only the tables as drafts).