CSS References · Prince Documentation

In this section you find the documentation for the supported CSS features.

Supported CSS Specifications

Prince supports, fully or partially, the following CSS specifications:

CSS Level 2

CSS 2.1 Prince supports the specification, with few exceptions: Prince does not support the quotes property or the open-quote and close-quote values. Prince does not support properties that apply only to interactive media. Note that this includes outline and its outline-* subproperties. For similar reasons, Prince does not support visibility: collapse. Prince does not support the armenian or georgian list styles. Prince treats 1ex equivalently to 0.5em, which might not be correct for some fonts.

CSS Level 3

CSS Backgrounds and Borders Module Level 3 Prince does not support box-shadow and the border-image properties.

CSS Fragmentation Module Level 3 Prince does not support break-{before,after,inside}. However, Prince supports also the Prince-specific properties column-break-{before,after}. The initial value of widows and orphans has been changed from 2 to 1.

CSS Color Module Level 3 Prince supports opacity. It supports some of the extensions of the color property. rgba() is supported in builds after Prince 11.

CSS Generated Content Module Level 3 Prince does not recognize the quotes property and the quote-related content types.

CSS Fonts Module Level 3 Beyond the definitions in CSS 2.1, only font-stretch is recognized. However, Prince provides a different interface to the functionality of the font-variant-* and font-feature-settings properties.

CSS Generated Content for Paged Media Module Prince recognizes footnote-display and string-set as well as the mechanism for running elements. It does not recognize the running or footnote-policy properties, but Prince provides a different interface to the functionality of footnotes.

CSS Image Values and Replaced Content Module Level 3 Prince recognizes image-resolution, but takes a different syntax.

CSS Images Module Level 3 - Editor's Draft Prince supports the mandatory values of image-orientation, as well as the properties object-fit and object-position.

CSS Multi-column Layout Module Prince largely supports this module.

CSS Overflow Module Level 3 Prince supports the overflow property's behaviour as described in the Level 3 module, but does not support the 2-value syntax.

CSS Paged Media Module Level 3 Prince supports this module.

CSS Text Module Level 3 Prince does not recognize line-break, text-align-all and hanging-punctuation, and it does not support the value break-word of the property word-break.

CSS Transforms Module Level 1 Prince recognizes transform and transform-origin, but does not recognize transform-box. Prince does not allow perspective transforms.

CSS Basic User Interface Module Level 3 (CSS3 UI) Prince recognizes box-sizing and text-overflow.

CSS Writing Modes Level 3 Prince partially implements writing-mode.

CSS Namespaces Module Level 3 Prince supports namespaces in CSS.

CSS Conditional Rules Module Level 3 Prince supports the @media and @supports at-rules.

Filter Effects Module Level 1 Prince supports the filter property.

CSS Level 4

CSS Flexible Box Layout Module Level 1 Prince supports this module as of Prince 12, with the exception of page breaking/fragmentation, break-before/-after, visibility:collapse and vertical writing.

Selectors Level 4 Prince largely supports this module.

Media Queries Level 4 Prince supports this module as of Prince 11.1.

CSS Cascading and Inheritance Level 4 Prince supports the new supports() condition for the @import rule.

CSS Backgrounds and Borders Module Level 4 Prince recognizes the border-clip property, but takes a different syntax.

CSS Custom Properties for Cascading Variables Module Level 1 Prince supports this module.

Living Standards

CSS Books Prince supports target counters, footnote floats, bookmarks labels, levels and states, the flow property and the string-set property.

CSS Figures Prince largely supports the float extensions of the spec.

SVG

SVG 1.1 Prince supports the specification with some exceptions - please see Scalable Vector Graphics (SVG) for a full list of currently not supported elements.

CSS Level 2
CSS 2.1	Prince supports the specification, with few exceptions: Prince does not support the `quotes` property or the `open-quote` and `close-quote` values. Prince does not support properties that apply only to interactive media. Note that this includes `outline` and its `outline-*` subproperties. For similar reasons, Prince does not support `visibility: collapse`. Prince does not support the `armenian` or `georgian` list styles. Prince treats `1ex` equivalently to `0.5em`, which might not be correct for some fonts.
CSS Level 3
CSS Backgrounds and Borders Module Level 3	Prince does not support `box-shadow` and the `border-image` properties.
CSS Fragmentation Module Level 3	Prince does not support `break-{before,after,inside}`. However, Prince supports also the Prince-specific properties `column-break-{before,after}`. The initial value of `widows` and `orphans` has been changed from `2` to `1`.
CSS Color Module Level 3	Prince supports `opacity`. It supports some of the extensions of the `color` property. `rgba()` is supported in builds after Prince 11.
CSS Generated Content Module Level 3	Prince does not recognize the `quotes` property and the quote-related content types.
CSS Fonts Module Level 3	Beyond the definitions in CSS 2.1, only `font-stretch` is recognized. However, Prince provides a different interface to the functionality of the `font-variant-*` and `font-feature-settings` properties.
CSS Generated Content for Paged Media Module	Prince recognizes `footnote-display` and `string-set` as well as the mechanism for running elements. It does not recognize the `running` or `footnote-policy` properties, but Prince provides a different interface to the functionality of footnotes.
CSS Image Values and Replaced Content Module Level 3	Prince recognizes `image-resolution`, but takes a different syntax.
CSS Images Module Level 3 - Editor's Draft	Prince supports the mandatory values of `image-orientation`, as well as the properties `object-fit` and `object-position`.
CSS Multi-column Layout Module	Prince largely supports this module.
CSS Overflow Module Level 3	Prince supports the `overflow` property's behaviour as described in the Level 3 module, but does not support the 2-value syntax.
CSS Paged Media Module Level 3	Prince supports this module.
CSS Text Module Level 3	Prince does not recognize `line-break`, `text-align-all` and `hanging-punctuation`, and it does not support the value `break-word` of the property `word-break`.
CSS Transforms Module Level 1	Prince recognizes `transform` and `transform-origin`, but does not recognize `transform-box`. Prince does not allow perspective transforms.
CSS Basic User Interface Module Level 3 (CSS3 UI)	Prince recognizes `box-sizing` and `text-overflow`.
CSS Writing Modes Level 3	Prince partially implements `writing-mode`.
CSS Namespaces Module Level 3	Prince supports namespaces in CSS.
CSS Conditional Rules Module Level 3	Prince supports the `@media` and `@supports` at-rules.
Filter Effects Module Level 1	Prince supports the `filter` property.
CSS Level 4
CSS Flexible Box Layout Module Level 1	Prince supports this module as of Prince 12, with the exception of page breaking/fragmentation, break-before/-after, visibility:collapse and vertical writing.
Selectors Level 4	Prince largely supports this module.
Media Queries Level 4	Prince supports this module as of Prince 11.1.
CSS Cascading and Inheritance Level 4	Prince supports the new `supports()` condition for the `@import` rule.
CSS Backgrounds and Borders Module Level 4	Prince recognizes the `border-clip` property, but takes a different syntax.
CSS Custom Properties for Cascading Variables Module Level 1	Prince supports this module.
Living Standards
CSS Books	Prince supports target counters, footnote floats, bookmarks labels, levels and states, the `flow` property and the `string-set` property.
CSS Figures	Prince largely supports the float extensions of the spec.
SVG
SVG 1.1	Prince supports the specification with some exceptions - please see Scalable Vector Graphics (SVG) for a full list of currently not supported elements.

