CSS Properties
Below are all of the CSS properties supported by Prince. For their precise definitions please refer to the CSS specifications.
The properties marked with an asterisk (*) and a darker background color shade are
Prince extensions, while the extension values of a standard property are
highlighted with a light grey background.
Besides the standard -prince-
prefix, Prince also accepts
prince-
as a vendor prefix for Prince-specific
CSS properties.
The properties with a line-through are deprecated properties, support might be removed in a future Prince version.
For the values, the grammar draws on the CSS Values and Units Module Level 3 specification. A short explanation of the signs:
- A bar (|) separates two or more alternatives: exactly one of them must occur.
- A double bar (||) separates two or more options: one or more of them must occur, in any order.
- A double ampersand (&&) separates two or more components, all of which must occur, in any order.
- Square brackets ([ ]) are only used for grouping.
- An asterisk (*) indicates that the preceding item occurs zero or more times.
- A plus (+) indicates that the preceding item occurs one or more times.
- A question mark (?) indicates that the preceding item is optional (occurs zero or one times).
- A hash mark (#) indicates that the preceding item occurs one or more times, separated by comma tokens.
- A comma-separated pair of numbers in curly braces ({A,B}) indicates that the preceding item occurs at least A and at most B times.
Prince also supports the two special keywords initial
and inherit
on all properties.
Toggle (open/close) all properties
--custom-property-name
--custom-property-name: <declaration-value>?
Initial value |
the guaranteed-invalid value
|
---|---|
Applies to | all elements |
Inherited | yes |
This property family, called custom properties, and used to define
the substitution value of var()
functions, is defined as
any valid identifier that starts with two dashes. Custom properties
are solely for use by authors and users; CSS will never give them a
meaning beyond what is presented in the specification.
Please check the specification for details on the custom properties.
Unlike other CSS properties, custom property names are case-sensitive.
align-content
align-content: flex-start | flex-end | center | space-between | space-around | stretch
Initial value |
stretch
|
---|---|
Applies to | multi-line flex containers |
Inherited | no |
align-items
align-items: flex-start | flex-end | center | baseline | stretch
Initial value |
stretch
|
---|---|
Applies to | flex containers |
Inherited | no |
align-self
align-self: auto | flex-start | flex-end | center | baseline | stretch
Initial value |
auto
|
---|---|
Applies to | flex items |
Inherited | no |
alternate-color*
alternate-color: <color>
Initial value |
""
|
---|---|
Applies to | @prince-color at-rule |
Inherited | n/a |
@prince-color TestColor { alternate-color: cmyk(1, 0, 0, 0) }
color: prince-color(TestColor)
This descriptor takes an RGB or CMYK color in any of the valid notations for RGB and CMYK colors, that will be used to display the color being defined, when the named color is not available. Please note that it cannot be RGBA or CMYKA.
A color value must be specified for the rule to be valid.
background
background:
[ <'background-image'>
|| <'background-position'> [ / <'background-size'> ]?
|| <'background-repeat'>
|| <'background-attachment'>
|| <'background-origin'> <'background-clip'>?
|| <'background-color'> ]#
Initial value |
transparent
|
---|---|
Applies to | all elements |
Inherited | no |
The background
property is a shorthand for
setting the following CSS properties:
-
background-image
-
background-position
-
background-size
-
background-repeat
-
background-attachment
-
background-origin
-
background-clip
-
background-color
However, a few issues need to be noted:
Each comma-separated iteration of a background declaration defines one
background layer - but background-color
is only allowed
in the last layer.
Several properties allow for comma-separated value lists - however, when
used in the background
shorthand property, only one
value for each layer is allowed.
Also, Prince requires background-origin
and
background-clip
to be adjacent.
background-attachment
background-attachment: [ scroll | fixed bleed? ]#
Initial value |
scroll
|
---|---|
Applies to | all elements |
Inherited | no |
@page {
background-attachment: fixed bleed;
background-size: cover;
}
The background-attachment
property determines the origin
of the coordinate system for background images. The default value of
scroll
will position background images based on an origin
at the top-left corner of the padding area of the current element,
while a value of fixed
places the origin at the top-left
corner of the page box.
The optional bleed
modifier allows a background image to
cover the entire page bleed area when used together with
background-size: cover
.
The background-attachment
property only changes
the origin of the coordinate system used to position the image; the
background image will still only be shown within the padding area of
the current element.
This property can also be set by the background
shorthand.
background-color
background-color: <color>
Initial value |
transparent
|
---|---|
Applies to | all elements |
Inherited | no |
background-clip
background-clip: [ content-box | padding-box | border-box ]#
Initial value |
border-box
|
---|---|
Applies to | all elements |
Inherited | no |
background-image
background-image: [ none | url( <filename> ) | linear-gradient( ... ) | radial-gradient( ... ) | repeating-linear-gradient( ... ) | repeating-radial-gradient( ... ) ]#
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
background-image-resolution*
background-image-resolution: <dpi> | normal | auto [ , normal | <dpi> ]?
Initial value |
normal
|
---|---|
Applies to | background image elements |
Inherited | yes |
This property determines the resolution of a background image. The value normal
means 96dpi, or else the current CSS DPI setting. A custom DPI value can also
be specified. The value auto
means to check the original resolution
of the image. One can specify a second value, as for example auto, normal
or auto, 300dpi
in order to check the original resolution of the
image first, and to fall back on the second value if the image doesn't contain
resolution information.
The property -prince-background-image-resolution
can be used as an alias.
background-origin
background-origin: [ content-box | padding-box | border-box ]#
Initial value |
padding-box
|
---|---|
Applies to | all elements |
Inherited | no |
background-position
background-position:
[ left | center | right | top | bottom | <length-percentage>
| [ left | center | right | <length-percentage> ]
[ top | center | bottom | <length-percentage> ]
| [ [ center | [ left | right ] <length-percentage>? ]
&& [ center | [ left | right ] <length-percentage>? ] ] ]#
Initial value |
top left
|
---|---|
Applies to | all elements |
Inherited | no |
The background-position
property determines the position
of the background image relative to the top-left corner of the
padding area of the element in which it appears.
The background-attachment
property can be used to change the origin relative to which the
background image is positioned.
This property can also be set by the background
shorthand.
background-repeat
background-repeat: [ repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} ]#
Initial value |
repeat
|
---|---|
Applies to | all elements |
Inherited | no |
The background-repeat
property determines whether the
background image is repeated to cover the padding area of the current
element with a rectangular tiling, or only repeated horizontally or
vertically, or only drawn once and not repeated at all.
This property can also be set by the background
shorthand.
background-size
background-size: [ contain | cover | [ auto | <length-percentage> ]{1,2} ]#
Initial value |
auto auto
|
---|---|
Applies to | all elements |
Inherited | no |
baseline-shift
baseline-shift: baseline | sub | super | <percent> | <length>
Initial value |
baseline
|
---|---|
Applies to | inline elements |
Inherited | no |
The baseline-shift
property only applies to SVG text elements.
bleed
bleed: auto | <length>{1,4}
Initial value |
auto
|
---|---|
Applies to | @page at-rule |
Inherited | n/a |
@page { bleed: 10mm }
This CSS at-rule descriptor can be used to specify the size of the bleed area of the page when crop marks are enabled.
bookmark-label*
bookmark-label: none | <content>
Initial value |
content()
|
---|---|
Applies to | all elements |
Inherited | no |
This property is used to determine the text content of the PDF bookmark generated by the current element.
Several ways of creating content are here defined by means of functions - the detailed explanation can be found in the Generated Content Functions section.
Even though the initial value for this property is
content()
, no PDF bookmark will be generated by default
as the initial value for the -prince-bookmark-level
property is none
.
See the documentation for PDF Bookmarks for more details.
The property -prince-bookmark-label
can be used as an alias.
bookmark-level*
bookmark-level: none | <integer>
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
This property is used to determine the numeric level in the bookmark hierarchy of the PDF bookmark generated by the current element. See the documentation for PDF Bookmarks for more details.
The property -prince-bookmark-level
can be used as an alias.
bookmark-state*
bookmark-state: open | closed
Initial value |
open
|
---|---|
Applies to | all elements |
Inherited | no |
This property is used to determine whether the bookmark tree item is open or closed when the PDF is first viewed. In this way you can close each chapter and hide the subsections for documents that are very long, or you can choose to have a deep bookmark tree.
The property -prince-bookmark-state
can be used as an alias.
bookmark-target*
bookmark-target: self | url( <target-url> ) | attr( <target-attr> )
Initial value |
self
|
---|---|
Applies to | all elements |
Inherited | no |
This property is used to determine the link target for the PDF bookmark generated by the current element. See the documentation for PDF Bookmarks for more details.
The property -prince-bookmark-target
can be used as an alias.
border
border: <color> || <border-style> || <border-width>
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
The border
property is a shorthand for
setting the following CSS properties:
border-bottom
border-bottom: <color> || <border-style> || <border-width>
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
The border-bottom
property is a shorthand for
setting the following CSS properties:
border-bottom-color
border-bottom-color: <color>
Initial value |
CurrentColor
|
---|---|
Applies to | all elements |
Inherited | no |
border-bottom-style
border-bottom-style: none | hidden | solid | dashed | dotted | double | groove | ridge | inset | outset
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
border-bottom-width
border-bottom-width: thin | medium | thick | <length>
Initial value |
medium
|
---|---|
Applies to | all elements |
Inherited | no |
Even though the initial value for this property is
medium
, no bottom border will be shown by default as
the initial value for border-bottom-style
is none
.
This property can also be set by the shorthands border
, border-bottom
, and border-width
.
border-clip
border-clip: normal | <length> | <percent>
Initial value |
normal
|
---|---|
Applies to | all elements |
Inherited | no |
border-collapse
border-collapse: separate | collapse
Initial value |
separate
|
---|---|
Applies to | all elements |
Inherited | yes |
This property determines whether tables use separate table and cell borders or collapse the table and cell borders together. See the Tables documentation for more details.
border-color
border-color: <color>{1,4}
Initial value |
CurrentColor
|
---|---|
Applies to | all elements |
Inherited | no |
The border-color
property is a shorthand for
setting the following CSS properties:
border-left
border-left: <color> || <border-style> || <border-width>
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
The border-left
property is a shorthand for
setting the following CSS properties:
border-left-color
border-left-color: <color>
Initial value |
CurrentColor
|
---|---|
Applies to | all elements |
Inherited | no |
border-left-style
border-left-style: none | hidden | solid | dashed | dotted | double | groove | ridge | inset | outset
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
border-left-width
border-left-width: thin | medium | thick | <length>
Initial value |
medium
|
---|---|
Applies to | all elements |
Inherited | no |
Even though the initial value for this property is
medium
, no left border will be shown by default as
the initial value for border-left-style
is none
.
This property can also be set by the shorthands border
, border-left
, and border-width
.
border-radius
border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?
Initial value |
0
|
---|---|
Applies to | all elements |
Inherited | no |
The border-radius
property is a shorthand for
setting the following CSS properties:
border-bottom-left-radius
border-bottom-left-radius: <length-percentage>{1,2}
Initial value |
0
|
---|---|
Applies to | all elements |
Inherited | no |
border-bottom-right-radius
border-bottom-right-radius: <length-percentage>{1,2}
Initial value |
0
|
---|---|
Applies to | all elements |
Inherited | no |
border-top-left-radius
border-top-left-radius: <length-percentage>{1,2}
Initial value |
0
|
---|---|
Applies to | all elements |
Inherited | no |
border-top-right-radius
border-top-right-radius: <length-percentage>{1,2}
Initial value |
0
|
---|---|
Applies to | all elements |
Inherited | no |
border-right
border-right: <color> || <border-style> || <border-width>
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
The border-right
property is a shorthand for
setting the following CSS properties:
border-right-color
border-right-color: <color>
Initial value |
CurrentColor
|
---|---|
Applies to | all elements |
Inherited | no |
border-right-style
border-right-style: none | hidden | solid | dashed | dotted | double | groove | ridge | inset | outset
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
border-right-width
border-right-width: thin | medium | thick | <length>
Initial value |
medium
|
---|---|
Applies to | all elements |
Inherited | no |
Even though the initial value for this property is
medium
, no right border will be shown by default as
the initial value for border-right-style
is none
.
This property can also be set by the shorthands border
, border-right
, and border-width
.
border-style
border-style: <border-style>{1,4}
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
The border-style
property is a shorthand for
setting the following CSS properties:
border-top
border-top: <color> || <border-style> || <border-width>
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
The border-top
property is a shorthand for
setting the following CSS properties:
border-top-color
border-top-color: <color>
Initial value |
CurrentColor
|
---|---|
Applies to | all elements |
Inherited | no |
border-top-style
border-top-style: none | hidden | solid | dashed | dotted | double | groove | ridge | inset | outset
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
border-top-width
border-top-width: thin | medium | thick | <length>
Initial value |
medium
|
---|---|
Applies to | all elements |
Inherited | no |
Even though the initial value for this property is
medium
, no top border will be shown by default as
the initial value for border-top-style
is none
.
This property can also be set by the shorthands border
, border-top
, and border-width
.
border-width
border-width: [ thin | medium | thick | <length> ]{1,4}
Initial value |
medium
|
---|---|
Applies to | all elements |
Inherited | no |
The border-width
property is a shorthand for
setting the following CSS properties:
box-decoration-break
box-decoration-break: slice | clone
Initial value |
clone
|
---|---|
Applies to | block elements and tables |
Inherited | no |
This property is only supported on block elements and tables. Also note that
Prince defaults to clone
.
box-shadow
box-shadow: none | [ inset? && <length>{2,4} && <color>? ]#
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
The value is either none
, or a comma-separated list of shadows to apply.
Within each comma-separated shadow, the first two lengths are the horizontal and vertical offsets. If a third length is given, it is the blur radius. If a fourth length is given, then it is the spread radius.
If no color is given for a shadow then it defaults to currentColor
.
box-sizing
box-sizing: content-box | padding-box | border-box
Initial value |
content-box
|
---|---|
Applies to | all elements |
Inherited | no |
break-after
break-after: auto | -prince-prefer? [ avoid | avoid-page | avoid-column ] | column | page | left | right | recto | verso
Initial value |
auto
|
---|---|
Applies to | block-level elements in the normal flow of the root element |
Inherited | no |
This property can be used to force or suppress page breaks after an element.
The values avoid-page
and avoid-column
each behave
as simply avoid
: it is not possible to avoid page breaks without
also avoiding column breaks.
For avoid*
values not preceded by -prince-prefer
,
content before the avoided break will be pushed to the next column or page
if necessary to avoid breaking there.
The keyword -prince-prefer
is only accepted by
Prince for Books.
If an avoid*
value is preceded by -prince-prefer
,
then Prince for Books will try to avoid breaking there,
but not at the cost of introducing an obvious gap at the end of the
previous column or page:
it will only use whatever flexibility has been granted with
-prince-change-line-breaks-for-pagination
,
-prince-spread-length-options
or
-prince-resize-options
.
See the documentation for Page breaks for more details.
break-before
break-before: auto | -prince-prefer? [ avoid | avoid-page | avoid-column ] | page | left | right | recto | verso | column
Initial value |
auto
|
---|---|
Applies to | block-level elements in the normal flow of the root element |
Inherited | no |
This property can be used to force or suppress page breaks before an element.
The values avoid-page
and avoid-column
each behave
as simply avoid
: it is not possible to avoid page breaks without
also avoiding column breaks.
For avoid*
values not preceded by -prince-prefer
,
content before the avoided break will be pushed to the next column or page
if necessary to avoid breaking there.
The keyword -prince-prefer
is only accepted by
Prince for Books.
If an avoid*
value is preceded by -prince-prefer
,
then Prince for Books will try to avoid breaking there,
but not at the cost of introducing an obvious gap at the end of the
previous column or page:
it will only use whatever flexibility has been granted with
-prince-change-line-breaks-for-pagination
,
-prince-spread-length-options
or
-prince-resize-options
.
See the documentation for Page breaks for more details.
break-inside
break-inside: auto | -prince-prefer? [ avoid | avoid-page | avoid-column ]
Initial value |
auto
|
---|---|
Applies to | block-level elements in the normal flow of the root element |
Inherited | no |
This property can be used to suppress page breaks inside an element. See the documentation for Page breaks for more details.
caption-page*
caption-page: first | following | all
Initial value |
first
|
---|---|
Applies to | table elements |
Inherited | yes |
This property determines whether table captions will be displayed on the first page of a table, or only on following pages, or repeated on every page that a table appears on.
The property -prince-caption-page
can be used as an alias.
caption-side
caption-side: top | bottom
Initial value |
top
|
---|---|
Applies to | table-caption elements |
Inherited | yes |
This property determines whether table captions will be displayed at the top or bottom of the table.
clear
clear: none | left | right | inside | outside | both | page | column | end
Initial value |
none
|
---|---|
Applies to | block-level elements |
Inherited | no |
This property determines whether an element should be moved down the
page in order to clear elements that have been floated to the left or
right of the page. The left
, right
,
inside
and outside
values correspond to values given to the float
property, while both
will clear floats on either side.
The keyword end
clears the float, and places the next
float in the next available position — so if e.g. you have a column
layout with a float already at the top of the first column, it will
place the next float, whose natural position would be just below the
first one, at the bottom of the same column.
The keyword column
clears the end of the column (so any
further float would be pushed to the next column), while the keyword
page
clears the page (pushing further floats to the next
page).
The property -prince-clear
can be used as an alias.
clip-path
clip-path: none | url( <path> )
Initial value |
none
|
---|---|
Applies to | SVG elements |
Inherited | no |
The clip-path
property only applies to SVG elements.
clip-rule
clip-rule: nonzero | evenodd
Initial value |
nonzero
|
---|---|
Applies to | SVG elements |
Inherited | yes |
The clip-rule
property only applies to SVG elements.
color
color: <color>
Initial value |
black
|
---|---|
Applies to | all elements |
Inherited | yes |
See the Color section for supported color values.
color-interpolation
color-interpolation: auto | sRGB | linearRGB
Initial value |
sRGB
|
---|---|
Applies to | SVG mask element |
Inherited | yes |
Please note that this property is only applied on the SVG mask
element.
color-interpolation-filters
color-interpolation-filters: auto | sRGB | linearRGB
Initial value |
linearRGB
|
---|---|
Applies to | all SVG filter primitives |
Inherited | yes |
column-break-after
column-break-after: auto | always
Initial value |
auto
|
---|---|
Applies to | multicol elements |
Inherited | no |
This property is deprecated. Use break-after:column
instead. See the documentation for Columns for more details.
column-break-before
column-break-before: auto | always
Initial value |
auto
|
---|---|
Applies to | multicol elements |
Inherited | no |
This property is deprecated. Use break-before:column
instead. See the documentation for Columns for more details.
column-count
column-count: auto | <number>
Initial value |
auto
|
---|---|
Applies to | non-replaced block-level elements (except table elements), table cells, and inline-block elements |
Inherited | no |
column-fill
column-fill: auto | balance
Initial value |
balance
|
---|---|
Applies to | multicol elements |
Inherited | no |
column-gap
column-gap: <length> | <percent> | normal
Initial value |
normal
|
---|---|
Applies to | multicol elements |
Inherited | no |
column-rule
column-rule: <'column-rule-color'> || <'column-rule-style'> || <'column-rule-width'>
Initial value |
none
|
---|---|
Applies to | multicol elements |
Inherited | no |
The column-rule
property is a shorthand for
setting the following CSS properties:
column-rule-color
column-rule-color: <color>
Initial value |
CurrentColor
|
---|---|
Applies to | multicol elements |
Inherited | no |
column-rule-style
column-rule-style: none | solid | dashed | dotted | double | groove | ridge | inset | outset
Initial value |
none
|
---|---|
Applies to | multicol elements |
Inherited | no |
column-rule-width
column-rule-width: thin | medium | thick | <length>
Initial value |
medium
|
---|---|
Applies to | multicol elements |
Inherited | no |
Even though the initial value for this property is
medium
, no column rule will be shown by default as
the initial value for column-rule-style
is none
.
This property can also be set by the column-rule
shorthand.
column-span
column-span: none | <integer> | all
Initial value |
none
|
---|---|
Applies to | in-flow block-level elements |
Inherited | no |
A numeric column-span
value other than 1
will only affect column floats.
The numeric value 1
is treated as equivalent to
the keyword none
.
column-width
column-width: auto | <length>
Initial value |
auto
|
---|---|
Applies to | non-replaced block-level elements (except table elements), table cells, and inline-block elements |
Inherited | no |
columns
columns: <'column-count'> || <'column-width'>
Initial value |
auto
|
---|---|
Applies to | non-replaced block-level elements (except table elements), table cells, and inline-block elements |
Inherited | no |
The columns
property is a shorthand for
setting the following CSS properties:
content
content: normal | none | 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, <length>? ) | string( <ident>, <page-policy>? ) | content( ) | prince-base-url( ) | prince-script( <ident>, <text-content>* ) | prince-glyph-index( <integer> ) | prince-expansion-text( <expansion>, <text-content> ) | element( <name>, <page-policy>? ) ]+ | prince-fallback( <url> ) [ , <content>+ ]?
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 very wide-ranging and are treated in
more depth in the Generated Content section.
Several ways of creating content are here defined by means of functions - the detailed explanation can be found in the Generated Content Functions section.
counter-increment
counter-increment: none | [ <name> <number>? ]+
Initial value |
none
|
---|---|
Applies to | all elements, @page at-rule |
Inherited | no |
For information about the use of the counter-increment
property see the documentation for Counters and Numbering.
counter-reset
counter-reset: none | [ <name> <number>? ]+
Initial value |
none
|
---|---|
Applies to | all elements, @page at-rule |
Inherited | no |
For information about the use of the counter-reset
property see the documentation for Counters and Numbering.
direction
direction: ltr | rtl
Initial value |
ltr
|
---|---|
Applies to | all elements |
Inherited | yes |
display
display: inline | block | flex | inline-flex | none | list-item | run-in | table | table-header-group | table-footer-group | table-row-group | table-row | table-cell | table-caption | table-column | table-column-group | inline-block | inline-table
Initial value |
inline
|
---|---|
Applies to | all elements |
Inherited | no |
dominant-baseline
dominant-baseline: auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge
Initial value |
auto
|
---|---|
Applies to | SVG elements |
Inherited | no |
The dominant-baseline
property only applies to SVG text elements.
empty-cells
empty-cells: show | hide
Initial value |
show
|
---|---|
Applies to | table-cell elements |
Inherited | yes |
fill
fill: none | <color> | url( <paint-server> ) [ none | <color> ]?
Initial value |
black
|
---|---|
Applies to | SVG elements |
Inherited | yes |
The fill
property only applies to SVG elements.
fill-opacity
fill-opacity: <number>
Initial value |
1
|
---|---|
Applies to | SVG elements |
Inherited | yes |
The fill-opacity
property only applies to SVG elements.
fill-rule
fill-rule: nonzero | evenodd
Initial value |
nonzero
|
---|---|
Applies to | SVG elements |
Inherited | yes |
The fill-rule
property only applies to SVG elements.
filter
filter: none | [ url( <url> ) | blur( <length> ) | brightness( <number> | <percent> ) | contrast( <number> | <percent> ) | drop-shadow( <length>{2,3} <color>? ) | grayscale( <number> | <percent> ) | hue-rotate( <angle> ) | invert( <number> | <percent> ) | opacity( <number> | <percent> ) | saturate( <number> | <percent> ) | sepia( <number> | <percent> ) ]+
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
The filter
property provides graphical effects like blurring,
saturating or color shifting an element. For more details see the
Filters section.
flex
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Initial value |
1 0 auto
|
---|---|
Applies to | flex items |
Inherited | no |
The flex
property is a shorthand for
setting the following CSS properties:
flex-basis
flex-basis: auto | content | <length-percentage>
Initial value |
auto
|
---|---|
Applies to | flex containers |
Inherited | no |
flex-direction
flex-direction: row | row-reverse | column | column-reverse
Initial value |
row
|
---|---|
Applies to | flex containers |
Inherited | no |
flex-grow
flex-grow: <number>
Initial value |
0
|
---|---|
Applies to | flex items |
Inherited | no |
flex-shrink
flex-shrink: <number>
Initial value |
1
|
---|---|
Applies to | flex items |
Inherited | no |
flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse
Initial value |
nowrap
|
---|---|
Applies to | flex containers |
Inherited | no |
flex-flow
flex-flow: <'flex-direction'> || <'flex-wrap'>
Initial value |
row nowrap
|
---|---|
Applies to | flex containers |
Inherited | no |
The flex-flow
property is a shorthand for
setting the following CSS properties:
float*
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
The float
property is a shorthand for
setting the following CSS properties:
The float
property in Prince functions just as the standard property -
but under the hood, the implementation is rather different, to allow for the expanded
features of page and column floats.
In other words, the syntax of the standard property is a subset of the Prince extension
shorthands - if you use just the standard float features, there is nothing in your CSS
syntax that needs adjustment. The values of the standard float
property are
now listed in the -prince-float-placement
property.
Traditionally, floats move in the inline direction, left or right. Prince extends this behavior with page and column floats that move in the block direction, specifying that an element should be floated to the top or to the bottom, or to the nearest edge of the column.
Note that when setting only the value for prince-float-reference
, i.e.
column
or page
, the default value for -prince-float-placement
is top-bottom
and differs from its initial value. This means that Prince
will try to float the element to the top of the indicated float reference, and if that
should not be possible, it would be floated to the bottom.
On a vertical float to the top or bottom of the float reference, a vertical margin
set to the value auto
will expand and thereby repal other content. By
setting top and bottom margins to auto
, the element is vertically centered.
Please also see the property margin-alt
for
alternative margins for top or bottom floated elements.
The property -prince-float
can be used as an alias.
float-defer-column*
float-defer-column: none | inside | outside | last | <integer>
Initial value |
none
|
---|---|
Applies to | all floated elements |
Inherited | yes |
figure {
float: top;
float-defer-column: 1;
}
The float-defer-column
property defines the number of columns that the float should be deferred.
The property -prince-float-defer-column
can be used as an alias.
float-defer-page*
float-defer-page: none | [ <integer> || [ left | right ] ]
Initial value |
none
|
---|---|
Applies to | all floated elements |
Inherited | yes |
figure {
float: top;
float-defer-page: right;
}
The float-defer-page
property specifies whether the float is placed after previous page floats have been placed, or in another float reference container.
The property -prince-float-defer-page
can be used as an alias.
float-modifier*
float-modifier: normal | unless-fit
Initial value |
normal
|
---|---|
Applies to | all floated elements |
Inherited | yes |
figure {
float: top;
float-modifier: unless-fit;
}
The float-modifier
property expresses a conditional
with the use of the keyword unless-fit
: the element
is only floated if it would otherwise cause a page or column break.
The property -prince-float-modifier
can be used as an alias.
float-placement*
float-placement:
none | left | right | inside | outside
| top | bottom | top-bottom | snap
| align-top | align-bottom
| footnote | inline-footnote
Initial value |
none
|
---|---|
Applies to | all floated elements |
Inherited | yes |
figure {
float-reference: page;
float-placement: bottom;
}
The -prince-float-placement
property defines how a floated element
is positioned. Its values are basically the values of the standard
float
property, plus some Prince-specific extensions.
The values top
or bottom
float the element to, respectively,
the top or the bottom of the float reference (a page, or a column), while
top-bottom
tries to float it to the top, and if that should not be possible,
it is floated to the bottom.
The default value for -prince-float-placement
, when omitted in the
float
shorthand property, is
top-bottom
, and differs from its initial value. This means that Prince
will try to float the element to the top of the indicated float reference, and if that
should not be possible, it would be floated to the bottom.
The value snap
floats the element to the nearest "end", i.e.
to the top or bottom of the page or of the column.
The values inside
and outside
float the element respectively
to the inside or outside of a spread: inside
moves the element to
the right when used on a left-facing page, and to the left on a right-facing page;
outside
moves the element to the left when used on a left-facing
page, and to the right on a right-facing page.
The align-top
and align-bottom
values affect sidenotes -
the former one aligns the top of the sidenote with the top of the box where it
naturally happens, while the latter value aligns the bottom of the sidenote with
the top of the box where it naturally happens. If more than one sidenote naturally
appears on the same line, the sidenotes will be stacked in the content order.
The value footnote
transforms the element into a footnote - the footnote
marker is placed outside of the block of the footnote. The value inline-footnote
transforms the element into a footnote and places the footnote marker inside of
the block of the footnote.
The property -prince-float-placement
can be used as an alias.
float-policy*
float-policy: normal | in-order
Initial value |
normal
|
---|---|
Applies to | all floated elements |
Inherited | yes |
figure {
float: bottom;
float-policy: in-order;
}
The float-policy
property defines the policy adopted when
floating an element. The value in-order
imposes that page
floats must be shown in source order - normal
adds no extra
constraints to the float.
The property -prince-float-policy
can be used as an alias.
float-reference*
float-reference:
column | page
| sidenote | leftnote | rightnote | insidenote | outsidenote
| wide | wide-left | wide-right | wide-inside | wide-outside
Initial value |
column
|
---|---|
Applies to | all floated elements |
Inherited | yes |
figure {
float: top;
float-reference: page;
}
The float-reference
property defines the reference context for
the float, i.e. whether the element should be floated to the top or bottom of
the column, or of the page.
The sidenote
value activates the sidenote area. Sidenotes
aren't attached to a column or a page, but are in their own region. Within
that region they can be placed at the top
or bottom
,
or be aligned in some way (see the align-top
and
align-bottom
values for float-placement
.
The sidenote variants are required if sidenote regions are defined on both sides of the page - in this case we need to distinguish where to place them.
To allow an element to extend into the margin or sidenote area, the wide
,
wide-left
, wide-right
, wide-inside
and
wide-outside
values can be used. When a left, right, inside or
outside direction is expressed, the element will extend only in the given direction.
Please note that the initial value is column
: thus, the style rule
float: top
will create a column float in a multicol context,
rather than a page float.
The property -prince-float-reference
can be used as an alias.
float-tail*
float-tail: keep | fill-page
Initial value |
keep
|
---|---|
Applies to | all floated elements |
Inherited | yes |
figure {
float: top;
float-tail: fill-page;
}
The float-tail
property instructs Prince how to deal with page
floats that end up past the end of normal content: with the value
fill-page
, Prince will try to fill the last page, but discard
any page floats that would create more pages.
The property -prince-float-tail
can be used as an alias.
flood-color
flood-color: <color>
Initial value |
black
|
---|---|
Applies to | feFlood and feDropShadow SVG elements |
Inherited | no |
The flood-color
and flood-opacity
properties give the color & opacity for feFlood
and
feDropShadow
filter effects within SVG.
flood-opacity
flood-opacity: <number>
Initial value |
1
|
---|---|
Applies to | feFlood and feDropShadow SVG elements |
Inherited | no |
The flood-color
and flood-opacity
properties give the color & opacity for feFlood
and
feDropShadow
filter effects within SVG.
flow*
flow: normal | static( <name>, [ start | current ]? )
Initial value |
normal
|
---|---|
Applies to | all elements |
Inherited | no |
This property is used to remove elements from the normal flow of the
document, to be placed in a page region with content: flow()
,
in order to create running page headers and footers.
The optional start
argument (default is current
)
makes the fetched content available, as if it were fetched from the start
of the document.
See the documentation for Taking elements from the document for more details.
The property -prince-flow
can be used as an alias.
font
font: [ <'font-style'> || [ normal | small-caps ] || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'>
Initial value |
12pt serif
|
---|---|
Applies to | all elements |
Inherited | yes |
font: bold 14pt/16pt Georgia, "Times New Roman", serif
The font
property is a shorthand for
setting the following CSS properties:
font-family
font-family: [ serif | sans-serif | monospace | [ <name-word> ]+ | <name> ]# prince-no-fallback?
Initial value |
serif
|
---|---|
Applies to | all elements, @font-face at-rule |
Inherited | yes |
font-family: Georgia, "Times New Roman", serif
font-family: MyFont, prince-no-fallback
The special keyword prince-no-fallback
triggers a warning if
any glyphs are not found in the specified font, whereas normally Prince
would silently fallback to serif.
When used as a descriptor for the
@font-face
at-rule,
font-family
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.
This property can also be set by the font
shorthand.
font-kerning
font-kerning: auto | normal | none
Initial value |
auto
|
---|---|
Applies to | all elements |
Inherited | yes |
The value none
disables font kerning. font-variant: prince-no-kerning accomplishes the same.
This property can also be set by the font
shorthand.
font-size
font-size: <length-percentage> | smaller | larger | xx-small | x-small | small | medium | large | x-large | xx-large
Initial value |
12pt
|
---|---|
Applies to | all elements |
Inherited | yes |
font-stretch
font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | wider | narrower
Initial value |
normal
|
---|---|
Applies to | all elements, @font-face at-rule |
Inherited | yes |
The font-stretch
property is not supported for system
fonts on Windows.
This property can also be set by the font
shorthand.
font-style
font-style: normal | italic | oblique
Initial value |
normal
|
---|---|
Applies to | all elements, @font-face at-rule |
Inherited | yes |
font-variant
font-variant:
normal
| [ [ small-caps | all-small-caps ] || [ common-ligatures | no-common-ligatures ] || [ discretionary-ligatures | no-discretionary-ligatures ] || [ historical-ligatures | no-historical-ligatures ] || [ contextual | no-contextual ]
|| [ lining-nums | oldstyle-nums ] || [ proportional-nums | tabular-nums ] || [ diagonal-fractions | stacked-fractions ] || ordinal || slashed-zero
|| prince-no-kerning || prince-opentype( [ <feature> ]+ ) ]
Initial value |
normal
|
---|---|
Applies to | all elements, @font-face at-rule |
Inherited | yes |
<span style="font-family: SpecialFont; font-variant: prince-opentype(aalt(2))">&</span>
font-variant: prince-opentype(onum, ccmp, liga)
font-variant: historical-ligatures all-small-caps;
The font-variant
property is a shorthand for
setting the following CSS properties:
The prince-opentype()
function takes a comma-separated list of
OpenType features. Microsoft has a list of the OpenType feature names
here.
Some OpenType features like aalt
(access all alternates) can be
used to select one of many optional glyphs, e.g. a font might provide three different
ampersand glyphs and allow the author to choose which one. An optional integer
parameter is how you do this, however it requires intimate details of exactly
which font is being used and what glyphs it provides.
The OpenType feature
can be written either in function form (feature(N)
)
or in concatenated form (featureN
).
The keyword prince-no-kerning
disables the kern
OpenType feature, which defines font kerning. The property font-kerning
is the better way of achieving the same.
This property can also be set by the font
shorthand.
font-variant-caps
font-variant-caps: normal | small-caps | all-small-caps
Initial value |
normal
|
---|---|
Applies to | all elements |
Inherited | yes |
The value small-caps
enables the display of small capitals, i.e. the OpenType feature smcp
.
The value all-small-caps
enables the display of small capitals for both uppercase and lowercase letters, i.e. the OpenType features c2pc
and smcp
.
This property can also be set by the font-variant
shorthand (and hence also by font
).
font-variant-ligatures
font-variant-ligatures: normal | none | [ [ common-ligatures | no-common-ligatures ] || [ discretionary-ligatures | no-discretionary-ligatures ] || [ historical-ligatures | no-historical-ligatures ] || [ contextual | no-contextual ] ]
Initial value |
normal
|
---|---|
Applies to | all elements |
Inherited | yes |
This property allows for fine-tuning of various ligature types.
The value common-ligatures
enables display of common ligatures, i.e. the OpenType features liga
and clig
. Note that for OpenType fonts, common ligatures are enabled by default.
The value discreationary-ligatures
enables the display of discretionary ligatures, i.e. the OpenTypes feature dlig
.
The value historical-ligatures
enables the display of historical ligatures, i.e. the OpenType feature hlig
.
The value contextual
enables the context of contextual alternatives, i.e. the OpenType feature calt
.
The values starting with no-*
disable the display of the features.
This property can also be set by the font-variant
shorthand (and hence also by font
).
font-variant-numeric
font-variant-numeric: normal | [ [ lining-nums | oldstyle-nums ] || [ proportional-nums | tabular-nums ] || [ diagonal-fractions | stacked-fractions ] || ordinal || slashed-zero ]
Initial value |
normal
|
---|---|
Applies to | all elements |
Inherited | yes |
This property specifies control over numeric forms.
The value lining-nums
enables the display of lining numerals, i.e. the OpenTypes feature lnum
.
The value oldstyle-nums
enables the display of old-style numerals, i.e. the OpenTypes feature onum
.
The value proportional-nums
enables the display of proportional numerals, i.e. the OpenTypes feature pnum
.
The value tabular-nums
enables the display of tabular numerals, i.e. the OpenTypes feature tnum
.
The value diagonal-fractions
enables the display of lining diagonal fractions, i.e. the OpenTypes feature frac
.
The value stacked-fractions
enables the display of lining stacked fractions, i.e. the OpenTypes feature afrc
.
The value ordinal
enables the display of letter forms used with ordinal numbers (like e.g. "1st", i.e. the OpenTypes feature ordn
.
The value slashed-zero
enables the display of lining numerals, i.e. the OpenTypes feature zero
.
This property can also be set by the font-variant
shorthand (and hence also by font
).
font-weight
font-weight: normal | bold | bolder | lighter | <number>
Initial value |
normal
|
---|---|
Applies to | all elements, @font-face at-rule |
Inherited | yes |
footnote-display
footnote-display: block | inline | compact
Initial value |
block
|
---|---|
Applies to | footnote elements |
Inherited | no |
This property provides a convenient way of determining whether footnotes should be displayed as a block element or an inline element.
The value compact
leaves it up to Prince to determine whether
to display the footnote as a block or inline element: if two or more footnotes
fit on one line, they will be treated as inline elements to take up less space.
footnote-style-position*
footnote-style-position: outside | inside
Initial value |
outside
|
---|---|
Applies to | footnote elements |
Inherited | yes |
For information about the use of the footnote-style-position
property see the documentation for Footnotes.
height
height: auto | min-content | max-content | <length-percentage> | min-content | max-content
Initial value |
auto
|
---|---|
Applies to | all elements except non-replaced inline elements, table columns, and column groups |
Inherited | no |
The values min-content
and max-content
do not affect
auto table layout.
hyphens
hyphens: none | manual | auto | prince-expand-all
Initial value |
manual
|
---|---|
Applies to | all elements |
Inherited | yes |
This property defines if hyphenation is allowed to create more wrapping points in a line of text.
The value prince-expand-all
shows where the wrap
opportunities are, to facilitate assessing whether any change to the
hyphenation-related properties or hyphenation patterns is needed, or
whether a manual hyphenation using soft hyphens is needed (perhaps
supplied with -prince-text-replace
).
hyphenate-patterns*
hyphenate-patterns: none | url( <patterns-url> )
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | yes |
This property is used to point to a hyphenation dictionary. Normally this is selected automatically, based on the current language.
The url()
argument can take local paths or remote HTTP URLs as argument.
The property -prince-hyphenate-patterns
can be used as an alias.
hyphenate-after*
hyphenate-after: <integer>
Initial value |
2
|
---|---|
Applies to | all elements |
Inherited | yes |
This property specifies the minimum number of letters in a word that may be moved to the next line when the word is hyphenated.
The property -prince-hyphenate-after
can be used as an alias.
hyphenate-before*
hyphenate-before: <integer>
Initial value |
2
|
---|---|
Applies to | all elements |
Inherited | yes |
This property specifies the minimum number of letters in a word that may be left at the end of a line when the word is hyphenated.
The property -prince-hyphenate-before
can be used as an alias.
hyphenate-character*
hyphenate-character: auto | <string>
Initial value |
auto
|
---|---|
Applies to | all elements |
Inherited | yes |
This property specifies the character that is shown at the end of a line when the word is hyphenated.
The property -prince-hyphenate-character
can be used as an alias.
hyphenate-lines*
hyphenate-lines: no-limit | <integer>
Initial value |
no-limit
|
---|---|
Applies to | all elements |
Inherited | yes |
This property specifies the maximum number of consecutive lines that may end with a hyphenated word.
The property -prince-hyphenate-limit-lines
can be used as an alias.
image-resolution*
image-resolution: <dpi> | normal | auto [ , normal | <dpi> ]?
Initial value |
normal
|
---|---|
Applies to | image elements |
Inherited | yes |
This property determines the resolution of an image. The value normal
means 96dpi, or else the current CSS DPI setting. A custom DPI value can also
be specified. The value auto
means to check the original resolution
of the image. One can specify a second value, as for example auto, normal
or auto, 300dpi
in order to check the original resolution of the
image first, and to fall back on the second value if the image doesn't contain
resolution information.
The property -prince-image-resolution
can be used as an alias.
image-orientation
image-orientation: from-image | none
Initial value |
from-image
|
---|---|
Applies to | all elements |
Inherited | yes |
This property adds support for the orientation field in the EXIF data of JPEG and TIFF images.
The property applies only to content images (e.g. replaced elements and
generated content), not decorative images (such as background-image
).
inset-inside*
inset-inside: auto | <length-percentage>
Initial value |
auto
|
---|---|
Applies to | positioned elements |
Inherited | no |
This property determines the inside offset for positioned elements
(ie. elements with a position
value of relative
, absolute
or
fixed
).
inset-outside*
inset-outside: auto | <length-percentage>
Initial value |
auto
|
---|---|
Applies to | positioned elements |
Inherited | no |
This property determines the outisde offset for positioned elements
(ie. elements with a position
value of relative
, absolute
or
fixed
).
justify-content
justify-content: flex-start | flex-end | center | space-between | space-around
Initial value |
flex-start
|
---|---|
Applies to | flex containers |
Inherited | no |
letter-spacing
letter-spacing: normal | <length>
Initial value |
normal
|
---|---|
Applies to | all elements |
Inherited | yes |
lighting-color
lighting-color: <color>
Initial value |
white
|
---|---|
Applies to | feDiffuseLighting and feSpecularLighting SVG elements |
Inherited | no |
This property defines the color of the light source for the SVG filter primitives feDiffuseLighting
and feSpecularLighting
.
line-stacking-strategy*
line-stacking-strategy: inline-line-height | block-line-height | max-height | grid-height
Initial value |
inline-line-height
|
---|---|
Applies to | block-level elements |
Inherited | yes |
This property allows to choose whether individual lines should have their height determined based on their content, or whether all lines in a paragraph should have the same height, or a compromise where their heights are determined by their content and then rounded up to a multiple of the paragraph line height.
The behavior define by inline-line-height
is the default.
The value block-line-height
uses the line-height of the block
element and ignores the actual height of the content on those lines, so lines
will always have the same spacing regardless of whether they contain spans
with larger font size of superscripts/subscripts.
The value grid-height
is like inline-line-height
but each line gets rounded up to an integer multiple of the block line-height.
Finally, the max-height
value works like inline-line-height
,
but it ignores the line-height
property value
for inline elements.
The property -prince-line-stacking-strategy
can be used as an alias.
-prince-line-stacking-strategy
-prince-line-stacking-strategy: inline-line-height | block-line-height | max-height | grid-height
Initial value |
inline-line-height
|
---|---|
Applies to | block-level elements |
Inherited | yes |
This property allows to choose whether individual lines should have their height determined based on their content, or whether all lines in a paragraph should have the same height, or a compromise where their heights are determined by their content and then rounded up to a multiple of the paragraph line height.
The behavior define by inline-line-height
is the default.
The value block-line-height
uses the line-height of the block
element and ignores the actual height of the content on those lines, so lines
will always have the same spacing regardless of whether they contain spans
with larger font size of superscripts/subscripts.
The value grid-height
is like inline-line-height
but each line gets rounded up to an integer multiple of the block line-height.
Finally, the max-height
value works like inline-line-height
,
but it ignores the line-height
property value
for inline elements.
line-height
line-height: normal | none | <number> | <length-percentage>
Initial value |
normal
|
---|---|
Applies to | all elements |
Inherited | yes |
link*
link: none | url( <target-url> ) | attr( <target-attr> )
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
This property makes an element into a link to the specified URL.
The property -prince-link
can be used as an alias.
list-style
list-style: <'list-style-image'> || <'list-style-position'> || <'list-style-type'>
Initial value |
outside disc
|
---|---|
Applies to | list items |
Inherited | yes |
The list-style
property is a shorthand for
setting the following CSS properties:
list-style-type
list-style-type: none | box | check | circle | diamond | disc | hyphen | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | lower-latin | upper-alpha | upper-latin | lower-hexadecimal | upper-hexadecimal | binary | octal | asterisks | arabic-indic | lower-greek | upper-greek | lower-norwegian | upper-norwegian | lower-russian | upper-russian | lower-ukrainian | upper-ukrainian | lower-belarusian | upper-belarusian | lower-bulgarian | upper-bulgarian | lower-serbian | upper-serbian | persian | urdu | japanese-informal | japanese-formal | cjk-decimal | simp-chinese-informal | simp-chinese-formal | trad-chinese-informal | trad-chinese-formal
Initial value |
disc
|
---|---|
Applies to | list items |
Inherited | yes |
margin
margin: [ auto | <length-percentage> ]{1,4}
Initial value |
0
|
---|---|
Applies to | all elements, except elements with table display types other than table-caption, table and inline-table |
Inherited | no |
The margin
property is a shorthand for
setting the following CSS properties:
margin-alt*
margin-alt: none | <length> <length>?
Initial value |
none
|
---|---|
Applies to | all top- or bottom-floated elements |
Inherited | no |
The margin-alt
property defines a top and/or bottom margin
for elements floated to the top or bottom of a page or column,
by replacing the value of the corresponding margin property.
The default value is none
, which means that no alternative margin value
is defined, and thus the default margin, specified with the margin
property, is applied.
If only one value is given, it refers to both the top and bottom alternative margin. When two values are given, the first one refers to the top alternative margin, while the second one refers to the bottom one.
Unlike the margin property, it does not take percentage values.
The property -prince-margin-alt
can be used as an alias.
margin-inside*
margin-inside: auto | <length-percentage>
Initial value |
auto
|
---|---|
Applies to | all elements, except elements with table display types other than table-caption, table and inline-table |
Inherited | no |
The margin-inside
property overrides the value of the
margin-right
property if the element is on a left-facing
page and overrides the value of the margin-left
property
if the element is on a right-facing page. The result is a horizontal
margin on the side of the element that is on the "inside" of the
two-page spread.
The property -prince-margin-inside
can be used as an alias.
This property can also be set by the margin
shorthand.
margin-outside*
margin-outside: auto | <length-percentage>
Initial value |
auto
|
---|---|
Applies to | all elements, except elements with table display types other than table-caption, table and inline-table |
Inherited | no |
The margin-outside
property overrides the value of the
margin-left
property if the element is on a left-facing
page and overrides the value of the margin-right
property
if the element is on a right-facing page. The result is a horizontal
margin on the side of the element that is on the "outside" of the
two-page spread.
The property -prince-margin-outside
can be used as an alias.
This property can also be set by the margin
shorthand.
marker
marker: none | url( <marker-url> )
Initial value |
none
|
---|---|
Applies to | SVG elements |
Inherited | yes |
The marker
property is a shorthand for
setting the following CSS properties:
The marker
shorthand only applies to SVG elements.
It sets the start, mid and end markers all to the given value.
marks
marks: none | [ crop || cross ]
Initial value |
none
|
---|---|
Applies to | @page at-rule |
Inherited | n/a |
@page { marks: crop }
@page { marks: crop cross }
This CSS at-rule descriptor, used with the
@page
at-rule, adds
crop and/or cross marks to the page.
Specifying crop
and/or cross
for
the marks
property will result in 6pt of bleed area being
added to all four sides of the page and additional trim area to
contain the crop marks.
mask
mask: none | url( <mask> )
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
The mask
property is used to partially or fully hide an element
by masking it with a provided image.
max-height
max-height: none | min-content | max-content | <length-percentage>
Initial value |
none
|
---|---|
Applies to | all elements but non-replaced inline elements, table columns, and column groups |
Inherited | no |
max-width
max-width: none | min-content | max-content | <length-percentage>
Initial value |
none
|
---|---|
Applies to | all elements but non-replaced inline elements, table rows, and row groups |
Inherited | no |
min-height
min-height: auto | min-content | max-content | <length-percentage>
Initial value |
auto
|
---|---|
Applies to | all elements but non-replaced inline elements, table columns, and column groups |
Inherited | no |
min-width
min-width: auto | min-content | max-content | <length-percentage>
Initial value |
auto
|
---|---|
Applies to | all elements but non-replaced inline elements, table rows, and row groups |
Inherited | no |
object-fit
object-fit: fill | contain | cover | none | scale-down
Initial value |
fill
|
---|---|
Applies to | replaced elements |
Inherited | no |
This property specifies how the contents of a replaced element, such as an image, should be resized to fit its container.
object-position
object-position:
[ [ left | center | right ] || [ top | center | bottom ] ]
| [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
| [ [ left | right ] <length-percentage> && [ top | bottom ] <length-percentage> ]
Initial value |
50% 50%
|
---|---|
Applies to | replaced elements |
Inherited | no |
This property specifies how the contents of a replaced element, such as an image, are positioned in its container.
opacity
opacity: <number>
Initial value |
1
|
---|---|
Applies to | all elements |
Inherited | no |
Opacity is a number between 0 and 1.
order
order: <integer>
Initial value |
0
|
---|---|
Applies to | flex items and absolutely-positioned children of flex containers |
Inherited | no |
orphans
orphans: [ <integer> [ , -prince-prefer <integer> ]? ] | -prince-prefer <integer>
Initial value |
1
|
---|---|
Applies to | “paragraphs”: block container boxes that establish an inline formatting context |
Inherited | yes |
If a paragraph is split over two pages or columns, this property determines the minimum number of lines that must be left at the bottom of the first page or column.
The initial value has been changed from 2
to 1
.
In Prince for Books the property can take a second, optional, comma-separated value expressed with the additional keyword -prince-prefer. It is useful in case the preference, expressed with the additional keyword, is a bigger amount than the hard requirement expressed in the first value.
overflow
overflow: visible | hidden | clip | scroll | auto
Initial value |
visible
|
---|---|
Applies to | non-replaced block-level elements and non-replaced inline-block elements |
Inherited | no |
This property determines the visibility of content that overflows outside the boundaries of an element.
Please note that the value scroll
does not actually scroll, but
establishes a new block formatting context instead - other than that, it is
treated the same as visible
.
Also, please note that Prince does not support separate overflow-x
and overflow-y
properties, the overflow
property only
sets both to the same value.
overflow-wrap
overflow-wrap: normal | break-word
Initial value |
normal
|
---|---|
Applies to | all elements |
Inherited | yes |
part { overflow-wrap: break-word; }
supplier, item { overflow-wrap: normal; }
<part><supplier>xyz</supplier><item>12345</item></part>
This property controls wrapping behavior of last resort:
whether it is better for a word to overflow its container,
or to be broken at an arbitrary point
(subject to white-space
, and not splitting within a grapheme cluster),
without adding a hyphen.
The value normal
allows text containing no other wrap
opportunities to overflow.
This feature is most commonly used for non-words such as URIs, part codes,
or cryptographic hashes.
For such purposes, overflow-wrap:break-word
can be
compared with word-break:break-all
:
the latter is more willing to break the word (preferring to break
than to leave an under-full line or advance past a CSS2-style float),
but only breaks between alpha-numeric grapheme clusters rather than
between any pair of grapheme clusters.
The element whose overflow-wrap
property controls
whether such a wrap opportunity exists at a given boundary
is the closest ancestor that “strictly contains” the boundary,
i.e. that contains text from both sides of the boundary.
Thus, components of a wrappable string can be kept on one line
by styling each component with overflow-wrap:normal
even if two components are directly adjacent to each other, as
seen in the above example.
Prince also treats word-wrap
as a legacy name alias for this property.
padding
padding: <length-percentage>{1,4}
Initial value |
0
|
---|---|
Applies to | all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column |
Inherited | no |
The padding
property is a shorthand for
setting the following CSS properties:
page
page: auto | <name>
Initial value |
auto
|
---|---|
Applies to | all elements |
Inherited | yes |
This property determines which named page, if any, the current element should be placed on. See the documentation for Selecting pages for more details.
For an integer not preceded by -prince-prefer
,
the paragraph will be pushed forward to the start of a new page or column
if necessary to ensure the given number of lines are together.
Values involving -prince-prefer
are only accepted by
Prince for Books.
An integer preceded by -prince-prefer
is a request that Prince for Books will try to satisfy,
but not at the cost of introducing an obvious gap at the end of the
previous column or page:
it will only use whatever flexibility has been granted with
-prince-change-line-breaks-for-pagination
,
-prince-spread-length-options
or
-prince-resize-options
.
page-break-after
page-break-after: auto | always | avoid | left | right | verso | recto
Initial value |
auto
|
---|---|
Applies to | block-level elements in the normal flow of the root element |
Inherited | no |
This property can be used to force or suppress page breaks after an element.
Use of this property is deprecated. Use the property break-after
instead. See the documentation for Page breaks for more details.
page-break-before
page-break-before: auto | always | avoid | left | right | verso | recto
Initial value |
auto
|
---|---|
Applies to | block-level elements in the normal flow of the root element |
Inherited | no |
This property can be used to force or suppress page breaks before an
element. Prince expands the property with the values verso
and
recto
.
Use of this property is deprecated. Use the property break-before
instead. See the documentation for Page breaks for more details.
page-break-inside
page-break-inside: auto | avoid
Initial value |
auto
|
---|---|
Applies to | block-level elements in the normal flow of the root element |
Inherited | no |
This property can be used to suppress page breaks inside an element.
Use of this property is deprecated. Use the property break-inside
instead. See the documentation for Page breaks for more details.
page-group*
page-group: start | auto
Initial value |
auto
|
---|---|
Applies to | all elements |
Inherited | no |
This property determines whether the first page of this element matches the :first page class selector.
The property -prince-page-group
can be used as an alias.
position
position: static | relative | absolute | fixed | running( <name> )
Initial value |
static
|
---|---|
Applies to | all elements |
Inherited | no |
The running()
function removes the element from the normal document
flow and makes it available to be placed in a page region with the
element()
function of the content
property. See also Taking elements from the document.
-prince-alt-text*
-prince-alt-text: auto | none | <string>
Initial value |
auto
|
---|---|
Applies to | all elements |
Inherited | no |
span {
-prince-alt-text: attr(aria-label);
}
This property can be used to tell Prince what to show as an alternate text, which is crucial when producing tagged PDF files.
-prince-background-image-resolution*
-prince-background-image-resolution: <dpi> | normal | auto [ , normal | <dpi> ]?
Initial value |
normal
|
---|---|
Applies to | background image elements |
Inherited | yes |
This property determines the resolution of a background image. The value normal
means 96dpi, or else the current CSS DPI setting. A custom DPI value can also
be specified. The value auto
means to check the original resolution
of the image. One can specify a second value, as for example auto, normal
or auto, 300dpi
in order to check the original resolution of the
image first, and to fall back on the second value if the image doesn't contain
resolution information.
The property background-image-resolution
can be used as an alias.
-prince-baseline-grid*
-prince-baseline-grid: auto | new | none
Initial value |
auto
|
---|---|
Applies to | block-level boxes |
Inherited | no |
Prince does not yet support constraining an element’s baselines to lie on a grid.
In the meantime, this property suffices for common cases:
if its value is none
then space is added around the box to make its border box occupy
a whole number of grid lines.
The grid line spacing is established by the closest ancestor
whose -prince-baseline-grid
is new
.
Space is added at the place indicated by -prince-resize-adjust
.
Note that the value none
currently forces the box to
“establish a new formatting context”: i.e. its margins will not collapse with
the margins of its children, even if it has no borders and padding.
The usual way that this property would be used is
to set it to new
on the root element,
and to set it to none
on headings, blockquotes and tables.
This property only applies to Prince for Books.
-prince-bookmark-label*
-prince-bookmark-label: none | <content>
Initial value |
content()
|
---|---|
Applies to | all elements |
Inherited | no |
This property is used to determine the text content of the PDF bookmark generated by the current element.
Several ways of creating content are here defined by means of functions - the detailed explanation can be found in the Generated Content Functions section.
Even though the initial value for this property is
content()
, no PDF bookmark will be generated by default
as the initial value for the -prince-bookmark-level
property is none
.
See the documentation for PDF Bookmarks for more details.
The property bookmark-label
can be used as an alias.
-prince-bookmark-level*
-prince-bookmark-level: none | <integer>
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
This property is used to determine the numeric level in the bookmark hierarchy of the PDF bookmark generated by the current element. See the documentation for PDF Bookmarks for more details.
The property bookmark-level
can be used as an alias.
-prince-bookmark-state*
-prince-bookmark-state: open | closed
Initial value |
open
|
---|---|
Applies to | all elements |
Inherited | no |
This property is used to determine whether the bookmark tree item is open or closed when the PDF is first viewed. In this way you can close each chapter and hide the subsections for documents that are very long, or you can choose to have a deep bookmark tree.
The property bookmark-state
can be used as an alias.
-prince-bookmark-target*
-prince-bookmark-target: self | url( <target-url> ) | attr( <target-attr> )
Initial value |
self
|
---|---|
Applies to | all elements |
Inherited | no |
This property is used to determine the link target for the PDF bookmark generated by the current element. See the documentation for PDF Bookmarks for more details.
The property bookmark-target
can be used as an alias.
-prince-caption-page*
-prince-caption-page: first | following | all
Initial value |
first
|
---|---|
Applies to | table elements |
Inherited | yes |
This property determines whether table captions will be displayed on the first page of a table, or only on following pages, or repeated on every page that a table appears on.
The property caption-page
can be used as an alias.
-prince-clear*
-prince-clear: none | left | right | inside | outside | both | page | column | end
Initial value |
none
|
---|---|
Applies to | block-level elements |
Inherited | no |
This property determines whether an element should be moved down the
page in order to clear elements that have been floated to the left or
right of the page. The left
, right
,
inside
and outside
values correspond to values given to the float
property, while both
will clear floats on either side.
The keyword end
clears the float, and places the next
float in the next available position — so if e.g. you have a column
layout with a float already at the top of the first column, it will
place the next float, whose natural position would be just below the
first one, at the bottom of the same column.
The keyword column
clears the end of the column (so any
further float would be pushed to the next column), while the keyword
page
clears the page (pushing further floats to the next
page).
The property clear
can be used as an alias.
-prince-change-line-breaks-for-pagination*
-prince-change-line-breaks-for-pagination: no | yes
Initial value |
no
|
---|---|
Applies to | paragraphs: block containers that establish an inline formatting context |
Inherited | yes |
:root {
-prince-change-line-breaks-for-pagination: yes;
}
With the initial value of ‘no
’, the paragraph’s line breaks
are the “galley layout”: chosen without concern for avoiding undesirable
page breaks.
If set to ‘yes
’, the line breaks can be affected by pagination
considerations, such as avoiding hyphenating a word across a page turn,
or changing the number of lines occupied by the paragraph in order to
avoid a later undesirable page break without leaving an obvious gap
at the end of a page.
This property only applies to Prince for Books.
-prince-expansion-text*
-prince-expansion-text: auto | none | <string>
Initial value |
auto
|
---|---|
Applies to | inline elements |
Inherited | no |
abbr {
-prince-expansion-text: attr(title);
}
This property can be used for specific elements, such as e.g. abbr
and acronym
,
to tell Prince what to show as an expansion text, which is crucial when producing tagged PDF files.
-prince-fallback-cmyk-profile*
-prince-fallback-cmyk-profile: url( <filename> )
Initial value |
""
|
---|---|
Applies to | @prince-pdf at-rule |
Inherited | n/a |
@prince-pdf {
-prince-pdf-output-intent: url("AdobeRGB1998.icc");
-prince-fallback-cmyk-profile: url("ISOcoated_v2_eci.icc");
}
This descriptor is used inside a
@prince-pdf
at-rule to determine a fallback CMYK profile to be used for uncalibrated
(untagged) CMYK colors or images, if it is not possible to use the output
intent ICC profile (see -prince-pdf-output-intent
).
CMYK colors are treated as uncalibrated in either of the following three cases: conversion of an untagged CMYK image to another color space, conversion of a device dependent CMYK color, or when a PDF Profile requires that only device independent color is present, in which case both untagged CMYK images and device dependent CMYK colors are treated as uncalibrated CMYK colors.
-prince-filter-resolution*
-prince-filter-resolution: auto | <dpi>
Initial value |
auto
|
---|---|
Applies to | all elements |
Inherited | yes |
This property is used to specify the resolution used when rasterizing to images for applying CSS and SVG filters.
If ‘auto
’ then the value is either that given by the
--raster-dpi
command-line option or the
prince-filter-resolution
descriptor of
@prince-pdf
(see below).
-prince-filter-resolution: <dpi>
Initial value |
96dpi
|
---|---|
Applies to | @prince-pdf at-rule |
Inherited |
This descriptor provides a default resolution to be used for
rasterizing to images for applying CSS and SVG filters,
for elements whose -prince-filter-resolution
property has its initial ‘auto
’ value.
-prince-float*
-prince-float: <'-prince-float-reference'> || <'-prince-float-placement'> || <'-prince-float-modifier'>
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
The -prince-float
property is a shorthand for
setting the following CSS properties:
The float
property in Prince functions just as the standard property -
but under the hood, the implementation is rather different, to allow for the expanded
features of page and column floats.
In other words, the syntax of the standard property is a subset of the Prince extension
shorthands - if you use just the standard float features, there is nothing in your CSS
syntax that needs adjustment. The values of the standard float
property are
now listed in the -prince-float-placement
property.
Traditionally, floats move in the inline direction, left or right. Prince extends this behavior with page and column floats that move in the block direction, specifying that an element should be floated to the top or to the bottom, or to the nearest edge of the column.
Note that when setting only the value for prince-float-reference
, i.e.
column
or page
, the default value for -prince-float-placement
is top-bottom
and differs from its initial value. This means that Prince
will try to float the element to the top of the indicated float reference, and if that
should not be possible, it would be floated to the bottom.
On a vertical float to the top or bottom of the float reference, a vertical margin
set to the value auto
will expand and thereby repal other content. By
setting top and bottom margins to auto
, the element is vertically centered.
Please also see the property margin-alt
for
alternative margins for top or bottom floated elements.
The property float
can be used as an alias.
-prince-float-defer-column*
-prince-float-defer-column: none | inside | outside | last | <integer>
Initial value |
none
|
---|---|
Applies to | all floated elements |
Inherited | yes |
figure {
float: top;
float-defer-column: 1;
}
The float-defer-column
property defines the number of columns that the float should be deferred.
The property float-defer-column
can be used as an alias.
-prince-float-defer-page*
-prince-float-defer-page: none | [ <integer> || [ left | right ] ]
Initial value |
none
|
---|---|
Applies to | all floated elements |
Inherited | yes |
figure {
float: top;
float-defer-page: right;
}
The float-defer-page
property specifies whether the float is placed after previous page floats have been placed, or in another float reference container.
The property float-defer-page
can be used as an alias.
-prince-float-modifier*
-prince-float-modifier: normal | unless-fit
Initial value |
normal
|
---|---|
Applies to | all floated elements |
Inherited | yes |
figure {
float: top;
float-modifier: unless-fit;
}
The float-modifier
property expresses a conditional
with the use of the keyword unless-fit
: the element
is only floated if it would otherwise cause a page or column break.
The property float-modifier
can be used as an alias.
-prince-float-placement*
-prince-float-placement:
none | left | right | inside | outside
| top | bottom | top-bottom | snap
| align-top | align-bottom
| footnote | inline-footnote
Initial value |
none
|
---|---|
Applies to | all floated elements |
Inherited | yes |
figure {
float-reference: page;
float-placement: bottom;
}
The -prince-float-placement
property defines how a floated element
is positioned. Its values are basically the values of the standard
float
property, plus some Prince-specific extensions.
The values top
or bottom
float the element to, respectively,
the top or the bottom of the float reference (a page, or a column), while
top-bottom
tries to float it to the top, and if that should not be possible,
it is floated to the bottom.
The default value for -prince-float-placement
, when omitted in the
float
shorthand property, is
top-bottom
, and differs from its initial value. This means that Prince
will try to float the element to the top of the indicated float reference, and if that
should not be possible, it would be floated to the bottom.
The value snap
floats the element to the nearest "end", i.e.
to the top or bottom of the page or of the column.
The values inside
and outside
float the element respectively
to the inside or outside of a spread: inside
moves the element to
the right when used on a left-facing page, and to the left on a right-facing page;
outside
moves the element to the left when used on a left-facing
page, and to the right on a right-facing page.
The align-top
and align-bottom
values affect sidenotes -
the former one aligns the top of the sidenote with the top of the box where it
naturally happens, while the latter value aligns the bottom of the sidenote with
the top of the box where it naturally happens. If more than one sidenote naturally
appears on the same line, the sidenotes will be stacked in the content order.
The value footnote
transforms the element into a footnote - the footnote
marker is placed outside of the block of the footnote. The value inline-footnote
transforms the element into a footnote and places the footnote marker inside of
the block of the footnote.
The property float-placement
can be used as an alias.
-prince-float-policy*
-prince-float-policy: normal | in-order
Initial value |
normal
|
---|---|
Applies to | all floated elements |
Inherited | yes |
figure {
float: bottom;
float-policy: in-order;
}
The float-policy
property defines the policy adopted when
floating an element. The value in-order
imposes that page
floats must be shown in source order - normal
adds no extra
constraints to the float.
The property float-policy
can be used as an alias.
-prince-float-reference*
-prince-float-reference:
column | page
| sidenote | leftnote | rightnote | insidenote | outsidenote
| wide | wide-left | wide-right | wide-inside | wide-outside
Initial value |
column
|
---|---|
Applies to | all floated elements |
Inherited | yes |
figure {
float: top;
float-reference: page;
}
The float-reference
property defines the reference context for
the float, i.e. whether the element should be floated to the top or bottom of
the column, or of the page.
The sidenote
value activates the sidenote area. Sidenotes
aren't attached to a column or a page, but are in their own region. Within
that region they can be placed at the top
or bottom
,
or be aligned in some way (see the align-top
and
align-bottom
values for float-placement
.
The sidenote variants are required if sidenote regions are defined on both sides of the page - in this case we need to distinguish where to place them.
To allow an element to extend into the margin or sidenote area, the wide
,
wide-left
, wide-right
, wide-inside
and
wide-outside
values can be used. When a left, right, inside or
outside direction is expressed, the element will extend only in the given direction.
Please note that the initial value is column
: thus, the style rule
float: top
will create a column float in a multicol context,
rather than a page float.
The property float-reference
can be used as an alias.
-prince-float-tail*
-prince-float-tail: keep | fill-page
Initial value |
keep
|
---|---|
Applies to | all floated elements |
Inherited | yes |
figure {
float: top;
float-tail: fill-page;
}
The float-tail
property instructs Prince how to deal with page
floats that end up past the end of normal content: with the value
fill-page
, Prince will try to fill the last page, but discard
any page floats that would create more pages.
The property float-tail
can be used as an alias.
-prince-flow*
-prince-flow: normal | static( <name>, [ start | current ]? )
Initial value |
normal
|
---|---|
Applies to | all elements |
Inherited | no |
This property is used to remove elements from the normal flow of the
document, to be placed in a page region with content: flow()
,
in order to create running page headers and footers.
The optional start
argument (default is current
)
makes the fetched content available, as if it were fetched from the start
of the document.
See the documentation for Taking elements from the document for more details.
The property flow
can be used as an alias.
-prince-footnote-policy*
-prince-footnote-policy: auto | keep-with-line | keep-with-block
Initial value |
auto
|
---|---|
Applies to | footnote elements |
Inherited | yes |
This property determines whether a footnote should always be displayed on the
same page as its footnote call is located on, or whether it may slip to the next
page. The value keep-with-line
instructs Prince to keep the footnote
on the same page as the line with the footnote call, while keep-with-block
tells Prince to keep it together with the whole paragraph with the footnote call.
The property must be applied to the paragraph in which the footnote occurs, not to the footnote element itself.
-prince-forced-breaks*
-prince-forced-breaks: short | full
Initial value |
short
|
---|---|
Applies to | all elements |
Inherited | yes |
This property controls whether a line ended by a “preserved newline”
(such as introduced by <br>
)
should preferably appear to be a normal full line (as if ended only by normal line wrapping),
or whether being shorter than a normal full line is actually preferable,
for example to mark a deliberate break.
The difference is particularly marked in justified text,
where lines ended by -prince-forced-breaks:full
are subject to
justification like most other lines.
(Limitation: At the time of writing, this property only affects justified text.)
This property only applies to Prince for Books.
-prince-hyphenate-patterns*
-prince-hyphenate-patterns: none | url( <patterns-url> )
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | yes |
This property is used to point to a hyphenation dictionary. Normally this is selected automatically, based on the current language.
The url()
argument can take local paths or remote HTTP URLs as argument.
The property hyphenate-patterns
can be used as an alias.
-prince-hyphenate-after*
-prince-hyphenate-after: <integer>
Initial value |
2
|
---|---|
Applies to | all elements |
Inherited | yes |
This property specifies the minimum number of letters in a word that may be moved to the next line when the word is hyphenated.
The property hyphenate-after
can be used as an alias.
-prince-hyphenate-before*
-prince-hyphenate-before: <integer>
Initial value |
2
|
---|---|
Applies to | all elements |
Inherited | yes |
This property specifies the minimum number of letters in a word that may be left at the end of a line when the word is hyphenated.
The property hyphenate-before
can be used as an alias.
-prince-hyphenate-character*
-prince-hyphenate-character: auto | <string>
Initial value |
auto
|
---|---|
Applies to | all elements |
Inherited | yes |
This property specifies the character that is shown at the end of a line when the word is hyphenated.
The property hyphenate-character
can be used as an alias.
-prince-hyphenate-limit-lines*
-prince-hyphenate-limit-lines: no-limit | <integer>
Initial value |
no-limit
|
---|---|
Applies to | all elements |
Inherited | yes |
This property specifies the maximum number of consecutive lines that may end with a hyphenated word.
The property hyphenate-lines
can be used as an alias.
-prince-hyphenate-lines*
-prince-hyphenate-lines: no-limit | <integer>
Initial value |
no-limit
|
---|---|
Applies to | all elements |
Inherited | yes |
This property specifies the maximum number of consecutive lines that may end with a hyphenated word.
The property -prince-hyphenate-limit-lines
can be used as an alias.
-prince-image-magic*
-prince-image-magic: none | [ snap-to-integer-coords || ignore-icc-profile || [ jpeg-verbatim | recompress-jpeg( <percent> ) ] || [ convert-to-jpeg | convert-to-jpeg( <percent> ) ] ]
Initial value |
none
|
---|---|
Applies to | image elements |
Inherited | yes |
This property performs various image-related, Prince-specific tasks that do not fit into other existing CSS properties. It applies magic to images!
The snap-to-integer-coords
value can be used to avoid blurring of
images in some PDF viewers.
The ignore-icc-profile
value causes Prince to ignore any ICC color
profile embedded in the image.
The jpeg-verbatim
value inhibits the normal stripping that Prince
performs, where unnecessary metadata is removed from JPEG images when they are
embedded in the PDF file.
When recompress-jpeg( <quality%> )
is specified for this property, Prince
will recompress JPEG images to the specified percentage to save space when
embedding them in the PDF output.
The convert-to-jpeg
keyword or the convert-to-jpeg( <quality%> )
function convert non-JPEG images to JPEG, so that they take less space (but may look blurry).
Several of the values can be combined, to perform more than one magic on images.
-prince-image-resolution*
-prince-image-resolution: <dpi> | normal | auto [ , normal | <dpi> ]?
Initial value |
normal
|
---|---|
Applies to | image elements |
Inherited | yes |
This property determines the resolution of an image. The value normal
means 96dpi, or else the current CSS DPI setting. A custom DPI value can also
be specified. The value auto
means to check the original resolution
of the image. One can specify a second value, as for example auto, normal
or auto, 300dpi
in order to check the original resolution of the
image first, and to fall back on the second value if the image doesn't contain
resolution information.
The property image-resolution
can be used as an alias.
-prince-lang*
-prince-lang: auto | <language>
Initial value |
auto
|
---|---|
Applies to | all elements |
Inherited | yes |
This property determines language-specific font-selection.
Text language can influence how the text is displayed - normally you would
use the lang
or xml:lang
attributes in HTML or XHTML.
This property helps defining the language in cases where the attributes cannot
be applied, such as in the case of CSS generated content.
The property also specifies an element's language for tagged PDF.
In case of conflict between the attributes and the property, the CSS property prevails.
-prince-linebreak-magic*
-prince-linebreak-magic: none | auto
Initial value |
auto
|
---|---|
Applies to | all elements |
Inherited | yes |
This property enables line-breaking in certain situations even in the absence of whitespace. For example, after slashes in long URLs. It can be disabled for situations in which more precise control over line-breaking behavior is preferred.
-prince-line-break-choices*
-prince-line-break-choices: body | heading | title-page | body-greedy | body-lookahead | heading-greedy | heading-lookahead | title-page-greedy | title-page-lookahead | fast
Initial value |
body
|
---|---|
Applies to | all elements |
Inherited | yes |
This property is used for fine tuning the line breaking approach.
The keyword title-page
is intended for title pages of books or
chapters, where phrasing considerations are of prime consideration even
at the cost of extremely unbalanced lines, or using more lines than are necessary.
The keyword heading
, on the other hand, is closer to
body
, differing mainly in that it's less likely to hyphenate,
and is more willing to make the first line(s) a little shorter if doing so
avoids a short last line.
The keyword fast
can be used for quick web-browser-style line
breaking, useful for testing the effect of styling changes that don't depend
on good line breaking.
Values other than fast
currently have no effect on justified
paragraphs.
The *-greedy
and *-lookahead
variations
allow control over whether the choice of where to end a line
can be affected by consequences further down the paragraph:
The *-greedy
keywords decide on line breaks solely based on the
current line and on the length of the next word, never going back to change a
decision on a line in the light of line-breaking issues encountered later.
The *-lookahead
keywords, on the other hand,
enable paragraph-at-a-time line-breaking for the paragraph in
a non-justified paragraph:
choosing where to end the line not just based on what seems best for
the current line, but also considering the effect on future lines.
Considering a whole paragraph at once like this
would result in better line breaks in most paragraphs;
but software is not human, and where it does misjudge,
the results might look gratuitously or incomprehensibly bad.
Another difference is that the lookahead versions are noticeably slower (if used for a large proportion of the text in a book).
The default at present is to use paragraph-at-a-time line breaking for heading
and title-page
,
while still using simple line-at-a-time line breaking for body
.
To those who would usually check and tweak line breaks in ragged text before publication,
we suggest that paragraph-at-a-time line breaking will give you a better starting point:
body { -prince-line-break-choices: body-lookahead }
For more information on how to influence line breaks, please see Line breaking.
This property only applies to Prince for Books.
The property -prince-text-wrap
can be used as an alias.
-prince-margin-alt*
-prince-margin-alt: none | <length> <length>?
Initial value |
none
|
---|---|
Applies to | all top- or bottom-floated elements |
Inherited | no |
The margin-alt
property defines a top and/or bottom margin
for elements floated to the top or bottom of a page or column,
by replacing the value of the corresponding margin property.
The default value is none
, which means that no alternative margin value
is defined, and thus the default margin, specified with the margin
property, is applied.
If only one value is given, it refers to both the top and bottom alternative margin. When two values are given, the first one refers to the top alternative margin, while the second one refers to the bottom one.
Unlike the margin property, it does not take percentage values.
The property margin-alt
can be used as an alias.
-prince-margin-inside*
-prince-margin-inside: auto | <length-percentage>
Initial value |
auto
|
---|---|
Applies to | all elements, except elements with table display types other than table-caption, table and inline-table |
Inherited | no |
The margin-inside
property overrides the value of the
margin-right
property if the element is on a left-facing
page and overrides the value of the margin-left
property
if the element is on a right-facing page. The result is a horizontal
margin on the side of the element that is on the "inside" of the
two-page spread.
The property margin-inside
can be used as an alias.
This property can also be set by the margin
shorthand.
-prince-margin-outside*
-prince-margin-outside: auto | <length-percentage>
Initial value |
auto
|
---|---|
Applies to | all elements, except elements with table display types other than table-caption, table and inline-table |
Inherited | no |
The margin-outside
property overrides the value of the
margin-left
property if the element is on a left-facing
page and overrides the value of the margin-right
property
if the element is on a right-facing page. The result is a horizontal
margin on the side of the element that is on the "outside" of the
two-page spread.
The property margin-outside
can be used as an alias.
This property can also be set by the margin
shorthand.
-prince-mark-length*
-prince-mark-length: <length>
Initial value |
24pt
|
---|---|
Applies to | @page at-rule |
Inherited | n/a |
@page { -prince-mark-length: 2cm }
This CSS at-rule descriptor can be used to specify the length of crop marks, beginning after the offset from the page area and extending towards the edge of the paper.
-prince-mark-offset*
-prince-mark-offset: auto | <length>{1,4}
Initial value |
auto
|
---|---|
Applies to | @page at-rule |
Inherited | n/a |
@page { -prince-mark-offset: 6pt }
This CSS at-rule descriptor can be used to specify the offset between crop and cross marks and the page area.
-prince-mark-width*
-prince-mark-width: <length>
Initial value |
0.1pt
|
---|---|
Applies to | @page at-rule |
Inherited | n/a |
@page { -prince-mark-width: 1pt }
This CSS at-rule descriptor can be used to specify the line width of the crop and cross marks.
-prince-n-lines*
-prince-n-lines: auto | <integer>? [ longer | shorter ] | change | <integer>
Initial value |
auto
|
---|---|
Applies to | “paragraphs”: block container boxes that establish inline formatting contexts |
Inherited | no |
This property is for use in the pagination phase of typesetting, for ensuring that page ends are even while avoiding widows and other awkward breaks.
Values other than the initial value of auto
request that the
paragraph occupy the given number of lines; where values other than a simple
integer are relative to the number of lines that the paragraph would have
occupied if this property still had its initial value (auto
).
The value change
means to make the paragraph either a line
longer or shorter, whichever will be deemed to look better. This value is
provided for the common case that a page break opportunity exists both at a
line earlier and at a line later than where the page end would naturally
fall, as would typically be the case if the only relevant restriction arises
from widows:2
or orphans:2
or a minor heading that
occupies two body lines worth of height. Thus, this tends to be the most
commonly used value for this property, other than leaving at its initial
value.
A simple integer value is the least convenient value to use (since choosing the desired number requires counting the existing number of lines, and since this property is most commonly used on long paragraphs). Its value lies in the fact that the result is not subject to variation in "the number of lines that the paragraph would otherwise have had", as can occur if this paragraph spans a page end, and a subsequent styling change causes some earlier content to change in size, affecting what is the last line before the break, and if this in turn affects line-breaking decisions made to avoid having a hyphenation at the end of a page.
This property only applies to Prince for Books.
-prince-page-fill*
-prince-page-fill: prefer-balance | prefer-fill
Initial value |
prefer-balance
|
---|---|
Applies to | @page at-rule |
Inherited | n/a |
This property determines whether Prince should shorten a page to match its facing page.
‘prefer-fill
’ means to ignore the length of the facing
page. Pages can still be under-full in order to satisfy pagination
constraints such as
widows
,
orphans
,
break-inside
,
break-before
and
break-after
,
possibly resulting in one page being longer than its facing page.
With ‘prefer-balance
’, Prince will sometimes end a page
one line shorter than usual, if this is needed to make the two pages be
approximately balanced.
This property only applies to Prince for Books.
-prince-page-group*
-prince-page-group: start | auto
Initial value |
auto
|
---|---|
Applies to | all elements |
Inherited | no |
This property determines whether the first page of this element matches the :first page class selector.
The property page-group
can be used as an alias.
-prince-pdf-annotation-author*
-prince-pdf-annotation-author: none | <string>
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
-prince-pdf-annotation-author: "John Doe";
This property is used to specify the author of a PDF annotation.
-prince-pdf-annotation-color*
-prince-pdf-annotation-color: auto | <color>
Initial value |
yellow
|
---|---|
Applies to | all elements |
Inherited | no |
-prince-pdf-annotation-color: pink;
This property is used to define the color of a PDF annotation.
When choosing the keyword auto
, the following default
colors are applied to the different PDF annotation types:
- icons and highlights are yellow;
- underlines and squiggly underlines are green; and
- strike-outs are red.
-prince-pdf-annotation-contents*
-prince-pdf-annotation-contents: none | [ <string> | attr( <attr> ) ]+
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
-prince-pdf-annotation-contents: "This is a PDF annotation.";
This property is used to define the PDF annotation content.
-prince-pdf-annotation-createdate*
-prince-pdf-annotation-createdate: none | <string>
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
-prince-pdf-annotation-createdate: "2022-04-28"
This property is used to define the PDF annotation date of creation. Please note that the string needs to be a valid ISO 8601 date format.
-prince-pdf-annotation-icon*
-prince-pdf-annotation-icon: note | comment | key | help | new-paragraph | paragraph | insert
Initial value |
note
|
---|---|
Applies to | all elements |
Inherited | no |
-prince-pdf-annotation-icon: help
This property is used to define which icon should be used for the PDF annotation.
-prince-pdf-annotation-modifydate*
-prince-pdf-annotation-modifydate: none | <string>
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
-prince-pdf-annotation-modifydate: "2022-04-28"
This property is used to define the PDF annotation date of modification. Please note that the string needs to be a valid ISO 8601 date format.
-prince-pdf-annotation-position*
-prince-pdf-annotation-position: [ left | right | page-left | page-right ] <length-percentage>? || [ top | bottom | page-top | page-bottom ] <length-percentage>?
Initial value |
left top
|
---|---|
Applies to | all elements |
Inherited | no |
-prince-pdf-annotation-position: page-left 10% page-top 50%;
This property is used to define the PDF annotation position.
The values left
, right
, top
and bottom
refer to the element box, while the equivalent
keywords page-left
, page-right
, page-top
and page-bottom
refer to the trim box of the page.
-prince-pdf-annotation-title*
-prince-pdf-annotation-title: none | <string>
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
-prince-pdf-annotation-title: "PDF Annotation Title"
This property is used to define the PDF annotation title.
-prince-pdf-annotation-type*
-prince-pdf-annotation-type: none | text | highlight | underline | wavy | line-through
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
-prince-pdf-annotation-type: text;
This property is used to define the PDF annotation type.
The keyword wavy
maps to the Squiggly
annotation type in PDF,
and line-through
maps to StrikeOut
.
-prince-pdf-color-conversion*
-prince-pdf-color-conversion: auto | none
Initial value |
auto
|
---|---|
Applies to | all elements |
Inherited | yes |
As a property, -prince-pdf-color-conversion
is applied to elements in order to convert the colors of the elements to
the output intent color space, if provided. The value none
can be used to prevent color conversion for individual elements if the
document itself is converted.
The same property, used as a descriptor in the @prince-pdf
at-rule, has a different syntax - see below.
-prince-pdf-color-conversion: none | [ output-intent | full | url( <color-profile> ) no-embed? ] [ absolute-colorimetric | relative-colorimetric | relative-colorimetric-bpc | perceptual | perceptual-bpc | saturation | saturation-bpc ]?
Initial value |
output-intent
|
---|---|
Applies to | @prince-pdf at-rule |
Inherited | no |
As a descriptor inside the
@prince-pdf
at-rule, -prince-pdf-color-conversion
is used
to convert the colors of the PDF to the output intent color space, or to a
color profile of choice.
When used with the default value output-intent
, it functions
like the
--convert-colors
command-line option - the colors are converted to the output intent color profile.
The value full
is a deprecated synonym for output-intent
.
The url()
function allows for an ICC color profile to convert
to, different from the output-intent.
Prince allows for the additional no-embed
keyword, which
causes the color conversion target ICC profile to not be embedded in the
output PDF, unless required by the PDF profile. The converted colors will
be left device dependent or else implicitly mapped to the output intent color
space.
The optional second argument comprises the rendering intent: Black point compensation (“BPC”) will most commonly be used with a relative-colorimetric rendering intent. Prince however also accepts black point compensation with perceptual and saturation rendering intents because “there are atypical profiles [...] in which BPC may actually be beneficial for Perceptual or Saturation processing” (quoted from the in-depth analysis Black-point compensation: theory and application).
When the descriptor is used as a property, applied to single elements, it has a different syntax — see above.
-prince-pdf-color-options*
-prince-pdf-color-options: auto | use-true-black | use-rich-black
Initial value |
auto
|
---|---|
Applies to | @prince-pdf at-rule |
Inherited | no |
@prince-pdf {
-prince-pdf-color-options: use-rich-black;
}
This descriptor may be used to control the encoding of RGB blacks and grays:
when use-true-black
is used, they are encoded in the /DeviceGray colorspace
in the PDF, instead of /DeviceRGB, whereas use-rich-black
disables this behavior
and keeps all the colors in RGB. Currently, auto is equivalent to use-true-black
.
-prince-pdf-destination*
-prince-pdf-destination: none | <name> | attr( <attr> )
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
This property may be used to create "named destinations" (nameddest
)
in generated PDF files which can be linked to from other documents.
-prince-pdf-display-doc-title*
-prince-pdf-display-doc-title: true | false
Initial value |
false
|
---|---|
Applies to | @prince-pdf at-rule |
Inherited | no |
This descriptor may be used to control whether the document file name or the document title is displayed in the PDF.
Prince will force it to true for the PDF/UA-1 profile, which requires it, and also for PDF/A-1a and PDF/A-3a which technically do not require it but users may still expect it - or they will see a warning if they run the Adobe accessibility checker on their PDFs.
-prince-pdf-duplex*
-prince-pdf-duplex: auto | simplex | duplex-flip-short-edge | duplex-flip-long-edge
Initial value |
auto
|
---|---|
Applies to | @prince-pdf at-rule |
Inherited | no |
This descriptor may be used inside the
@prince-pdf
at-rule to set the Duplex
property in the
PDFViewerPreferences
dictionary.
-prince-pdf-event-scripts*
-prince-pdf-event-scripts: none | [ [ will-close | will-save | did-save | will-print | did-print ] <JavaScript> ]#
Initial value |
""
|
---|---|
Applies to | @prince-pdf at-rule |
Inherited | n/a |
@prince-pdf {
-prince-pdf-event-scripts: will-close "app.alert('This file is now closing!', 3)", will-print "app.alert('This file will be printed.', 1);";
}
This descriptor can be used to include JavaScript code that will be executed in the PDF when printing, saving, and closing the PDF, known as "Document Action" scripts.
Starting from Prince 15 this descriptor does not allow for the url()
function as an argument - to provide an external file, the command-line option
--prince-pdf-event-script
needs to be used instead.
Please be advised that these scripts are dependent on the PDF viewer, and in many cases might only work in Adobe Acrobat products.
-prince-pdf-form*
-prince-pdf-form: auto | enable | disable
Initial value |
auto
|
---|---|
Applies to | all form elements |
Inherited | no |
This property selectively enables or disables PDF form elements. It must be applied to each form element and is not inherited.
The default value auto
leaves behaviour up to the command-line option --pdf-forms
.
-prince-pdf-link-type*
-prince-pdf-link-type: [ auto | file ]? [ same-window | new-window ]? | web
Initial value |
auto
|
---|---|
Applies to | hyperlink elements |
Inherited | no |
This property controls whether relative links should be embedded in the PDF as web (URL) links or file links (by default they will be resolved against the base URL of the input document), and whether to open the links in the same or a new window.
Note however that the optional link target keywords same-window
and new-window
only affect links to local PDF files.
The values auto
and file
are optional, and are treated
as auto
if missing.
-prince-pdf-open-action*
-prince-pdf-open-action: none | [ print | command( <ident> ) | zoom( fit-page | fit-width | fit-height | <percent> ) ]+
Initial value |
none
|
---|---|
Applies to | @prince-pdf at-rule |
Inherited | n/a |
@prince-pdf {
-prince-pdf-open-action: zoom(fit-page) print;
}
This descriptor specifies a space-separated list of actions to perform when the PDF file is opened, like e.g. popping up the print dialog box automatically, or setting the default zoom level for PDF documents. Any arbitrary identifier can be specified, although these may be PDF viewer specific; Acrobat can take just about any menu item.
-prince-pdf-output-intent*
-prince-pdf-output-intent: auto | url( <filename> )
Initial value |
auto
|
---|---|
Applies to | @prince-pdf at-rule |
Inherited | n/a |
@prince-pdf {
-prince-pdf-output-intent: url("ISOcoated_v2_eci.icc")
}
This descriptor is used inside a @prince-pdf
at-rule to select the intended output color space of the generated PDF file.
-prince-pdf-page-colorspace*
-prince-pdf-page-colorspace: auto | none | rgb | cmyk | gray
Initial value |
auto
|
---|---|
Applies to | @page at-rule |
Inherited | no |
@page {
-prince-pdf-page-colorspace: cmyk;
}
This CSS at-rule descriptor can control the colorspace of pages in the PDF
file, which affects blending of transparent content. The keyword
auto
uses the output intent color space or the destination
color space when color conversion is enabled, or falls back to
rgb
in the absence of a specified output intent.
-prince-pdf-page-label*
-prince-pdf-page-label: auto | <content>
Initial value |
auto
|
---|---|
Applies to | @page at-rule |
Inherited | n/a |
@page {
-prince-pdf-page-label: counter(page, lower-roman)
}
This CSS at-rule descriptor can be used to set the page label that will be displayed in the PDF viewer.
Several ways of creating content are here defined by means of functions - the detailed explanation can be found in the Generated Content Functions section.
-prince-pdf-page-layout*
-prince-pdf-page-layout: auto | single-page | two-page | two-page-left | two-page-right | one-column | two-column | two-column-left | two-column-right
Initial value |
auto
|
---|---|
Applies to | @prince-pdf at-rule |
Inherited | n/a |
@prince-pdf {
-prince-pdf-page-layout: two-column
}
This descriptor can be used to set the default page layout for the PDF file when it is opened. For example, whether the PDF pages should be displayed in one or two columns.
-prince-pdf-page-mode*
-prince-pdf-page-mode: auto | show-attachments | show-bookmarks | fullscreen
Initial value |
auto
|
---|---|
Applies to | @prince-pdf at-rule |
Inherited | n/a |
@prince-pdf {
-prince-pdf-page-mode: show-bookmarks
}
This descriptor can be used to set the default page mode for the PDF file when it is opened. For example, whether the bookmarks panel should be displayed, and whether the viewer should be fullscreen.
-prince-pdf-paper-tray*
-prince-pdf-paper-tray: auto | pick-tray-by-pdf-size
Initial value |
auto
|
---|---|
Applies to | @prince-pdf at-rule |
Inherited | n/a |
@prince-pdf {
-prince-pdf-paper-tray: pick-tray-by-pdf-size
}
This descriptor controls the PickTrayByPDFSize flag in generated PDF files, which specifies whether the PDF page size is used to select the input paper tray. (See the checkbox in the Acrobat print dialog).
-prince-pdf-print-scaling*
-prince-pdf-print-scaling: auto | none
Initial value |
auto
|
---|---|
Applies to | @prince-pdf at-rule |
Inherited | n/a |
@prince-pdf {
-prince-pdf-print-scaling: none
}
This descriptor can be used to disable print scaling for the PDF file when it is printed.
-prince-pdf-profile*
-prince-pdf-profile: none | <Profile>
Initial value |
none
|
---|---|
Applies to | @prince-pdf at-rule |
Inherited | n/a |
@prince-pdf {
-prince-pdf-profile: "PDF/X-3:2003"
}
PDF Profiles are used to optimize the PDF file for its specific use - for more details and the supported PDF profiles, see PDF Versions and Profiles.
-prince-pdf-script*
-prince-pdf-script: <JavaScript>
Initial value |
""
|
---|---|
Applies to | @prince-pdf at-rule |
Inherited | n/a |
@prince-pdf {
-prince-pdf-script: "this.print();"
}
This descriptor can be used to include JavaScript code that will be executed when the PDF file is opened. A common use case is to activate the "Print" dialog automatically.
Starting from Prince 15 this descriptor does not allow for the url()
function as an argument - to provide an external file, the command-line option
--prince-pdf-script
needs to be used instead.
Please be advised that these scripts are dependent on the PDF viewer, and in many cases might only work in Adobe Acrobat products.
-prince-pdf-tag-type*
-prince-pdf-tag-type: auto | Part | Art | Sect | Div | Index | BlockQuote | Caption | TOC | TOCI | P | H1 | H2 | H3 | H4 | H5 | H6 | OL | UL | LI | Lbl | DL | DL-Div | DT | DD | Span | Quote | Table | BibEntry | Code | Figure | Formula | Artifact | Note | Reference | none
Initial value |
auto
|
---|---|
Applies to | all elements |
Inherited | n/a |
ul.toc {
-prince-pdf-tag-type: TOC;
}
.toc li {
-prince-pdf-tag-type: TOCI;
}
This property is used to influence tagged PDF for XML vocabularies or when using custom HTML classes. The possible values are PDF tag types.
The special value none
can be used to make specific elements (such as e.g. wrapper span or block elements) transparent in a tagged PDF structure tree.
-prince-pdf-xmp*
-prince-pdf-xmp: url( <filename> )
Initial value |
""
|
---|---|
Applies to | @prince-pdf at-rule |
Inherited | n/a |
@prince-pdf {
-prince-pdf-xmp: url("xmp-file.xmp");
}
This descriptor can be used inside a @prince-pdf
rule to add XMP metadata to a PDF file. Currently it takes an XMP
file as input and includes data from the <x:xmpmeta> element
and its contents (the xpacket processing instructions are ignored, as
Prince generates those itself when it produces the PDF file).
This descriptor requires either a URL pointing to an XMP
file, or an encoded data:
URL.
-prince-resize-adjust*
-prince-resize-adjust: margin | margin-start | margin-end | padding | padding-start | padding-end
Initial value |
margin
|
---|---|
Applies to | block-level boxes |
Inherited | no |
This property controls where space is added for either
-prince-baseline-grid
or
-prince-resize-options
.
The *-start
values adjust space before the box’s content,
*-end
values adjust space after the box’s content,
while the plain margin
and padding
values add half of the space adjustment before and half after.
The initial value is margin
, i.e. the requested adjustment
is devided equally between top and bottom margin. However, for
@footnotes
region, Prince by default sets this property
to margin-top
.
In particular, if a box is split across more than one page, then the adjustment is applied only before the first fragment of that box and/or after the last fragment of that box.
The padding*
values adjust space inside the border (if any),
while the margin*
values adjust space outside of the border.
For the margin*
values, there is a difference in behaviour between
whether the adjustment is for baseline grid or for pagination flexibility:
-prince-resize-options
literally changes the used value of the
margin
properties, so is subject to
margin collapsing
and
margin truncation,
and consequently might not affect the resulting collapsed & truncated margin
by the full amount.
Whereas baseline grid alignment must add space somewhere,
so it might best be described as adding space outside of the border rather
than exactly increasing the used value of margin
properties:
this extra space is not truncated if it occurs immediately after a page break;
and if space needs to be added to the last fragment of a box split split across
more than one page, then space can be added at padding-end or margin-end
even if -prince-resize-adjust
is padding-start
or margin-start
respectively.
This property only applies to Prince for Books.
-prince-resize-options*
-prince-resize-options: none | <length>+
Initial value |
none
|
---|---|
Applies to | block-level boxes |
Inherited | no |
.chapter>h2 { -prince-resize-options: 1rem; -prince-resize-adjust: padding; }
blockquote { margin: 1rem; -prince-resize-options: -1rem; }
@footnotes { -prince-resize-options: 1rem, 2rem; }
This property allows Prince for Books to add or remove space around a block-level box in order to influence where unforced page breaks fall within the text, or to avoid an obvious gap at the end of a page.
Where space is changed is specified by the
-prince-resize-adjust
property.
Unlike the current implementation of baseline grid in Prince for Books,
the adjustment is made to the used value of the margin or padding:
for example, the adjustment is affected by
margin collapsing
and
margin truncation.
If you wish to avoid margin truncation then consider setting
-prince-resize-adjust
to change padding rather than margin.
If more than one length is given, then earlier lengths are preferred over later lengths: e.g. ‘1rlh, -1rlh’ means that it is better to add space than to remove space.
This property only applies to Prince for Books.
-prince-rotate-body*
-prince-rotate-body: portrait | landscape | <angle>
Initial value |
0deg
|
---|---|
Applies to | @page at-rule |
Inherited | n/a |
@page {
-prince-rotate-body: landscape
}
This CSS at-rule descriptor can be used to rotate the page body, e.g. to fit landscape content on a portrait page, while leaving the headers and footers where they are.
The angle value takes multiples of 90deg
.
Please see the size
property for determining
the default orientation of the page.
-prince-shrink-to-fit*
-prince-shrink-to-fit: none | auto
Initial value |
none
|
---|---|
Applies to | @page at-rule |
Inherited | n/a |
@page {
-prince-shrink-to-fit: auto
}
Specifying a value of auto
will result in wide web pages being scaled
down in size to fit the paper width.
The scaling is calculated on the content's width, and not its height.
-prince-spread-length-options*
-prince-spread-length-options: none | [ shorten | lengthen ] <length>?
Initial value |
none
|
---|---|
Applies to | @page at-rule |
Inherited | n/a |
@page { -prince-spread-length-options: shorten; }
This property allows Prince for Books to reduce (or increase) the page content box height of a page and its facing page by the same amount, in order to influence where within the text unforced page breaks fall.
The page padding/border/margin does not change, nor does the page footer move. (Keep this in mind when styling page footers if you set this property to allow lengthening the page content area.)
Aside: This pagination technique is fairly common in novels written in English (about 50% of books not using feathering, and a smaller percentage of books that do use feathering); but is much rarer in novels in other languages. It is of course more common in some other types of book, such as those with space between paragraphs. Of novels in English that do change spread length, most only shorten, a few only lengthen, and a few shorten some spreads while lengthening others (so long as a shortened and a lengthened spread aren't directly adjacent to each other).
This property only applies to Prince for Books.
-prince-table-column-span*
-prince-table-column-span: <number> | attr( <colspan> )
Initial value |
1
|
---|---|
Applies to | table cells |
Inherited | no |
This property applies to table cells and determines the number of table columns spanned by the table cell. See the Tables documentation for more details.
The property table-column-span
can be used as an alias.
-prince-table-row-span*
-prince-table-row-span: <number> | attr( <rowspan> )
Initial value |
1
|
---|---|
Applies to | table cells |
Inherited | no |
This property applies to table cells and determines the number of table rows spanned by the table cell. See the Tables documentation for more details.
The property table-row-span
can be used as an alias.
-prince-text-justify*
-prince-text-justify: auto | prince-cjk
Initial value |
auto
|
---|---|
Applies to | text elements |
Inherited | yes |
This property defines how to treat justified text.
The value prince-cjk
allows space to be inserted between CJK
characters when justifying even if there aren't any space characters.
The property text-justify
can be used as an alias.
-prince-text-replace*
-prince-text-replace: none | [ <search> <replace> ]+
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
body {
-prince-text-replace: "s" "\017F"
"\017F\20" "s\20";
}
This property can be used to replace a character string with another one. In the above example, all occurrences of "s" are replaced with the "long s", except if in the end of a word, where the replacement is reversed.
-prince-text-wrap*
-prince-text-wrap: body | heading | title-page | body-greedy | body-lookahead | heading-greedy | heading-lookahead | title-page-greedy | title-page-lookahead | fast
Initial value |
body
|
---|---|
Applies to | all elements |
Inherited | yes |
This property is used for fine tuning the line breaking approach.
The keyword title-page
is intended for title pages of books or
chapters, where phrasing considerations are of prime consideration even
at the cost of extremely unbalanced lines, or using more lines than are necessary.
The keyword heading
, on the other hand, is closer to
body
, differing mainly in that it's less likely to hyphenate,
and is more willing to make the first line(s) a little shorter if doing so
avoids a short last line.
The keyword fast
can be used for quick web-browser-style line
breaking, useful for testing the effect of styling changes that don't depend
on good line breaking.
Values other than fast
currently have no effect on justified
paragraphs.
The *-greedy
and *-lookahead
variations
allow control over whether the choice of where to end a line
can be affected by consequences further down the paragraph:
The *-greedy
keywords decide on line breaks solely based on the
current line and on the length of the next word, never going back to change a
decision on a line in the light of line-breaking issues encountered later.
The *-lookahead
keywords, on the other hand,
enable paragraph-at-a-time line-breaking for the paragraph in
a non-justified paragraph:
choosing where to end the line not just based on what seems best for
the current line, but also considering the effect on future lines.
Considering a whole paragraph at once like this
would result in better line breaks in most paragraphs;
but software is not human, and where it does misjudge,
the results might look gratuitously or incomprehensibly bad.
Another difference is that the lookahead versions are noticeably slower (if used for a large proportion of the text in a book).
The default at present is to use paragraph-at-a-time line breaking for heading
and title-page
,
while still using simple line-at-a-time line breaking for body
.
To those who would usually check and tweak line breaks in ragged text before publication,
we suggest that paragraph-at-a-time line breaking will give you a better starting point:
body { -prince-line-break-choices: body-lookahead }
For more information on how to influence line breaks, please see Line breaking.
This property only applies to Prince for Books.
The property -prince-line-break-choices
can be used as an alias.
-prince-tooltip*
-prince-tooltip: transparent | none | normal | <content>
Initial value |
transparent
|
---|---|
Applies to | all elements |
Inherited | no |
*[title] {
-prince-tooltip: attr(title)
}
The -prince-tooltip
property can be used to create a tooltip when
hovering an element in the PDF file. The keyword none
actually
"suppresses" tooltips, which means that it will not show any tooltip for
objects underneath the selected element, that might have a tooltip. An empty
string, or some content that evaluates to an empty string, is treated
equivalent to none
, rather than showing an empty tooltip.
Several ways of creating content are here defined by means of functions - the detailed explanation can be found in the Generated Content Functions section.
Tooltips are not a standard PDF feature, and they may only work in Adobe Reader and Adobe Acrobat and may not be visible in other PDF viewers, such as web browsers.
-prince-trim*
-prince-trim: auto | <length>{1,4}
Initial value |
auto
|
---|---|
Applies to | @page at-rule |
Inherited | n/a |
@page {
-prince-trim: 60mm
}
This CSS at-rule descriptor can be used to specify the size of the trim area of the page when crop marks are enabled.
-prince-wrap-inside*
-prince-wrap-inside: auto | phrase | avoid
Initial value |
auto
|
---|---|
Applies to | all elements |
Inherited | no |
-prince-wrap-inside:phrase
is for marking up a phrase
that one would weakly prefer to keep on a single line.
It adds to Prince's perceived cost of breaking within that phrase, but only a small cost, comparable to the cost of hyphenating a compound adjective such as ‘midyear’.
-prince-wrap-inside:avoid
is a stronger directive:
it avoids breaking the text to which the property is applied even if
it causes the affected text to be unusually tight, or the previous
line to be unusually loose;
but not if either line would become truly exceptionally tightly
or loosely spaced.
This property only applies to Prince for Books.
size
size: <paper-size> | <length> <length> [ landscape | portrait ]?
Initial value |
Letter
|
---|---|
Applies to | @page at-rule |
Inherited | n/a |
@page { size: A4 }
@page { size: A4 landscape }
@page { size: Letter }
@page { size: 10cm 5cm }
This CSS at-rule descriptor, used with the
@page
at-rule, defines
the size and orientation of the page. Please see also the
-prince-rotate-body
property to control the
orientation of selected pages.
src
src: [ url( <filename> ) [ format( [ <format> ]+ ) ]? | local( <name> ) | prince-lookup( <name> ) ]+
Initial value |
n/a
|
---|---|
Applies to | @font-face at-rule |
Inherited | n/a |
@font-face {
font-family: MyFontA;
src: local("Local_Font_A");
}
@font-face {
font-family: MyFontB;
src: prince-lookup("MyFontA");
}
This CSS at-rule descriptor, used with the
@font-face
at-rule,
specifies the resource containing font data. It is required for the @font-face
rule to be valid.
Prince supports WOFF (Web Open Font Format), TrueType and OpenType font formats,
expressed respectively by the woff
, truetype
and
opentype
format hints with the optional format()
function.
The local()
function searches for locally installed system
fonts, while prince-lookup()
will also find fonts defined by
other @font-face
rules.
stop-opacity
stop-opacity: <number>
Initial value |
1
|
---|---|
Applies to | SVG elements |
Inherited | no |
The stop-opacity
property only applies to SVG elements.
string-set
string-set: none | [ <ident> <content> ]#
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
This property can be used to create a named string, which may then be referenced
from the content
property to create generated
content. Typically this is achieved with the content()
function,
which retrieves the text of the selected element.
But any other means of generating content, as described in the Generated Content Functions section, are available. See also Page regions for more details.
stroke
stroke: none | <color> | url( <paint-server> ) [ none | <color> ]?
Initial value |
none
|
---|---|
Applies to | SVG elements |
Inherited | yes |
The stroke
property only applies to SVG elements.
stroke-dasharray
stroke-dasharray: none | [ <length> | <percent> ]+
Initial value |
none
|
---|---|
Applies to | SVG elements |
Inherited | yes |
The stroke-dasharray
property only applies to SVG elements. It
takes a comma or
whitespace separated list of lengths or percentages as argument.
stroke-dashoffset
stroke-dashoffset: <length> | <percent>
Initial value |
0
|
---|---|
Applies to | SVG elements |
Inherited | yes |
The stroke-dashoffset
property only applies to SVG elements.
stroke-linecap
stroke-linecap: butt | round | square
Initial value |
butt
|
---|---|
Applies to | SVG elements |
Inherited | yes |
The stroke-linecap
property only applies to SVG elements.
stroke-linejoin
stroke-linejoin: miter | round | bevel
Initial value |
miter
|
---|---|
Applies to | SVG elements |
Inherited | yes |
The stroke-linejoin
property only applies to SVG elements.
stroke-miterlimit
stroke-miterlimit: <number>
Initial value |
4
|
---|---|
Applies to | SVG elements |
Inherited | yes |
The stroke-miterlimit
property only applies to SVG elements.
stroke-opacity
stroke-opacity: <number>
Initial value |
1
|
---|---|
Applies to | SVG elements |
Inherited | yes |
The stroke-opacity
property only applies to SVG elements.
stroke-width
stroke-width: <length> | <percent>
Initial value |
1
|
---|---|
Applies to | SVG elements |
Inherited | yes |
The stroke-width
property only applies to SVG elements.
table-baseline*
table-baseline: <number>
Initial value |
1
|
---|---|
Applies to | inline-table elements |
Inherited | no |
This property only applies to inline tables, and it determines which row is treated as the baseline for the purposes of vertical alignment. See the Inline tables documentation for more details.
table-column-span*
table-column-span: <number> | attr( <colspan> )
Initial value |
1
|
---|---|
Applies to | table cells |
Inherited | no |
This property applies to table cells and determines the number of table columns spanned by the table cell. See the Tables documentation for more details.
The property -prince-table-column-span
can be used as an alias.
table-row-span*
table-row-span: <number> | attr( <rowspan> )
Initial value |
1
|
---|---|
Applies to | table cells |
Inherited | no |
This property applies to table cells and determines the number of table rows spanned by the table cell. See the Tables documentation for more details.
The property -prince-table-row-span
can be used as an alias.
tab-size
tab-size: <number> | <length>
Initial value |
8
|
---|---|
Applies to | block containers |
Inherited | yes |
This property determines the tab-size for preserved tab characters (U+0009). An integer defines number of spaces in a tab, a length represents the width of a tab.
Please note that Prince replaces preserved tab characters with the specified number of spaces, but does not create actual "tab stops" aligned to the left edge of the block.
text-align
text-align: <'text-align-all'> <'text-align-last'>?
Initial value |
start
|
---|---|
Applies to | block containers |
Inherited | yes |
The text-align
property is a shorthand for
setting the following CSS properties:
Prince implements a two-value syntax, where the second, optional value allows the last line of an element to receive its own alignment.
Please note that while the property text-align-last
is not
a Prince extension, allowing it as a second value is a custom extension.
text-align-all
text-align-all: start | end | left | right | inside | outside | center | justify
Initial value |
start
|
---|---|
Applies to | block containers |
Inherited | yes |
This property is not usually accessed directly, but rather as a longhand of
the text-align
property.
It controls the alignment of lines other than the last line of the paragraph.
This property can also be set by the text-align
shorthand.
text-align-last
text-align-last: auto | start | end | left | right | inside | outside | center | justify
Initial value |
auto
|
---|---|
Applies to | block containers |
Inherited | yes |
This property allows the last line of an element to receive its own alignment style.
This property can also be set by the text-align
shorthand.
text-anchor
text-anchor: start | middle | end
Initial value |
start
|
---|---|
Applies to | SVG elements |
Inherited | yes |
The text-anchor
property only applies to SVG text elements.
text-decoration
text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
The text-decoration
property is a shorthand for
setting the following CSS properties:
text-decoration-color
text-decoration-color: <color>
Initial value |
currentcolor
|
---|---|
Applies to | all elements |
Inherited | no |
This property can also be set by the text-decoration
shorthand.
text-decoration-line
text-decoration-line: none | [ underline || overline || line-through ]
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
Please note that even though this property is defined as not being inherited, the property's specification gives a much more nuanced explanation - check the specification's chapter Line Decoration: Underline, Overline, and Strike-Through.
This property can also be set by the text-decoration
shorthand.
text-decoration-style
text-decoration-style: solid | double | dotted | dashed | wavy
Initial value |
solid
|
---|---|
Applies to | all elements |
Inherited | no |
This property can also be set by the text-decoration
shorthand.
text-indent
text-indent: <length-percentage> hanging?
Initial value |
0
|
---|---|
Applies to | block containers |
Inherited | yes |
This property determines the indentation of the first line of text in
the element. If the hanging
keyword is added after the
length, a hanging indent will be created by applying the
indentation to every line of text but the first.
text-justify*
text-justify: auto | prince-cjk
Initial value |
auto
|
---|---|
Applies to | text elements |
Inherited | yes |
This property defines how to treat justified text.
The value prince-cjk
allows space to be inserted between CJK
characters when justifying even if there aren't any space characters.
The property -prince-text-justify
can be used as an alias.
text-line-through
text-line-through: <color> || <'text-line-through-style'>
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
The text-line-through
property is a shorthand for
setting the following CSS properties:
text-line-through-color
text-line-through-color: <color>
Initial value |
CurrentColor
|
---|---|
Applies to | all elements |
Inherited | no |
text-line-through-style
text-line-through-style: none | solid | dashed | dotted
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
text-overflow
text-overflow: clip | ellipsis
Initial value |
clip
|
---|---|
Applies to | block container elements |
Inherited | no |
text-overline
text-overline: <color> || <'text-overline-style'>
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
The text-overline
property is a shorthand for
setting the following CSS properties:
text-overline-color
text-overline-color: <color>
Initial value |
CurrentColor
|
---|---|
Applies to | all elements |
Inherited | no |
text-overline-style
text-overline-style: none | solid | dashed | dotted
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
text-shadow
text-shadow: none | [ <color>? && <length>{2,3} ]#
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | yes |
text-transform
text-transform: none | lowercase | uppercase | capitalize
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | yes |
text-underline
text-underline: <color> || <'text-underline-style'>
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
The text-underline
property is a shorthand for
setting the following CSS properties:
text-underline-color
text-underline-color: <color>
Initial value |
CurrentColor
|
---|---|
Applies to | all elements |
Inherited | no |
text-underline-position
text-underline-position: auto | [ under || [ left | right ] ]
Initial value |
auto
|
---|---|
Applies to | all elements |
Inherited | yes |
text-underline-style
text-underline-style: none | solid | dashed | dotted
Initial value |
none
|
---|---|
Applies to | all elements |
Inherited | no |
transform
transform: none | [ rotate( <angle> ) | translate( <length-percentage>, <length-percentage>? ) | translatex( <length-percentage> ) | translatey( <length-percentage> ) | translate3d( <length-percentage>, <length-percentage>, <length-percentage> ) | scale( <number>, <number>? ) | scalex( <number> ) | scaley( <number> ) | skew( <angle>, <angle>? ) | skewx( <angle> ) | skewy( <angle> ) | matrix( <number>, <number>, <number>, <number>, <number>, <number> ) ]+
Initial value |
none
|
---|---|
Applies to | transformable elements |
Inherited | no |
Please note that the function translate3d()
is supported if the
Z (third) coordinate is zero, thus making it equivalent to the 2D translate()
.
Also note that this property currently does not affect SVG elements - they
need to use their own transform
attribute instead.
transform-origin
transform-origin: [ center | left | right | top | bottom | <length-percentage> ]{1,2}
Initial value |
50% 50%
|
---|---|
Applies to | transformable elements |
Inherited | no |
If only one term is given, then the second is assumed to be center
.
In particular, if only a percentage or length is given, then it is assumed to be the
horizontal coordinate.
Either one or two coordinates can be given, and if both values are given
as keywords, order doesn't matter; but if two coordinates are given and either
coordinate is a length or percentage, then the horizontal component must come
first: so top 50%
is not valid, but top
and
top center
and 50% top
are all valid and equivalent.
unicode-bidi
unicode-bidi: normal | embed | bidi-override
Initial value |
normal
|
---|---|
Applies to | all elements |
Inherited | no |
unicode-range
unicode-range: <urange>+
Initial value |
U+0-10FFFF
|
---|---|
Applies to | @font-face at-rule |
Inherited | n/a |
@font-face {
unicode-range: U+0025-00FF;
}
This CSS at-rule descriptor, used with the
@font-face
at-rule,
defines the set of Unicode codepoints that may be supported by the font face
for which it is declared. The descriptor value is a comma-delimited list of
Unicode range (<urange>) values. The union of these ranges defines the
set of codepoints that serves as a hint for user agents when deciding whether
or not to download a font resource needed for the test content of a particular
page.
vertical-align
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length-percentage>
Initial value |
baseline
|
---|---|
Applies to | inline-level and table-cell elements |
Inherited | no |
visibility
visibility: visible | hidden
Initial value |
visible
|
---|---|
Applies to | all elements |
Inherited | yes |
This property can be used to make the content of an element invisible.
Unlike using display: none
, the element will
still take up space on the page and its descendants may still have
visible content.
white-space
white-space: normal | pre | pre-wrap | pre-line | nowrap
Initial value |
normal
|
---|---|
Applies to | all elements |
Inherited | yes |
widows
widows: [ [ <integer> | <percent> -prince-full ] [ , -prince-prefer <integer> | <percent> -prince-full ]? ] | -prince-prefer [ <integer> | <percent> -prince-full ]
Initial value |
1
|
---|---|
Applies to | “paragraphs”: block container boxes that establish an inline formatting context |
Inherited | yes |
If a paragraph is split over two pages or columns, this property determines the minimum number of lines that must be left at the top of the page or column at the end of the paragraph.
The initial value has been changed from 2
to 1
.
The following additional features only apply to Prince for Books.
Prince for Books also supports a percentage value followed by the keyword
-prince-full
, which indicates that one widow line is accepted,
as long as the line width is at least the given percentage value of the
available page width, to avoid the worst case of having a widow line that
is only one or two words long. For more details see
Fractional Widows.
In Prince for Books a value can be preceded by the keyword -prince-prefer
,
which turns the requirement into a preference.
An amount preceded by -prince-prefer
is a request that Prince for Books will try to satisfy,
but not at the cost of introducing an obvious gap at the end of the
previous column or page:
it will only use whatever flexibility has been granted with
-prince-change-line-breaks-for-pagination
,
-prince-spread-length-options
or
-prince-resize-options
.
The property additionally can take a second, optional, comma-separated value expressed with the additional keyword -prince-prefer. It is useful in case the preference, expressed with the additional keyword, is a bigger amount than the hard requirement expressed in the first value.
width
width: auto | min-content | max-content | <length-percentage> | min-content | max-content
Initial value |
auto
|
---|---|
Applies to | all elements but non-replaced inline elements, table rows, and row groups |
Inherited | no |
The values min-content
and max-content
do not affect
auto table layout.
word-break
word-break: normal | keep-all | break-all
Initial value |
normal
|
---|---|
Applies to | all elements |
Inherited | yes |
Prince does not support the value break-word
. Use
the value break-all
or the property overflow-wrap
with the value break-word
instead.
word-spacing
word-spacing: normal | <length-percentage>
Initial value |
normal
|
---|---|
Applies to | all elements |
Inherited | yes |
writing-mode
writing-mode: horizontal-tb | vertical-rl
Initial value |
horizontal-tb
|
---|---|
Applies to | all elements, except table row groups, table column groups, table rows, table columns, and SVG |
Inherited | yes |
Please note that this property currently does not apply to SVG.