content: normal | flow( name, page-policy? ) | [ "string" | url( filename ) | counter( name, counter-style?, page-policy? ) | counters( name, "separator", counter-style?, page-policy? ) | target-counter( url, counter, counter-style? ) | target-counters( url, counter, "separator", counter-style? ) | target-content( url ) | leader( "..." | dotted | solid | space ) | string( ident, page-policy? ) | content( ) | prince-base-url( ) | prince-script( ident, content? ) | prince-glyph-index( number ) | prince-fallback( url ) [ , content+ ]? | element( name ) ]+
| Initial value |
normal
|
|---|---|
| Applies to | all elements, tree-abiding pseudo-elements, and page regions |
| Inherited | no |
The content property can be used to insert text and other content
into the original document. The uses are vary wide-ranging and are treated in
more depth in the Generated Content
section.
The most simple use is to insert a literal string. A literal string can also
be passed as an argument to the leader() function, which expands
to fill the available space on the line like justified text, by repeating the
string as many times as necessary. It can also be referenced with the
string() function, in which case it needs to be defined in the
string-set
property (see Copying
text content from 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 string has at the start of the page).
These page policy values are only meaningful for string() used in page region content.
It can also be used to insert external content fetched from another resource:
this can be done with the url() function, the target-content()
function (see Using target-content)
or the prince-base-url() function. It can also be done
with the prince-fallback() function, which works just like the
url() function, but also has the possibility of specifying a fallback
content, in case the loading of the URL should fail.
The content to be inserted can also be fetched from other elements, or their
attributes, with the element() and the attr() functions,
or with the content() function. Also, any block-level element can
be removed from the normal flow with the prince-flow
property and can be inserted with the flow() function. See also the
documentation for Taking
elements from the document for more details.
The content property can also be used for different forms of counters
with the counter() and counters(), target-counter()
(see Using target-counter)
and target-counters() functions.
Last but not least, Prince supports arbitrary JavaScript functions to be called
from CSS generated content using the prince-script() function (see
Script Functions).
A special function is prince-glyph-index, which allows to choose
a glyph from a font by the index of that glyph in the font. Note that this is
very non-portable, as glyph indices are specific to individual font versions.
But it is a possible escape hatch for people who need a specific glyph and don't
have any other way of accessing it (by Unicode character or OpenType substitution).