Length Units

Prince supports the following length units:

Absolute Length Units

The absolute length units correspond to exact distances in the PDF file.

Absolute length units

cm centimeters

mm millimeters

q quarter-millimeters

in inches

pc picas

pt points

Absolute length units
`cm`	centimeters
`mm`	millimeters
`q`	quarter-millimeters
`in`	inches
`pc`	picas
`pt`	points

Font Length Units

The font length units are relative to the font-size property.

Font length units

em font size of the element

rem font size of the root element

ex x-height of the element's font

Font length units
`em`	font size of the element
`rem`	font size of the root element
`ex`	x-height of the element's font

Pixel Unit

The pixel unit is relative to the de-facto standard of 96dpi (or rather, 96 pixel per inch) for compatibility with browsers.

Pixel unit

px pixel

Pixel unit
`px`	pixel

CSS Selectors

Below are the CSS selectors supported by Prince. For their precise definition please refer to the CSS specification - Prince largely implements Selectors Level 4.

Terminology and Definitions

selector Can refer to a simple selector, compound selector, complex selector, or selector list.

selector list A comma-separate list of selectors.

compound selector A chain of simple selectors that are not separated by a combinator.

simple selector Either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

relative selector A shorthand for selectors that represent elements relative to a :scope element.

combinator Punctuation that represents a particular kind of relationship between compound selectors on either side.

An+B This micro-syntax to indicate indexes in a list of sibling elements represents an integer step (A) and offset (B), i.e. it indicates the An+Bth elements in a list. It also takes the keywords odd and even.

expanded element name The tuple of local element name and namespace name.

Logical Combinations

Selector List

E, F, G A comma-separated list of selectors represents all the elements selected by each selector of the list.

The Matches-Any Pseudo-class

E:matches(s1, s2) The matches-any pseudo-class represents an element E that is represented by the list of compound selectors it takes as argument.

The Negation Pseudo-class

E:not(s1, s2) The negation pseudo-class represents an element E that is not represented by the list of compound selectors it takes as argument.

The Relational Pseudo-class

E:has(rs1, rs2) The relational pseudo-class represents an element E, if either of the relative selectors rs1 or rs2, when evaluated with E as the :scope element, match an element.

The Contains Pseudo-class

E:contains(foo) The contains pseudo-class represents an element E containing the text foo.

Selector List
`E, F, G`	A comma-separated list of selectors represents all the elements selected by each selector of the list.
The Matches-Any Pseudo-class
`E:matches(s1, s2)`	The matches-any pseudo-class represents an element `E` that is represented by the list of compound selectors it takes as argument.
The Negation Pseudo-class
`E:not(s1, s2)`	The negation pseudo-class represents an element `E` that is not represented by the list of compound selectors it takes as argument.
The Relational Pseudo-class
`E:has(rs1, rs2)`	The relational pseudo-class represents an element `E`, if either of the relative selectors `rs1` or `rs2`, when evaluated with `E` as the `:scope` element, match an element.
The Contains Pseudo-class
`E:contains(foo)`	The contains pseudo-class represents an element `E` containing the text `foo`.

Elemental Selectors

Type (tag name) selectors

E A type selector representing an element E in the default namespace.

|E A type selector representing an element E in no namespace.

ns|E A type selector representing an element E in the namespace ns.

*|E A type selector representing an element E in any or no namespace.

Universal selectors

* A universal selector representing all elements in the default namespace.

|* A universal selector representing all elements in no namespace.

ns|* A type selector representing all elements in the namespace ns.

*|* A type selector representing all elements.

Type (tag name) selectors
`E`	A type selector representing an element `E` in the default namespace.
`\|E`	A type selector representing an element `E` in no namespace.
`ns\|E`	A type selector representing an element `E` in the namespace `ns`.
`*\|E`	A type selector representing an element `E` in any or no namespace.
Universal selectors
`*`	A universal selector representing all elements in the default namespace.
`\|*`	A universal selector representing all elements in no namespace.
`ns\|*`	A type selector representing all elements in the namespace `ns`.
`\|`	A type selector representing all elements.

Attribute Selectors

Case-sensitivity of the attributes and values depends on the document language. To match values case-insensitively, the attribute selector may contain the identifier i before the closing bracket. (Example: [att=val i])

Default namespaces do not apply to attributes. Therefore a namespace ns that has been previously declared should be added before the namespace separator | preceding the attribute name.

Attribute presence and value selectors

[att] An attribute selector representing an element with the att attribute.

[att=val] An attribute selector representing an element with the att attribute with the value val.

[att~=val] An attribute selector representing an element with the att attribute containing the value val.

[att|=val] An attribute selector representing an element with the att attribute equal to or beginning with the value val.

Substring matching attribute selectors

[att^=val] An attribute selector representing an element with the att attribute whose value begins with the prefix val.

[att$=val] An attribute selector representing an element with the att attribute whose value ends with the suffix val.

