CSS Properties
Below are all of the CSS properties supported by Prince. For their precise definitions please refer to the CSS specifications.
* 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 prince- prefix, Prince accepts -prince- as a vendor prefix for Prince-specific CSS properties to comply with validators.
For the values, the grammar draws on the CSS Values and Units Module Level 3 specification - with the notable exception of the meaning of an asterisk (*), as explained above. 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.
- 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 pair of numbers in curly braces, separated by two dots ({A..B}**) indicates that the preceding item occurs at least A and at most B times.
Toggle (open/close) all properties
--custom-property-name
--custom-property-name: declaration-value| Initial value | nothing |
|---|---|
| Applies to | all elements |
| Inherited | yes |
This property family, called custom properties, 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 here.
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 | space-between | space-around| Initial value | auto |
|---|---|
| Applies to | flex items |
| Inherited | no |
alternate-color*
alternate-color: color| Initial value | |
|---|---|
| Applies to | @prince-color at-rule |
| Inherited | no |
@prince-color TestColor { alternate-color: cmyk(1, 0, 0, 0) }
color: prince-color(TestColor)This @prince-color at-rule 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-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.
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 | percent
| [ left | center | right | length | percent ]
[ top | center | bottom | length | percent ]
| [ [ center | [ left | right ] [ length percent ]? ]
&& [ center | [ left | right ] [ length percent ]? ] ]| 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.
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.
background-size
background-size: [ contain | cover | [ auto | length | percent ]{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 |
@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.
border-clip
border-clip: normal | length | percent| Initial value | normal |
|---|---|
| Applies to | footnotes |
| Inherited | no |
Please note that currently this property only applies to footnotes.
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.
border-radius
border-radius: [ length | percent ]{1..2}| Initial value | 0 |
|---|---|
| Applies to | all elements |
| Inherited | no |
border-bottom-left-radius
border-bottom-left-radius: [ length | percent ]{1..2}| Initial value | 0 |
|---|---|
| Applies to | all elements |
| Inherited | no |
border-bottom-right-radius
border-bottom-right-radius: [ length | percent ]{1..2}| Initial value | 0 |
|---|---|
| Applies to | all elements |
| Inherited | no |
border-top-left-radius
border-top-left-radius: [ length | percent ]{1..2}| Initial value | 0 |
|---|---|
| Applies to | all elements |
| Inherited | no |
border-top-right-radius
border-top-right-radius: [ length | percent ]{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.
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.
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 |
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 | 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 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.
See the documentation for Page breaks for more details.
break-before
break-before: auto | 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.
See the documentation for Page breaks for more details.
break-inside
break-inside: auto | 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| 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.
clip
clip: auto | rect( offset, offset, offset, offset )| Initial value | auto |
|---|---|
| Applies to | absolutely positioned elements |
| Inherited | no |
This property determines the clipping rectangle for absolutely
positioned elements (ie. elements with a position
value of absolute or
fixed).
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.
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 | 1 |
|---|---|
| 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.
column-span
column-span: number | none | all| Initial value | 1 |
|---|---|
| Applies to | in-flow block-level elements |
| Inherited | no |
A numeric column-span value other than 1 will only affect column floats.
The keyword none is treated as equivalent to the numeric value 1.
column-width
column-width: auto | width| 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 | 1 |
|---|---|
| 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 | 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, content? ) | prince-glyph-index( number ) | prince-fallback( url ) [ , content+ ]? | element( name ) ]+| Initial value | normal |
|---|---|
| Applies to | all elements, tree-abiding pseudo-elements, and page regions |
| Inherited | no |
The content property can be used to insert text and other content
into the original document. The uses are 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 |
| 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 |
| 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 )| 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{1..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: content | width| 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-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
float:
none | left | right | inside | outside
| footnote | inline-footnote
| prince-column-footnote
| prince-column-inline-footnote
| prince-snap
| [ [ top | bottom | column-top | column-bottom
| column-top-corner | column-bottom-corner ]
&& [ next | unless-fit ]? ]| Initial value | none |
|---|---|
| Applies to | all elements |
| Inherited | no |
Traditionally, floats move in the inline direction, left or right. Prince extends this behavior with page 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.
The values top or bottom float the element to, respectively,
the top or the bottom of the page.
The values column-top and column-bottom float the element
to the top or bottom of the column it appears in.
The values column-top-corner and column-bottom-corner
float the element to the top or bottom of the last column, rather than its natural
column.
The value prince-snap floats the element to the nearest "end", i.e.
to the top or bottom of the page, or of the column in the case of a multi-column
layout.
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. When these values are used in
a multi-column layout, the element is floated to the inside or outside of the
column it appears in its natural flow.
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 values prince-column-footnote and prince-column-inline-footnote
behave in an analogous way, but move the footnote not to the bottom of the page,
but to the bottom of its column instead.
The additional modifier next defers the float to the next column in
a multi-column layout, otherwise it defers the float to the next page.
The modifier unless-fit expresses a conditional: the element is only
floated if it would otherwise cause a page or column break.
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? font-variant? font-weight? 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 | "name" ]# prince-no-fallback?| Initial value | serif |
|---|---|
| Applies to | all elements / @font-face at-rule |
| Inherited | yes |
font-family: Georgia, "Times New Roman", seriffont-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.
font-size
font-size: length | percent | 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 |
| Inherited | yes |
The font-stretch property is not supported for system
fonts on Windows.
font-style
font-style: normal | italic| Initial value | normal |
|---|---|
| Applies to | all elements |
| Inherited | yes |
font-variant
font-variant: normal | small-caps | prince-no-kerning | prince-opentype( [ feature ]+ )| Initial value | normal |
|---|---|
| Applies to | all elements |
| Inherited | yes |
<span style="font-family: SpecialFont; font-variant: prince-opentype(aalt(2))">&</span>font-variant: prince-opentype(onum, ccmp, liga)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, eg. 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 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.
font-weight
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900| Initial value | normal |
|---|---|
| Applies to | all elements |
| 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 | length | percent | 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| 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.
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 | 1 |
|---|---|
| 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 | 1 |
|---|---|
| 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: none | from-image| Initial value | none |
|---|---|
| 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).
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 |
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.
line-height
line-height: normal | none | number | length | percent| 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: 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 | percent ]{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-inside*
margin-inside: auto | length | percent| 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.
margin-outside*
margin-outside: auto | length | percent| 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.
marker-start
marker-start: none | url( marker-url )| Initial value | none |
|---|---|
| Applies to | SVG elements |
| Inherited |
The marker-start property only applies to SVG elements.
marker-mid
marker-mid: none | url( marker-url )| Initial value | none |
|---|---|
| Applies to | SVG elements |
| Inherited |
The marker-mid property only applies to SVG elements.
marker-end
marker-end: none | url( marker-url )| Initial value | none |
|---|---|
| Applies to | SVG elements |
| Inherited |
The marker-end property only applies to SVG elements.
marks
marks: none | [ crop || cross ]| Initial value | none |
|---|---|
| Applies to | @page at-rule |
| Inherited |
@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: 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 | length | percent| Initial value | none |
|---|---|
| Applies to | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited | no |
max-width
max-width: none | length | percent| Initial value | none |
|---|---|
| Applies to | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited | no |
min-height
min-height: auto | length | percent| Initial value | 0 |
|---|---|
| Applies to | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited | no |
min-width
min-width: auto | length | percent| Initial value | 0 |
|---|---|
| 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 | percent ] [ top | center | bottom | length | percent ]?
| [ [ left | right ] [ length | percent ] && [ top | bottom ] [ length | percent ] ]| 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| Initial value | 1 |
|---|---|
| Applies to | block container elements |
| 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.
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.
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.
padding
padding: [ length | percent ]{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.
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. Prince expands the property with the values verso and
recto.
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.
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.
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-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-expansion-text*
prince-expansion-text: auto | none | "string"| Initial value | auto |
|---|---|
| Applies to | abbr and acronym elements |
| Inherited | no |
abbr {
prince-expansion-text: attr(title);
}
This property can be used for the abbr and acronym
elements 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 |
@prince-pdf {
prince-pdf-output-intent: url("AdobeRGB1998.icc");
prince-fallback-cmyk-profile: url("ISOcoated_v2_eci.icc");
}
This property 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: dpi| Initial value | 96dpi |
|---|---|
| Applies to | all elements, @prince-pdf at-rule |
| Inherited |
This property is used to specify the resolution used when
rasterizing to images for applying CSS and SVG filters. It can be
used for individual elements, or inside a
@prince-pdf
at-rule. In this latter case, it affects all filters in the document.
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 | 1 |
|---|---|
| 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 | 1 |
|---|---|
| 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-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 | body-lookahead | heading-lookahead | title-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 is intended for title pages of books or
chapters, where phrasing considerations are of prime consideration even
at the cost of extremely unbalanced lines.
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 *-lookahead keywords 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.
The keyword fast can be used for quick web-browers–style line
breaking, useful for testing the effect of styling changes that don't depend
on good line breaking.
For more details, please see Line breaking.
This property only applies to Prince for Books.
The property prince-text-wrap can be used as an alias.
prince-mark-length*
prince-mark-length: length| Initial value | 24pt |
|---|---|
| Applies to | @page at-rule |
| Inherited |
@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 |
@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: width| Initial value | 0.1pt |
|---|---|
| Applies to | @page at-rule |
| Inherited |
@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-fill |
|---|---|
| Applies to | @page at-rule |
| Inherited | no |
This property determines whether Prince should balance text layout on page spreads.
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-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 )] [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.
The optional second argument is 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 property 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 property 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 property 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" | url ] ]#| Initial value | "" |
|---|---|
| Applies to | @prince-pdf at-rule |
| Inherited |
@prince-pdf {
prince-pdf-event-scripts: will-close url("onclose.js"), will-print url("onprint.js");
}This property 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.
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-link-type*
prince-pdf-link-type: [ auto | file ]? [ same-window | new-window ]? | web| Initial value | auto |
|---|---|
| Applies to | @prince-pdf at-rule |
| 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.
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 |
@prince-pdf {
prince-pdf-open-action: zoom(fit-page) print;
}This property specifies a space-separated list of actions to perform when the PDF file is opened, like eg. 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 |
@prince-pdf {
prince-pdf-output-intent: url("ISOcoated_v2_eci.icc")
}
This property 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 |
@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 |
@prince-pdf {
prince-pdf-page-layout: two-column
}This property 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 |
@prince-pdf {
prince-pdf-page-mode: show-bookmarks
}This property 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 |
@prince-pdf {
prince-pdf-paper-tray: pick-tray-by-pdf-size
}This property 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 |
@prince-pdf {
prince-pdf-print-scaling: none
}This property 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 |
@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" | url| Initial value | "" |
|---|---|
| Applies to | @prince-pdf at-rule |
| Inherited |
@prince-pdf {
prince-pdf-script: "this.print();"
}
This property 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. The script can be located in an
external JavaScript file, referenced with the url() function.
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| Initial value | auto |
|---|---|
| Applies to | all elements |
| Inherited |
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.
prince-pdf-xmp*
prince-pdf-xmp: url( filename )| Initial value | "" |
|---|---|
| Applies to | |
| Inherited |
@prince-pdf {
prince-pdf-xmp: url("xmp-file.xmp");
}
This property 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 property requires either a URL pointing to an XMP
file, or an encoded data: URL.
prince-rotate-body*
prince-rotate-body: portrait | landscape | angle| Initial value | 0deg |
|---|---|
| Applies to | @page at-rule |
| Inherited |
@page {
prince-rotate-body: landscape
}This CSS at-rule descriptor can be used to rotate the page body, eg. to fit landscape content on a portrait page, while leaving the headers and footers where they are.
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 |
@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.
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 | all 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.
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 | body-lookahead | heading-lookahead | title-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 is intended for title pages of books or
chapters, where phrasing considerations are of prime consideration even
at the cost of extremely unbalanced lines.
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 *-lookahead keywords 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.
The keyword fast can be used for quick web-browers–style line
breaking, useful for testing the effect of styling changes that don't depend
on good line breaking.
For more details, 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 |
@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.
(Limitation: At the time of writing, prince-wrap-inside only affects justified text.)
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 |
@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 |
@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 | yes |
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 )| 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 | table and inline-table elements |
| Inherited | no |
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.
text-align
text-align: left | right | inside | outside | center | justify| Initial value | left |
|---|---|
| Applies to | block containers |
| Inherited | yes |
text-align-last
text-align-last: left | right | inside | outside | center | justify| Initial value | left |
|---|---|
| Applies to | block containers |
| Inherited | yes |
This property allows the last line of an element to receive its own alignment style.
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: none | [ underline || overline || line-through ]| Initial value | none |
|---|---|
| Applies to | all elements |
| Inherited | no |
The text-decoration property is a shorthand for
setting the following CSS properties:
text-indent
text-indent: length | percent 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-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-style
text-underline-style: none | solid | dashed | dotted| Initial value | none |
|---|---|
| Applies to | all elements |
| Inherited | no |
transform
transform: none | [ rotate( angle ) | translate( offset, offset? ) | translatex( offset ) | translatey( offset ) | translate3d( offset, offset, offset ) | scale( number, number? ) | scalex( number ) | scaley( number ) | skewx( angle ) | skewy( angle ) ]+| 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 | percent | length ]{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 |
@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 | percent| 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| Initial value | 1 |
|---|---|
| Applies to | block container elements |
| 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 second page or column.
The percentage value only applies to Prince for Books, and 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.
width
width: auto | length | percent | 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 | percent| 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, and table columns |
| Inherited | yes |