Prince Tips and Tricks

Page headers and footers

The content property can be applied to page regions, such as @top and @bottom, to create page headers and footers with generated content. See Page regions for more details.

@page {
    @top { content: "Prince User Guide" }
    @bottom { content: counter(page) }
}

List markers

The content property can be applied to the ::marker pseudo-element to specify a custom marker for list items. See Lists for more details.

li::marker { content: "No. " counter(list-item) }

Footnote markers

The content property can be applied to the ::footnote-call and ::footnote-marker pseudo-elements to specify custom markers for footnotes. See Footnotes for more details.

.fn::footnote-call { content: "*" }

Before and After pseudo-elements

The content property can be applied to the ::before and ::after pseudo-elements to add generated content before or after an element. For example, adding section numbers in front of headings or including quotation marks around a block of text.

h1::before, h1::after { content: "***" }

Counters and Numbering

Counters are the mechanism provided by CSS to perform numbering. They can be used to number list items, pages, footnotes, sections and any other document content that needs to be numbered.

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)
}

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

chapter { counter-increment: chapter-num }

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

Cross-references

Prince supports cross-references using generated content with two special functions: target-counter and target-content.

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

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

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

Script Functions

Prince supports arbitrary JavaScript functions to be called from CSS generated content using the prince-script() function (see the content property).

Please note that Prince is not running JavaScript by default - it needs to be explicitly enabled. See Applying JavaScript in Prince.

p::after {
    content: prince-script(myfunc)
}

function myfunc()
{
    return "Some generated content text!";
}

Prince.addScriptFunc("myfunc", myfunc);

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

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

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;
});

Using generated content in page regions

Generated content in page regions may contain text, page numbers or text content copied from the document.

@page {
    @top-left {
        content: "TOP SECRET";
        color: red
    }
    @bottom-right {
        content: counter(page);
        font-style: italic
    }
}

Copying text content from the document

Generated content in page regions may also contain text content copied from the document using the string-set property:

@page {
    @top {
        content: string(doctitle)
    }
}

h1 { string-set: doctitle content() }

The second argument to the string() function is a page-policy, which can be one of the following: first (the first value the string is set to on the page), first-except (equivalent to start unless the string-set is applied on the current page, in which case it will return no value), last (the last value the string is set to on the page) or start (the value the strin has at the start of the page).

For a dictionary, you might want to have a page header that says "a-af", where "a" is the first definition on the page and "af" is the last, so you apply string-set for each definition, and then you can select the first and last in the header.

The value first-except is equivalent to start, unless the string-set is applied on the current page, in which case it will return no value.

These values of page-policy are used in the Dictionary sample (HTML - PDF).

Taking elements from the document

Page region content may be taken from the document itself. Any block-level element can be removed from the normal flow and placed in a page region.

@page {
    @top { content: flow(header) }
}
h1 { flow: static(header) }

Please note that:

• All margin properties of a non-normal flow element will be ignored.
• The first non-normal flow element that appears on a page will be used on the current page and carried onto following pages.