[att*=val] An attribute selector representing an element with the att attribute whose value contains val.

Class selectors

E.val A class selector representing an element E with a class identifier val.

ID selectors

E#val An ID selector representing an element E with an ID identifier val.

Attribute presence and value selectors
`[att]`	An attribute selector representing an element with the `att` attribute.
`[att=val]`	An attribute selector representing an element with the `att` attribute with the value `val`.
`[att~=val]`	An attribute selector representing an element with the `att` attribute containing the value `val`.
`[att\|=val]`	An attribute selector representing an element with the `att` attribute equal to or beginning with the value `val`.
Substring matching attribute selectors
`[att^=val]`	An attribute selector representing an element with the `att` attribute whose value begins with the prefix `val`.
`[att$=val]`	An attribute selector representing an element with the `att` attribute whose value ends with the suffix `val`.
`[att*=val]`	An attribute selector representing an element with the `att` attribute whose value contains `val`.
Class selectors
`E.val`	A class selector representing an element `E` with a class identifier `val`.
ID selectors
`E#val`	An ID selector representing an element `E` with an ID identifier `val`.

Linguistic Pseudo-classes

The language pseudo-class

E:lang(C) The language pseudo-class represents an element E that is in the language C.

The language pseudo-class
`E:lang(C)`	The language pseudo-class represents an element `E` that is in the language `C`.

Input Pseudo-classes

The input control states

:enabled The :enabled pseudo-class represents user interface elements that are in the enabled state.

:disabled The :disabled pseudo-class represents user interface elements that are in the disabled state.

:read-write The :read-write pseudo-class matches an element that is user-alterable.

:read-only The :read-only pseudo-class matches an element that is not user-alterable.

The input value state

:checked The :checked pseudo-class represents user interface elements such as radio and checkbox elements that are selected by the user.

The input control states
`:enabled`	The `:enabled` pseudo-class represents user interface elements that are in the enabled state.
`:disabled`	The `:disabled` pseudo-class represents user interface elements that are in the disabled state.
`:read-write`	The `:read-write` pseudo-class matches an element that is user-alterable.
`:read-only`	The `:read-only` pseudo-class matches an element that is not user-alterable.
The input value state
`:checked`	The `:checked` pseudo-class represents user interface elements such as radio and checkbox elements that are selected by the user.

Location Pseudo-classes

The link pseudo-classes

E:link The :link pseudo-class applies to links that have not yet been visited.

E:visited The :visited pseudo-class applies to visited links.

The contextual reference element pseudo-class

E:scope The contextual reference element pseudo-class represents an element E being a designated contextual reference element. :scope is supported in conjunction with :has(), meaning that :scope matches the element that :has() is applied to.

The link pseudo-classes
`E:link`	The `:link` pseudo-class applies to links that have not yet been visited.
`E:visited`	The `:visited` pseudo-class applies to visited links.
The contextual reference element pseudo-class
`E:scope`	The contextual reference element pseudo-class represents an element `E` being a designated contextual reference element. `:scope` is supported in conjunction with `:has()`, meaning that `:scope` matches the element that `:has()` is applied to.

Tree-Structural pseudo-classes

The `:root` pseudo-class
`:root`	The `:root` pseudo-class represents an element that is the root of the document. In HTML 4 this is always the `HTML` element.
The `:empty` pseudo-class
`:empty`	The `:empty` pseudo-class represents an element that has no children at all.
The child-indexed pseudo-classes
`:nth-child(An+B of S)`	The `:nth-child(An+B)` pseudo-class represents the `An+B`th element that matches the selector list `S` among its inclusive siblings.
`:nth-last-child(An+B of S)`	The `:nth-last-child(An+B)` pseudo-class represents the `An+B`th element that matches the selector list `S` among its inclusive siblings, counting backwards from the end.
`:first-child`	The `:first-child` pseudo-class represents an element that is first among its inclusive siblings.
`:last-child`	The `:last-child` pseudo-class represents an element that is last among its inclusive siblings.
`:only-child`	The `:only-child` pseudo-class represents an element that has no siblings.
The typed child-indexed pseudo-classes
`:nth-of-type(An+B)`	The `:nth-of-type(An+B)` pseudo-class represents the `An+B`th element with the same namespace and type among its inclusive siblings.
`:nth-last-of-type(An+B)`	The `:nth-last-of-type(An+B)` pseudo-class represents the `An+B`th element with the same namespace and type among its inclusive siblings, counting backwards from the end.
`:first-of-type`	The `:first-of-type` pseudo-class represents an element that is the first with a particular namespace and type among its inclusive siblings.
`:last-of-type`	The `:last-of-type` pseudo-class represents an element that is the first with a particular namespace and type among its inclusive siblings, counting backwards from the end.
`:only-of-type`	The `:only-of-type` pseudo-class represents an element that has no siblings with the same namespace and type.

The :root pseudo-class

:root The :root pseudo-class represents an element that is the root of the document. In HTML 4 this is always the HTML element.

The :empty pseudo-class

:empty The :empty pseudo-class represents an element that has no children at all.

The child-indexed pseudo-classes

:nth-child(An+B of S) The :nth-child(An+B) pseudo-class represents the An+Bth element that matches the selector list S among its inclusive siblings.

:nth-last-child(An+B of S) The :nth-last-child(An+B) pseudo-class represents the An+Bth element that matches the selector list S among its inclusive siblings, counting backwards from the end.

:first-child The :first-child pseudo-class represents an element that is first among its inclusive siblings.

:last-child The :last-child pseudo-class represents an element that is last among its inclusive siblings.

:only-child The :only-child pseudo-class represents an element that has no siblings.

The typed child-indexed pseudo-classes

:nth-of-type(An+B) The :nth-of-type(An+B) pseudo-class represents the An+Bth element with the same namespace and type among its inclusive siblings.

:nth-last-of-type(An+B) The :nth-last-of-type(An+B) pseudo-class represents the An+Bth element with the same namespace and type among its inclusive siblings, counting backwards from the end.

:first-of-type The :first-of-type pseudo-class represents an element that is the first with a particular namespace and type among its inclusive siblings.

