Prince Tips and Tricks

Counter reset and increment

The counter-reset property applies to any element and initialises one or more counters to the specified values, or to zero if no value is specified.

Unless the resetting of a counter creates a nested counter, the scope of the counter includes the current element and all of its following siblings.

The counter-increment property applies to any element and increments one or more counters by the specified values, or by one if no value is specified.

The counter-increment and counter-reset properties are ignored on elements whose display property has the value none.

div.example1 { counter-reset: h3 h4 }
div.example1 h3 { counter-increment: h3 }
div.example1 h4 { counter-increment: h4 }
div.example1 h3::before { content: counter(h3) }
div.example1 h4::before { 
    content: counter(h4, lower-alpha) 
}

div.example2 { counter-reset: h3 }
div.example2 h3 { 
    counter-increment: h3;
    counter-reset: h4
}
div.example2 h4 { counter-increment: h4 }
div.example2 h3::before { content: counter(h3) }
div.example2 h4::before { 
    counter(h4, lower-alpha) 
}

Nested counters

If a counter is reset on an element and the same counter has also been reset on an ancestor of that element, a nested counter will be created. The scope of the nested counter is the current element only and its final value will not be carried onto its following siblings.

For example, a nested XHTML list with a ul element inside a li inside another ul creates a nested list-item counter.

ol { counter-reset: list-item }
li { counter-increment: list-item }
li::marker { 
    content: counters(list-item, ".", decimal);
    color: brown;
    font-weight: bold
}

Counter styles

Counter values are displayed as decimal numbers by default, but they may be displayed using other styles such as roman numerals or consecutive letters of the alphabet.

chapter { counter-increment: chapter-num }

chapter::before {
    content: "Chapter " counter(chapter-num, upper-roman)
}

The following table shows examples of the various counter styles:

Using target-counter

The target-counter function can be used with the content property to reference the value of a counter at a linked element.

a[href]::after {
    content: " [See page " target-counter(attr(href), page) "]"
}

The target-counter function can specify any counter, allowing cross-references to refer to list items, chapters or sections as well as pages.

The target-counter function can also take an optional counter style, similar to the normal counter function.

a[href]::after {
    content: " [See chapter "
	     target-counter(attr(href), chapter, upper-roman) 
	     "]"
}

Using target-content

The target-content function can be used with the content property to reference the text content of a linked element.

a[href]::after {
    content: " [See '" target-content(attr(href)) "']"
}

Accessing the current date and time

JavaScript functions have access to the current date and time, which can be added to the document using prince-script() in generated content.

@page {
    @top {
	content: prince-script(datestamp)
    }
}

Prince.addScriptFunc("datestamp", function() {
    return (new Date()).toString();
});

User-defined counter styles

The JavaScript functions used with prince-script() can take arguments that are themselves generated content. This allows functions to operate on counter values and implement new counter styles.

li::marker {
    content: prince-script(mycounterstyle, counter(list-item))
}

Prince.addScriptFunc("mycounterstyle", function(n) {
    if (n == 1) return "one";
    else if (n == 2) return "two";
    else if (n == 3) return "three";
    else return n;
});