CSS References
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 largely supports this module. Please note that 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, hsl() and hsla() are supported as
of Prince 12.1 . |
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, Prince supports font-stretch ,
font-kerning , font-variant-caps and font-variant-ligatures .
Prince also provides a different interface to the functionality of the
font-feature-settings property through the
font-variant: prince-opentype()
function. |
CSS Lists and Counters Module Level 3 | Prince does not support the marker-side and counter-set 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 (see Footnotes). |
CSS Page Floats - Editor's Draft | Prince recognizes the properties float , float-reference and float-defer , but takes a different syntax. |
CSS Images Module Level 3 | Prince supports the mandatory values of image-orientation , as
well as the properties object-fit and object-position . |
CSS Multi-column Layout Module Level 1 | 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 Images Module Level 4 | Prince recognizes image-resolution , 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 |
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 |
Viewport Length Units
The viewport length units are relative to the @page
area: the unit vw
is equal to 1% of the width of the page area, i.e. the page size minus the margin area (and minus border and padding), while the unit vh
is equal to 1% of its height.
The values pvw
and pvh
are equal to respectively 1% of the width and height of the entire page, as defined by the page size.
Please note that these values cannot be used with elements for which a viewport, such as the root element, has not been established.
Viewport length Units | |
---|---|
vw |
content area width |
vh |
content area height |
vmin |
the smaller length of vw or vh |
vmax |
the larger length of vw or vh |
pvw |
page width |
pvh |
page height |
pvmin |
the smaller length of pvw or pvh |
pvmax |
the larger length of pvw or pvh |
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 |
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+B th 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 . |
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. |
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 . |
Linguistic Pseudo-classes
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. |
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. |
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. |
Combinators
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. |
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. |
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. |
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. |
Page Selectors
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. |
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 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- . |
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 |
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 |
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 |
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 |
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 |
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. | |
calc( expression ) |
Calculates the expression's result, to be used as the value. | |
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.
|
|
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. |
|
prince-expansion-text( expansion, abbreviation ) |
Resolves abbreviations in the targeted element or psedudo-element. | |
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.
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.
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.
|
|
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
|
|
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.
|
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
|
@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. |
@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-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 |