:last-of-type The :last-of-type pseudo-class represents an element that is the first with a particular namespace and type among its inclusive siblings, counting backwards from the end.

:only-of-type The :only-of-type pseudo-class represents an element that has no siblings with the same namespace and type.

Combinators

Descendant combinator

E F An F element descendant of an E element.

Descendant combinator
`E F`	An `F` element descendant of an `E` element.
`E >> F`
Child combinator
`E > F`	An `F` element child of an `E` element.
Next-sibling combinator
`E + F`	An `F` element immediately preceded by an `E` element.
Following-sibling combinator
`E ~ F`	An `F` element preceded by an `E` element.

E >> F

Child combinator

E > F An F element child of an E element.

Next-sibling combinator

E + F An F element immediately preceded by an E element.

Following-sibling combinator

E ~ F An F element preceded by an E element.

Tree-Abiding Pseudo-element Selectors

Generated content pseudo-elements

::before Represents a styleable child pseudo-element immediately before the originating element's actual content.

::after Represents a styleable child pseudo-element immediately after the originating element's actual content.

List markers

::marker Represents the automatically generated marker box of a list item.

Generated content pseudo-elements
`::before`	Represents a styleable child pseudo-element immediately before the originating element's actual content.
`::after`	Represents a styleable child pseudo-element immediately after the originating element's actual content.
List markers
`::marker`	Represents the automatically generated marker box of a list item.

Typographic Pseudo-element Selectors

The `::first-line` pseudo-element
`::first-line`	Represents the content of the formatted line of the originating element.
The `::first-letter` pseudo-element
`::first-letter`	Represents the first typographic letter unit of the first formatted line of the originating element, if it is not preceded by other content.

The ::first-line pseudo-element

::first-line Represents the content of the formatted line of the originating element.

The ::first-letter pseudo-element

::first-letter Represents the first typographic letter unit of the first formatted line of the originating element, if it is not preceded by other content.

Footnote Pseudo-element Selectors

The `::footnote-call` pseudo-element
`::footnote-call`	Represents the footnote calls, i.e. the anchors that refer to footnotes.
The `::footnote-marker` pseudo-element
`::footnote-marker`	Represents the footnote markers placed in front of the actual footnote text.

The ::footnote-call pseudo-element

::footnote-call Represents the footnote calls, i.e. the anchors that refer to footnotes.

The ::footnote-marker pseudo-element

::footnote-marker Represents the footnote markers placed in front of the actual footnote text.

Page Selectors

The `nth(N)` selector
`nth(N)`	Represents the Nth page of the document: `@page:nth(42) {...}`

The nth(N) selector

nth(N) Represents the Nth page of the document: @page:nth(42) {...}

CSS Media Queries

Below are all of the media queries supported by Prince. For their precise definition please refer to the Media Queries Level 4 specification.

Media queries test how Prince is configured, rather than how the document is styled. The configuration of Prince often depends on the command-line arguments passed to it.

Media Queries

A Media Query is a method of testing certain aspects of the user agent or device that the document is being displayed in.

The syntax consists of an optional media query modifier, an optional media type, and zero or more media features.

Several media queries can be combined into a comma separated media query list.

Media Query Modifiers

Negating a media query

not An individual media query can be negated by prefixing it with the keyword not.

Hiding a media query from legacy user agents

only Prefixing a media query with the keyword only will have no effect on the media query's result, but will be ignored by legacy user agents.

Negating a media query
`not`	An individual media query can be negated by prefixing it with the keyword `not`.
Hiding a media query from legacy user agents
`only`	Prefixing a media query with the keyword `only` will have no effect on the media query's result, but will be ignored by legacy user agents.

Media Types

A media type is a category of user-agent devices on which a document may be displayed. A more fine-grained way of targeting a specific device's exclusive aspects might be to use media features instead, or in addition. Prince defaults to the media type print.

However, note that the command-line option --media can be used to set a media type that media queries can test against. This can be convenient if the person running Prince knows in advance whether the PDF will be printed or viewed on the screen, such as might be the case for slideshows, or in case one might prefer the author's idea of what screen means.

Media types

all Matches all devices.

print Matches printers and devices intended to reproduce or produce a printed display.

screen Matches all devices that are not matched by print or speech.

speech Matches screenreaders and other devices that "read out" a page.

Media types
`all`	Matches all devices.
`print`	Matches printers and devices intended to reproduce or produce a printed display.
`screen`	Matches all devices that are not matched by `print` or `speech`.
`speech`	Matches screenreaders and other devices that "read out" a page.

Media Features

A media feature is a more fine-grained way of targeting a specific user-agent. Media features use the same syntax as CSS properties. However, there are some differences between the two:

Properties provide information about how to present a document; media features describe requirements of the output device.
Media features are wrapped in parentheses and combined with the keyword and.
A media feature may be given with only its name to evaluate the feature in a boolean context.
Media features with "range" type may be expressed with standard mathematical comparison operators.
Properties sometimes accept complex values, while media features only accept single values.

Multiple media features may be combined into a media condition using full boolean algebra (not, and, or).

Media feature types

discrete Media features of the type "discrete" take their values from a set.

range Media features of the type "range" take their values from a range. Their feature names can be prefixed by min- or max-.

Media feature types
discrete	Media features of the type "discrete" take their values from a set.
range	Media features of the type "range" take their values from a range. Their feature names can be prefixed by `min-` or `max-`.

Dimension Media Features

`width`
Value: `length`	Describes the width of the displayed page.
Type: range
`height`
Value: `length`	Describes the height of the displayed page.
Type: range
`aspect-ratio`
Value: `length`	Describes the ratio of the width to the height of the displayed page.
Type: range
`orientation`
Value: `portrait` \| `landscape`	Describes the width of the displayed page.
Type: discrete

width

Value: length Describes the width of the displayed page.

Type: range

height

Value: length Describes the height of the displayed page.

Type: range

aspect-ratio

Value: length Describes the ratio of the width to the height of the displayed page.

Type: range

orientation

Value: portrait | landscape Describes the width of the displayed page.

Type: discrete

Display Quality Media Features

