Edit online

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, preface, notices).

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"]');
}

How to Change the Front Page Background Using a Parameter

Suppose you want to customize the front page of your publication depending on an "internal-use" marker. You should define the parameter in the transformation scenario as:
args.css.param.internal-use="yes"

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

:root[internal-use='yes'] *[class~='front-page/front-page'] {
    page: front-page-internal-use;
}

@page front-page-internal-use {
	background-color: yellow; /* or use an SVG as background-image */
}