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