`resolution`
Value: `resolution` \| `infinite`	Describes the resolution of the output device.
Type: range
`scan`
Value: `interlace` \| `progressive`	Describes the scanning process of the output device. This feature is always `false` for Prince.
Type: discrete
`grid`
Value: `boolean`	Describes whether the output device is grid (1) or bitmap (0). Prince is bitmap based, and thus `0` matches.
Type: discrete
`update`
Value: `none` \| `slow` \| fast	Describes the ability of the output device to modify the appearance of the content once it has been rendered. In Prince the layout cannot be updated, and thus only `none` matches.
Type: discrete
`overflow-block`
Value: `none` \| `scroll` \| `optional-paged` \| `paged`	Describes the behavior of the device when content overflows the initial containing block in the block axis..
Type: discrete
`overflow-inline`
Value: `none` \| `scroll`	Describes the behavior of the device when content overflows the initial containing block in the inline axis..
Type: discrete

resolution

Value: resolution | infinite Describes the resolution of the output device.

Type: range

scan

Value: interlace | progressive Describes the scanning process of the output device. This feature is always false for Prince.

Type: discrete

grid

Value: boolean Describes whether the output device is grid (1) or bitmap (0). Prince is bitmap based, and thus 0 matches.

Type: discrete

update

Value: none | slow | fast Describes the ability of the output device to modify the appearance of the content once it has been rendered. In Prince the layout cannot be updated, and thus only none matches.

Type: discrete

overflow-block

Value: none | scroll | optional-paged | paged Describes the behavior of the device when content overflows the initial containing block in the block axis..

Type: discrete

overflow-inline

Value: none | scroll Describes the behavior of the device when content overflows the initial containing block in the inline axis..

Type: discrete

Color Media Features

`color`
Value: `integer`	Describes the number of bits per color component of the output device. Prince assumes `13` color bits.
Type: range
`color-index`
Value: `integer`	Describes the number of entries in the color lookup table of the output device.
Type: range
`monochrome`
Value: `integer`	Describes the number of bits per pixel in a monochrome framebuffer.
Type: range
`color-gamut`
Value: `srgb` \| `p3` \| `rec2020`	Describes the approximate range of colors that are supported by the output device.
Type: discrete

color

Value: integer Describes the number of bits per color component of the output device. Prince assumes 13 color bits.

Type: range

color-index

Value: integer Describes the number of entries in the color lookup table of the output device.

Type: range

monochrome

Value: integer Describes the number of bits per pixel in a monochrome framebuffer.

Type: range

color-gamut

Value: srgb | p3 | rec2020 Describes the approximate range of colors that are supported by the output device.

Type: discrete

Interaction Media Features

`pointer`, `any-pointer`
Value: `none` \| `coarse` \| `fine`	Describes the presence and accuracy of pointing devices. Prince assumes `none`.
Type: discrete
`hover`, `any-hover`
Value: `none` \| `hover`	Describes the user's ability to hover over elements on the page. Prince assumes `none`.
Type: discrete

pointer, any-pointer

Value: none | coarse | fine Describes the presence and accuracy of pointing devices. Prince assumes none.

Type: discrete

hover, any-hover

Value: none | hover Describes the user's ability to hover over elements on the page. Prince assumes none.

Type: discrete

Scripting Media Features

`scripting`
Value: `none` \| `initial-only` \| `enabled`	Describes whether scripting languages, such as JavaScript, are supported. Prince assumes `none` or `initial-only`, depending on its configuration.
Type: discrete

scripting

Value: none | initial-only | enabled Describes whether scripting languages, such as JavaScript, are supported. Prince assumes none or initial-only, depending on its configuration.

Type: discrete

CSS Functional Expressions

In this section you find the documentation for the supported CSS functional expressions. For additional details, make sure to also check the linked properties that use the functions.

* functions marked with an asterisk are Prince extensions.

Function Definition Used in property

attr( attribute-name type-or-unit? [, fallback]? ) Retrieves the value of an attribute of the selected element.

url( url ) Represents a URL, i.e. a pointer to a source.

var( custom-property-name [, fallback]? ) Retrieves the value of a custom property set elsewhere. Custom properties (CSS variables)

rgb(R,G,B) Defines red, green and blue values of a color. all color values

rgba(R,G,B,A) Defines red, green and blue values and the alpha component of a color.

cmyk(C,M,Y,K[,A]) | device-cmyk(C,M,Y,K[,A]) Defines cyan, magenta, yellow and black values of a color, as well as the optional alpha component.

hsl(H,S,L) Defines hue, saturation and lightness values of a color.

hsla(H,S,L,A) Defines hue, saturation and lightness values and the alpha component of a color.

