Generated content is text and other content that is not found in the original
input document, but is added to the output from a style sheet using the CSS
content
property.
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.
CSS
@page {
@top { content: "Prince User Guide" }
@bottom { content: counter(page) }
}
The content
property can be applied to the ::marker
pseudo-element to specify a custom marker for list items.
See Lists for more details.
CSS
li::marker { content: "No. " counter(list-item) }
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.
CSS
.fn::footnote-call { content: "*" }
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.
CSS
h1::before, h1::after { content: "***" }
This will place three asterisks before and after h1
elements.
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.
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
.
CSS
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)
}
This creates two counters inside the scope of
a div
element. All h3
and h4
heading elements will be
numbered starting from 1 and the counter number will be placed before the
heading text.
CSS
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)
}
In this example the h4
counter will be reset at each
h3
element,
to produce sub-section numbering that restarts at each new section.
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.
CSS
ol { counter-reset: list-item }
li { counter-increment: list-item }
li::marker {
content: counters(list-item, ".", decimal);
color: brown;
font-weight: bold
}
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.
CSS
chapter { counter-increment: chapter-num }
chapter::before {
content: "Chapter " counter(chapter-num, upper-roman)
}
This rule will generate text such as "Chapter IV" before each chapter, with the appropriate chapter number displayed in uppercase roman numerals.
The following table shows examples of the various counter styles:
decimal | 1, 2, 3, … 9, 10, 11, … |
decimal-leading-zero | 01, 02, 03, … 09, 10, 11, … |
lower-roman | i, ii, iii, iv, v, vi, … |
upper-roman | I, II, III, IV, V, VI, … |
lower-alpha, lower-latin | a, b, c, … z, aa, ab, … |
upper-alpha, upper-latin | A, B, C, … Z, AA, AB, … |
asterisks | *, **, ***, ****, … |
lower-hexadecimal | 1, 2, 3, … 9, a, b, c, … |
upper-hexadecimal | 1, 2, 3, … 9, A, B, C, … |
octal | 1, 2, 3, 4, 5, 6, 7, 10, 11, 12, … |
binary | 1, 10, 11, 100, 101, 110, 111, … |
arabic-indic | ١, ٢, ٣, ٤, ٥, ٦, … |
persian / urdu | ۱, ۲, ۳, ۴, ۵, ۶, … |
cjk-decimal | 一, 二, 三, 四, 五, 六, … |
japanese-informal | 一, 二, 三, 四, 五, 六, … |
simp-chinese-informal | 一, 二, 三, 四, 五, 六, … |
trad-chinese-informal | 一, 二, 三, 四, 五, 六, … |
japanese-formal | 壱, 弐, 参, 四, 五, 六, … |
simp-chinese-formal | 壹, 贰, 叁, 肆, 伍, 陆, … |
trad-chinese-formal | 壹, 貳, 參, 肆, 伍, 陸, … |
lower-norwegian | a, b, c, … z, æ, ø, å, aa, ab, … |
upper-norwegian | A, B, C, … Z, Æ, Ø, Å, AA, AB, … |
lower-russian | а, б, в, г, д, е, ж, … |
upper-russian | А, Б, В, Г, Д, Е, Ж, … |
lower-ukranian | а, б, в, г, д, е, є, … |
upper-ukranian | А, Б, В, Г, Д, Е, Є, … |
lower-belarusian | а, б, в, г, д, е, ж, … |
upper-belarusian | А, Б, В, Г, Д, Е, Ж, … |
lower-bulgarian | а, б, в, г, д, е, ж, … |
upper-bulgarian | А, Б, В, Г, Д, Е, Ж, … |
lower-serbian | а, б, в, г, д, ђ, е, … |
upper-serbian | А, Б, В, Г, Д, Ђ, Е, … |
repeat(x, y, z) | x, y, z, xx, yy, zz, xxx, yyy, … |
symbols(x, y, z) | x, y, z, 4, 5, 6, … |
Prince supports cross-references using generated content with two special
functions: target-counter
and target-content
.
The target-counter
function can be used with the content
property to reference the value of a counter at a linked element.
CSS
a[href]::after {
content: " [See page " target-counter(attr(href), page) "]"
}
This will add a cross-reference after every link with the correct page number determined automatically. For example: [See page 17].
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.
CSS
a[href]::after {
content: " [See chapter "
target-counter(attr(href), chapter, upper-roman)
"]"
}
This will add a cross-reference after every link with the correct chapter number determined automatically and displayed using roman numerals. For example: [See chapter IV].
The target-content
function can be used with the
content
property to reference the text content of a linked element.
CSS
a[href]::after {
content: " [See '" target-content(attr(href)) "']"
}
This will add a cross-reference after every link that includes the text of the element being linked to, such as a chapter title. For example: [See 'Introduction'].
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.
CSS
p::after {
content: prince-script(myfunc)
}
JavaScript
function myfunc()
{
return "Some generated content text!";
}
Prince.addScriptFunc("myfunc", myfunc);
JavaScript functions have access to the current date and time, which can be
added to the document using prince-script()
in generated content.
CSS
@page {
@top {
content: prince-script(datestamp)
}
}
JavaScript
Prince.addScriptFunc("datestamp", function() {
return (new Date()).toString();
});
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.
CSS
li::marker {
content: prince-script(mycounterstyle, counter(list-item))
}
JavaScript
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;
});
Generated content in page regions may contain text, page numbers or text content copied from the document.
CSS
@page {
@top-left {
content: "TOP SECRET";
color: red
}
@bottom-right {
content: counter(page);
font-style: italic
}
}
The @page rule specifies that the top-left page region will contain the text "TOP SECRET" in red and the bottom-right page region will contain the current page number in an italic font.
Generated content in page regions may also contain text content copied
from the document using the string-set
property:
CSS
@page {
@top {
content: string(doctitle)
}
}
h1 { string-set: doctitle content() }
The @page rule specifies that the top-center page region will contain the text
content of the document title copied from the text content of the
h1
element in the document.
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).
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.
CSS
@page {
@top { content: flow(header) }
}
h1 { flow: static(header) }
The @page rule specifies that the top page region is a new static flow named "header".
The rule for the h1
element moves it to the "header" static flow,
removing it from the default normal flow.
Please note that:
margin
properties of a non-normal
flow element will be ignored.