CSS Functions

Supported CSS functions include:

attr()

It is used to retrieve the value of an attribute of the selected element and use it in the style sheet. The attr() function can be used with any CSS property. For more details, see MDN Web Docs: attr().

url()

The <url> CSS data type denotes a pointer to a resource, such as an image or a font. It has no proper syntax and can only be expressed through the url() functional notation. URLs are used in numerous CSS properties, such as background-image, cursor, @font-face, and list-style-image.

leader()

Used to fill a space with a pattern.

elem:before {
  content: "A" leader(".") "B";
  display:block;  
}

The text "A" and "B" should be on the left and right sides of the page, with a line full of dots between them. See Creating a Table of Contents (TOC) for more examples.

string()

Retrieves the value of a string-set. See Headers and Footers for use-cases.

calc()

The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), division (/) to be used as component values. Percentages are solved relative to the dimensions of the containing parent block. It can be used when length values are accepted:

elem {
  width: calc(100% - 1em);
}

For more information, see: https://drafts.csswg.org/css-values-3/#calc-notation.

content()

Retrieves the text content from the current element. Used in a string-set definition. See Headers and Footers for use-cases.

counter()

Retrieves the value of the innermost counter of that name on the element. https://www.w3.org/TR/css-lists-3/#funcdef-counter

counters()

Retrieves all the values of a counter of that name on the element, separated by a delimiter. https://www.w3.org/TR/css-lists-3/#funcdef-counters

target-counter()

The target-counter() function retrieves the value of the innermost counter with a given name. The required arguments are the url of the target and the name of the counter. An optional counter-style argument can be used to format the result. https://www.w3.org/TR/css-gcpm-3/#target-counter

target-counters()

The target-counters() function fetches the value of all counters of a given name from the end of a link, and formats them by inserting a given string between the value of each nested counter. https://www.w3.org/TR/css-gcpm-3/#funcdef-target-counters

oxy_ … ()

This is a collection of extension functions that are only recognized by Oxygen products. They can be used to process strings, do mathematical calculations, execute XPath queries over the document, and retrieve text from the document. For the complete list, see: Custom CSS Functions.

The following example counts the number of words from a paragraph (including tracked changes) and displays the result in front of it:

p:before{ 
  content: 
   concat("|Number of words:", 
    oxy_xpath(
        "count(tokenize(normalize-space(string-join(text(), '')), ' '))",
        processChangeMarkers,
       true),
    "| "); 
}