Function	Definition	Used in property
`attr( attribute-name type-or-unit? [, fallback]? )`	Retrieves the value of an attribute of the selected element.
`url( url )`	Represents a URL, i.e. a pointer to a source.
`var( custom-property-name [, fallback]? )`	Retrieves the value of a custom property set elsewhere.	Custom properties (CSS variables)
`rgb(R,G,B)`	Defines red, green and blue values of a color.	all `color` values
`rgba(R,G,B,A)`	Defines red, green and blue values and the alpha component of a color.
`cmyk(C,M,Y,K[,A])` \| `device-cmyk(C,M,Y,K[,A])`	Defines cyan, magenta, yellow and black values of a color, as well as the optional alpha component.
`hsl(H,S,L)`	Defines hue, saturation and lightness values of a color.
`hsla(H,S,L,A)`	Defines hue, saturation and lightness values and the alpha component of a color.
`prince-color( colorname [, number \| percentage]? , overprint? )*`	Using a spot color defined in the `@prince-color` at-rule. The number or percentage defines the tint. An optional `overprint` keyword instructs Prince whether to overprint the color. `color: prince-color(MyColor, 50%, overprint)`
`prince-overprint( colorname \| rgb() \| cmyk() \| device-cmyk() \| hsl() \| prince-color() [, [overprint-mode-nonzero \| overprint-mode-zero]]? )*`	Specifies a non-transparent color value to overprint. If no overprint mode is given, it defaults to `overprint-mode-nonzero`.
`linear-gradient([ [ <angle> \| to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)`	Creates an image consisting of a progressive transition between two or more colors along a straight line.	`background-image`
`radial-gradient([ [ <shape> \|\| <size> ] [ at <position> ]?, \| at <position>, ]? <color-stop> [, <color-stop> ]+)`	Creates an image consisting of a progressive transition between two or more colors that radiate from an origin point
`repeating-linear-gradient([ [ <angle> \| to <side-or-corner> ] ,]? <color-stop> [, <color-stop>]+)`	Creates an image consisting of repeating linear gradients.
`repeating-radial-gradient([ [ <shape> \|\| <size> ] [ at <position> ]?, \| at <position>, ]? <color-stop> [, <color-stop> ]+)`	Creates an image consisting of repeating radial gradients.
`rect( offset, offset, offset, offset )`	Defines a region in the form of a rectangle.	`clip`
`content()`	Retrieves the text content of the selected element. It can be used with several different properties.	`content` - see also Generated Content Functions
`element( name, page-policy? )`	Places an element (which has been removed from the normal flow with the `running()` function) in a page region. See Taking elements from the document.
`counter( name, counter-style?, page-policy? )`	Generates a value for the innermost counter.
`counters( name, "separator", counter-style?, page-policy? )`	Concatenates counters on different levels.
`target-counter( url, counter, counter-style? )`	Retrieves the value of the innermost counter with a given name at the given URL. See Using target-counter().
`target-counters( url, counter, "separator", counter-style? )`	Retrieves the value of all counters of a given name from the end of the given URL.
`target-content( url )`	References the text content of the linked element. See Using target-content().
`leader( ("..." \| dotted \| solid \| space), length? )`	Inserts the given string before the element - useful in tables of content. The optional second argument can be used to specify a minimum width.
`string( ident, page-policy? )`	Retrieves the value defined with the `string-set` property. See Copying content from the document.
`repeat( string+ )`	Used in counters as a `counter-style`, it defines a sequentially repeated pattern for numbering the items. `h4::before { counter(h4, repeat("x", "y", "z")) }` This counter will yield the sequence "x, y, z, xx, yy, zz" etc.
`symbols( string+ )`	Used in counters as a `counter-style`, it defines the symbols used for numbering the items. `h4::before { counter(h4, symbols("x", "y", "z")) }` This counter will yield the sequence "x, y, z, 4, 5, 6" etc.
`prince-base-url()*`	Returns the base URL of the current document.
`flow( name, page-policy? ) \| prince-flow( name, page-policy? )*`	Inserts an element that has previously been removed with the `static()` function. See Taking elements from the document.
`prince-script( ident [, content+]? )*`	Calls arbitrary JavaScript functions in CSS generated content.
`prince-fallback( uri )*[, content+]?`	Inserts content fetched from another resource (like the `url()` function), but also has the possibility of specifying a fallback content, in case the loading of the URL should fail. If no comma and content items are provided, the fallback is as if `content: normal` were specified. `img { content: prince-fallback(attr(src, url)), attr(data-altsrc, url) }`
`prince-glyph-index( int )*`	Allows to choose a glyph from a font by the index of that glyph in the font. Please 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). Usually, authors should prefer to use named OpenType features, using the `prince-opentype()` value of the `font-variant` property, which is more likely to work when changing font.
`grayscale( number \| percent )`	Converts the input image to grayscale.	`filter`
`sepia( number \| percent )`	Converts the input image to sepia.
`saturate( number \| percent )`	Saturates the input image.
`hue-rotate( angle )`	Applies a hue rotation on the input image.
`invert( number \| percent )`	Inverts the samples in the input image.
`opacity( number \| percent )`	Applies transparency to the input image.
`brightness( number \| percent )`	Applies a linear multiplier to the input image, making it appear more or less bright.
`contrast( number \| percent )`	Adjusts the contrast of the input image.
`blur( length )`	Applies a Gaussian blur to the input image.
`drop-shadow( length{1..3}, color? )`	Applies a drop shadow effect to the input image.
`prince-opentype( [ feature ]+ )*`	Specifies a comma-separated list of OpenType features to be enabled. For details please see the `font-variant` property and OpenType Features in Prince.	`font-variant`
`running( name )`	Removes an element from the normal document flow, to make it available for use in a page region with the `element()` function. See Taking elements from the document.	`position`
`recompress-jpeg( quality% )*`	Recompresses JPEG images by the indicated percentage to save space.	`prince-image-magic`
`convert-to-jpeg( quality% )*`	Converts non-JPEG images to JPEG.
`static( name, [ start \| current ]? )*`	Removes an element from the normal document flow, to make it available for use with the `flow()` function. See Taking elements from the document.	`prince-flow`
`command( ident )*`	Specifies any arbitrary command to be passed to the PDF viewer when the PDF file is opened. The user can supply values that Prince doesn't know about, but the viewer does.	`prince-pdf-open-action`
`format()`	Contains a comma-separated list of format strings that denote well-known font formats. `@font-face { font-family: bodytext; src: url(sans-serif-font.ttf) format("opentype"); }`	`src`
`local()`	Searches for locally installed system fonts.
`prince-lookup()*`	Searches for locally installed system fonts, but will also find fonts defined by other `@font-face` rules. See Defining a font family.
`rotate( angle )`	Rotates an element around a fixed point on the 2D plane.	`transform`
`matrix( number[, number]{5,5} )`	Describes a homogeneous 2D transformation matrix.
`translate( offset[, offset]? )`	Translates an element on the 2D plane.
`translatex( offset )`	Translates an element horizontally.
`translatey( offset )`	Translates an element vertically.
`translate3d( offset, offset, offset )`	Translates an element in 3D space.
`scale( number[, number]? )`	Scales an element up or down on the 2D plane.
`scalex( number )`	Scales an element up or down horizontally.
`scaley( number )`	Scales an element up or down vertically.
`skew( angle[, angle]? )`	Skews an element on the 2D plane.
`skewx( angle )`	Skews an element in the horizontal direction.
`skewy( angle )`	Skews an element in the vertical direction.
`supports([ <supports-condition> \| <declaration> ])`	Interpreted as a `@supports` condition.	`@import`

prince-color( colorname [, number | percentage]? , overprint? )*

Using a spot color defined in the @prince-color at-rule. The number or percentage defines the tint. An optional overprint keyword instructs Prince whether to overprint the color.

