Styling Through Custom Parameters

You can activate parts of your CSS by using custom transformation parameters that start with the args.css.param. prefix.

These parameters are recognized by the publishing pipeline and are forwarded as synthetic attributes on the root element of the merged map. The last part of the parameter name will become the attribute name, while the value of the parameter will become the attribute value. The namespace of these synthetic attributes is: http://www.oxygenxml.com/extensions/publishing/dita/css/params.

When using the DITA Map PDF - based on HTML5 & CSS or the DITA PDF - based on HTML5 & CSS transformations, the generated attribute will be in no namespace.

Notes:

Make sure the name of your custom parameter does not conflict with an attribute name that may already exist on the root element.
Use only Latin alphanumeric characters for parameter names.
You can set multiple styling parameters at the same time.

How to Limit the Depth of the TOC Using a Parameter

In the following example, a custom parameter is used to switch from a full depth table of contents to a flat one that shows only the titles of the first-level topics (such as chapters, notices, or the preface).

The custom parameter is:

args.css.param.only-chapters-in-toc="yes"

The CSS that hides the topicrefs at level 2 or more:

:root[only-chapters-in-toc='yes'] *[class ~= "toc/toc"] 
         > *[class ~= "map/topicref"]> *[class ~= "map/topicref"] {
  display:none;
}

The :root[a|only-chapters-in-toc='yes'] selector makes the rule activate only when the attribute is set.

How to Change the Page Size Using a Parameter

In the following example, a custom parameter is used to modify the page size. The parameter is defined in the transformation scenario as:

args.css.param.page-size="A4"

Then in the CSS, the attribute value is extracted and used as follows:

@page {
    size: oxy_xpath('/*/@*[local-name()="page-size"][1]');
}

How to Change the Cover Page Using a Parameter

In the following example, a custom parameter is used to set the path of the cover page. The parameter points to an image by using its URL and is defined in the transformation scenario as:

args.css.param.cover-page="file:/path/to/cover-page.svg"

Then in the CSS, the attribute value is extracted and used as follows:

@page front-page {
    background-image: url(oxy_xpath('/*/@*[local-name()="cover-page"][1]'));
}