Draft Watermarks

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.

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.

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