color: prince-color(MyColor, 50%, overprint)

linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) Creates an image consisting of a progressive transition between two or more colors along a straight line. background-image

radial-gradient([ [ <shape> || <size> ] [ at <position> ]?, | at <position>, ]? <color-stop> [, <color-stop> ]+) Creates an image consisting of a progressive transition between two or more colors that radiate from an origin point

repeating-linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop> [, <color-stop>]+) Creates an image consisting of repeating linear gradients.

repeating-radial-gradient([ [ <shape> || <size> ] [ at <position> ]?, | at <position>, ]? <color-stop> [, <color-stop> ]+) Creates an image consisting of repeating radial gradients.

rect( offset, offset, offset, offset ) Defines a region in the form of a rectangle. clip

content() Retrieves the text content of the selected element. It can be used with several different properties. content - see also Generated Content Functions

element( name, page-policy? ) Places an element (which has been removed from the normal flow with the running() function) in a page region. See Taking elements from the document.

counter( name, counter-style?, page-policy? ) Generates a value for the innermost counter.

counters( name, "separator", counter-style?, page-policy? ) Concatenates counters on different levels.

target-counter( url, counter, counter-style? ) Retrieves the value of the innermost counter with a given name at the given URL. See Using target-counter().

target-counters( url, counter, "separator", counter-style? ) Retrieves the value of all counters of a given name from the end of the given URL.

target-content( url ) References the text content of the linked element. See Using target-content().

leader( ("..." | dotted | solid | space), length? ) Inserts the given string before the element - useful in tables of content. The optional second argument can be used to specify a minimum width.

string( ident, page-policy? ) Retrieves the value defined with the string-set property. See Copying content from the document.

repeat( string+ )

Used in counters as a counter-style, it defines a sequentially repeated pattern for numbering the items.

h4::before { counter(h4, repeat("x", "y", "z")) }

This counter will yield the sequence "x, y, z, xx, yy, zz" etc.

symbols( string+ )

Used in counters as a counter-style, it defines the symbols used for numbering the items.

h4::before { counter(h4, symbols("x", "y", "z")) }

This counter will yield the sequence "x, y, z, 4, 5, 6" etc.

prince-base-url()* Returns the base URL of the current document.

flow( name, page-policy? ) | prince-flow( name, page-policy? )* Inserts an element that has previously been removed with the static() function. See Taking elements from the document.

prince-script( ident [, content+]? )* Calls arbitrary JavaScript functions in CSS generated content.

prince-fallback( uri )*[, content+]?

Inserts content fetched from another resource (like the url() function), but also has the possibility of specifying a fallback content, in case the loading of the URL should fail. If no comma and content items are provided, the fallback is as if content: normal were specified.

img { content: prince-fallback(attr(src, url)), attr(data-altsrc, url) }

prince-glyph-index( int )*

Allows to choose a glyph from a font by the index of that glyph in the font.

Please 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).

Usually, authors should prefer to use named OpenType features, using the prince-opentype() value of the font-variant property, which is more likely to work when changing font.

grayscale( number | percent ) Converts the input image to grayscale. filter

sepia( number | percent ) Converts the input image to sepia.

saturate( number | percent ) Saturates the input image.

hue-rotate( angle ) Applies a hue rotation on the input image.

invert( number | percent ) Inverts the samples in the input image.

opacity( number | percent ) Applies transparency to the input image.

brightness( number | percent ) Applies a linear multiplier to the input image, making it appear more or less bright.

contrast( number | percent ) Adjusts the contrast of the input image.

blur( length ) Applies a Gaussian blur to the input image.

drop-shadow( length{1..3}, color? ) Applies a drop shadow effect to the input image.

prince-opentype( [ feature ]+ )* Specifies a comma-separated list of OpenType features to be enabled. For details please see the font-variant property and OpenType Features in Prince. font-variant

running( name ) Removes an element from the normal document flow, to make it available for use in a page region with the element() function. See Taking elements from the document. position

recompress-jpeg( quality% )* Recompresses JPEG images by the indicated percentage to save space. prince-image-magic

convert-to-jpeg( quality% )* Converts non-JPEG images to JPEG.

static( name, [ start | current ]? )* Removes an element from the normal document flow, to make it available for use with the flow() function. See Taking elements from the document. prince-flow

command( ident )* Specifies any arbitrary command to be passed to the PDF viewer when the PDF file is opened. The user can supply values that Prince doesn't know about, but the viewer does. prince-pdf-open-action

format()

Contains a comma-separated list of format strings that denote well-known font formats.

@font-face {
  font-family: bodytext;
  src: url(sans-serif-font.ttf) format("opentype");
}

src

local() Searches for locally installed system fonts.

prince-lookup()* Searches for locally installed system fonts, but will also find fonts defined by other @font-face rules. See Defining a font family.

rotate( angle ) Rotates an element around a fixed point on the 2D plane. transform

matrix( number[, number]{5,5} ) Describes a homogeneous 2D transformation matrix.

translate( offset[, offset]? ) Translates an element on the 2D plane.

translatex( offset ) Translates an element horizontally.

translatey( offset ) Translates an element vertically.

translate3d( offset, offset, offset ) Translates an element in 3D space.

scale( number[, number]? ) Scales an element up or down on the 2D plane.

scalex( number ) Scales an element up or down horizontally.

scaley( number ) Scales an element up or down vertically.

skew( angle[, angle]? ) Skews an element on the 2D plane.

skewx( angle ) Skews an element in the horizontal direction.

skewy( angle ) Skews an element in the vertical direction.

supports([ <supports-condition> | <declaration> ]) Interpreted as a @supports condition. @import

CSS At-rules

In this section you find the documentation for the supported CSS at-rules.

Prince accepts @-prince as a vendor prefix for Prince-specific at-rules to comply with validators - eg. @-prince-pdf and @-prince-color.

Initial At-Rules

The following at-rules have to appear at the beginning of the CSS document, and exactly in this order:

@charset Defines the fallback encoding to use for the stylesheet. Prince supports stylesheets in UTF-8, UTF-16, Latin1 and Windows-1252.

@import [ <url(URL)> | <string> ] supports([ <supports-condition> | <declaration> ])? <media-query-list>? Allows authors to import style rules from other style sheets. The url(URL) or <string> give the URL of the style sheet to be imported, while the optional supports(...) expression and <media-query-list> state the import conditions.

@namespace [Prefix]? [ <url(URL)> | <string> ] Defines a namespace prefix or default namespace to be used in the stylesheet.

Nested At-Rules

After the initial at-rules, the following at-rules can appear also in nested form in the CSS document:

`@page [Name] Selectors { Page-declarations }`
Modifies margins, orphans, widows and page breaks of a document when printing it. The pages are identified either by a name, or by a page pseudo-class and page declarations can either be style declarations or page region at-rules. The initial values for `@page` styles are documented in the Paged Media chapter.
`:left`	Page pseudo-classes
`:right`
`:recto`
`:verso`
`:first`
`:blank`
`:nth(N)`
`@left` \| `@left-top` \| `@left-middle` \| `@left-bottom`	Page region at-rules
`@right` \| `@right-top` \| `@right-middle` \| `@right-bottom`
`@top` \| `@top-left-corner` \| `@top-left` \| `@top-center` \| `@top-right` \| `@top-right-corner`
`@bottom` \| `@bottom-left-corner` \| `@bottom-left` \| `@bottom-center` \| `@bottom-right` \| `@bottom-right-corner`
`@page-float-top` \| `@page-float-bottom` \| `@prince-overlay`
`@footnote`
The `@page` rule takes the following CSS properties: `background-attachment` \| `bleed` \| `marks` \| `prince-mark-length` \| `prince-mark-offset` \| `prince-mark-width` \| `prince-pdf-page-colorspace` \| `prince-pdf-page-label` \| `prince-rotate-body` \| `prince-shrink-to-fit` \| `prince-trim` \| `size`
Additionally, Prince for Books takes the following CSS property: `prince-page-fill`

@page [Name] Selectors { Page-declarations }

Modifies margins, orphans, widows and page breaks of a document when printing it. The pages are identified either by a name, or by a page pseudo-class and page declarations can either be style declarations or page region at-rules. The initial values for @page styles are documented in the Paged Media chapter.

:left Page pseudo-classes

:right

:recto

:verso

:first

:blank

:nth(N)

@left | @left-top | @left-middle | @left-bottom Page region at-rules

@right | @right-top | @right-middle | @right-bottom

@page-float-top | @page-float-bottom | @prince-overlay

@footnote

Additionally, Prince for Books takes the following CSS property: prince-page-fill

`@media Media-query-list { Rules }`
The rules will apply if the device meets the criteria of the condition defined in the media query. See CSS Media Queries for details.

@media Media-query-list { Rules }

The rules will apply if the device meets the criteria of the condition defined in the media query. See CSS Media Queries for details.

`@supports Condition { Rules }`
Checks whether particular `property:value` combinations are supported. Unlike media queries, this uses the classical two-valued logic.

@supports Condition { Rules }

Checks whether particular property:value combinations are supported. Unlike media queries, this uses the classical two-valued logic.

`@font-face { Font-declarations }`
Links a font family to an actual font.
The `@font-face` rule takes the following CSS descriptors:
`font-family: <family-name>`	This descriptor defines the font family name that will be used in all CSS font family name matching. It is required for the `@font-face` rule to be valid.
`src: [ url(<URL>) format(<string>#)? \| local(<family-name>) \| prince-lookup(<family-name>) ]#`	This descriptor specifies the resource containing font data. It is required for the `@font-face` rule to be valid. The `local()` function searches for locally installed system fonts, but `prince-lookup()` will also find fonts defined by other `@font-face` rules.
`unicode-range: <urange>#`	This descriptor defines the set of Unicode codepoints that may be supported by the font face. The descriptor value is a comma-delimited list of Unicode range values.
Additionally, `@font-face` takes the CSS descriptors `font-variant`, `font-stretch`, `font-weight` and `font-style`, which take the same values as the CSS properties with the same name.

@font-face { Font-declarations }

Links a font family to an actual font.

The @font-face rule takes the following CSS descriptors:

font-family: <family-name> This descriptor defines the font family name that will be used in all CSS font family name matching. It is required for the @font-face rule to be valid.

src: [ url(<URL>) format(<string>#)? | local(<family-name>) | prince-lookup(<family-name>) ]# This descriptor specifies the resource containing font data. It is required for the @font-face rule to be valid. The local() function searches for locally installed system fonts, but prince-lookup() will also find fonts defined by other @font-face rules.

unicode-range: <urange># This descriptor defines the set of Unicode codepoints that may be supported by the font face. The descriptor value is a comma-delimited list of Unicode range values.

Additionally, @font-face takes the CSS descriptors font-variant, font-stretch, font-weight and font-style, which take the same values as the CSS properties with the same name.

`@prince-color Name { alternate-color: ... }`
Defines a new color name.
The `@prince-color` rule takes the mandatory `alternate-color` descriptor to specify an alternate color to use if the named spot color is not available. The named color is used in a stylesheet with the `prince-color()` function. (See Spot colors).

@prince-color Name { alternate-color: ... }

Defines a new color name.

The @prince-color rule takes the mandatory alternate-color descriptor to specify an alternate color to use if the named spot color is not available. The named color is used in a stylesheet with the prince-color() function. (See Spot colors).

`@prince-pdf Name { Declarations }`
Defines properties relating to PDFs.
The `@prince-pdf` rule takes the following CSS properties: `prince-fallback-cmyk-profile` \| `prince-filter-resolution` \| `prince-pdf-color-conversion` \| `prince-pdf-color-options` \| `prince-pdf-display-doc-title` \| `prince-pdf-duplex` \| `prince-pdf-event-scripts` \| `prince-pdf-link-type` \| `prince-pdf-open-action` \| `prince-pdf-output-intent` \| `prince-pdf-page-layout` \| `prince-pdf-page-mode` \| `prince-pdf-paper-tray` \| `prince-pdf-print-scaling` \| `prince-pdf-profile` \| `prince-pdf-script` \| `prince-pdf-xmp`

@prince-pdf Name { Declarations }

Defines properties relating to PDFs.