CSS Properties Reference

CSS properties supported by XTS for styling layout elements and HTML content. Lengths take the units of XTS; em and % are relative to the font size or the containing block as in CSS.

Text

Property	Values	Example
font-family	Font family name or a comma separated list. A list falls back per glyph, the first family that has the glyph renders it	font-family: "Minion Pro", serif;
font-size	Length, em, %, the keywords xx-small to xxx-large, smaller and larger	font-size: 12pt;
font-weight	normal, bold, bolder, lighter, the names thin to black, or a number from 100 to 900	font-weight: 600;
font-style	normal, italic. oblique is not recognized	font-style: italic;
font-synthesis-style	auto, none. auto slants a family’s upright for an italic it lacks; the default is none, where the upright is used as it is	font-synthesis-style: auto;
font-synthesis	none, or any of weight, style, small-caps, position. Only style and small-caps are read, as font-synthesis-style and font-synthesis-small-caps	font-synthesis: style;
font-synthesis-small-caps	auto, none. auto (the default) sets small caps for a face without smcp as capitals at 70% of the size; none leaves the text as it is. Synthesized small caps are capitals in the PDF, so text extraction and search see SMALL CAPS, not Small Caps; a face with smcp keeps the original text	font-synthesis-small-caps: none;
font-variant-caps	normal, small-caps. Inherited. The face’s smcp feature when it has one, else synthesized (see font-synthesis-small-caps). Other values are read as normal	font-variant-caps: small-caps;
font-variant	normal, or values including small-caps. Only small-caps is read, as font-variant-caps	font-variant: small-caps;
font	Shorthand: optional font-style, small-caps and font-weight, then the size with an optional /line-height, then the family. Style, caps, weight and line height reset to normal when omitted, as in CSS. Size and family are required	font: italic bold 10pt/12pt serif;
font-feature-settings	Comma separated OpenType feature tags, each optionally followed by on, off or a number. normal removes all features	font-feature-settings: "smcp", "onum";
font-variation-settings	Comma separated pairs of an axis tag and a number, for variable fonts	font-variation-settings: "wght" 650;
color	Color value or a defined color name	color: #333;
text-align	left, right, center, justify, start, end	text-align: justify;
text-indent	Length, indents the first line	text-indent: 1em;
text-decoration	Shorthand for line, style and color	text-decoration: underline dotted red;
text-decoration-line	none, underline, overline, line-through	text-decoration-line: underline;
text-decoration-style	solid, double, dotted, dashed, wavy	text-decoration-style: wavy;
text-decoration-color	Color value	text-decoration-color: red;
line-height	normal, a number (factor of the font size) or a length, see Fonts	line-height: 1.4;
letter-spacing	normal or a length	letter-spacing: 0.05em;
white-space	normal, nowrap, pre, pre-wrap, pre-line	white-space: pre;
hyphens	auto, manual, none. manual and none both switch the language patterns off, soft hyphens (U+00AD) stay break opportunities	hyphens: none;
hanging-punctuation	none, allow-end	hanging-punctuation: allow-end;
vertical-align	baseline, sub, super, top, text-top, middle, bottom, text-bottom, a length or a percentage of the line height	vertical-align: super;
direction	ltr, rtl	direction: rtl;
unicode-bidi	normal, embed, isolate, bidi-override, isolate-override, plaintext	unicode-bidi: isolate;
tab-size	Number of spaces or a length	tab-size: 4;
initial-letter	Number of lines for a drop cap, or normal	initial-letter: 3;
user-select	Any value. Accepted and ignored, there is no selection in PDF	user-select: none;

Box model

Property	Values	Example
margin	One to four lengths, shorthand for the four sides	margin: 10pt;
margin-top, margin-right, margin-bottom, margin-left	Length	margin-top: 12pt;
padding	One to four lengths, shorthand for the four sides	padding: 5pt 10pt;
padding-top, padding-right, padding-bottom, padding-left	Length	padding-left: 10pt;
padding-inline-start	Length. Maps to padding-left for ltr and to padding-right for rtl	padding-inline-start: 2em;
width	Length or percentage, on blocks, images and table cells	width: 100%;
height	Length, on blocks, images, table rows and table cells. A minimum: content taller than the height is never clipped, a table row grows to fit its cells	height: 4cm;
max-width	Length or percentage, on images	max-width: 100%;
background-color	Color value, painted on block elements, inline elements and table cells	background-color: #ffffcc;
background	Shorthand, only the color is read	background: #ffffcc;
display	block, inline, none. Other values are ignored, the table parts follow from the HTML tags	display: none;

Borders

Property	Values	Example
border	Width, style and color in any order, all four sides	border: 1pt solid black;
border-top, border-right, border-bottom, border-left	Width, style and color for one side	border-top: 2pt solid red;
border-width	One to four lengths or thin, medium, thick	border-width: 1pt 0;
border-style	One to four border styles	border-style: solid none;
border-color	One to four colors	border-color: red black;
border-top-width, border-right-width, border-bottom-width, border-left-width	Length	border-left-width: 3pt;
border-top-style, border-right-style, border-bottom-style, border-left-style	none, solid. Every other CSS border style is drawn as solid	border-left-style: solid;
border-top-color, border-right-color, border-bottom-color, border-left-color	Color value	border-left-color: red;
border-radius	One length, the same for all four corners. Several values, one per corner, are not supported	border-radius: 3pt;
border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius	Length	border-top-left-radius: 3pt;
border-collapse	separate (the default, as in CSS), collapse; on tables	border-collapse: collapse;
border-spacing	One or two lengths, on tables in the separated model; the default is 2pt	border-spacing: 4pt 2pt;

Layout

Property	Values	Example
float	left, right, none; inside and outside pick the side towards or away from the binding on the page the float lands on, with the declared margin-left/margin-right swapped on left pages; top (or before) and bottom (or after) lift the element out of the flow to the top or bottom of the page	float: outside;
clear	left, right, inside, outside, both, none	clear: both;
position	static, relative, absolute, running(name) for running elements that repeat in page margin boxes. fixed and sticky are not supported. A relative block is offset by left or right only; a relative inline element by top or bottom only, which moves its text after the lines are set	position: absolute;
top, right, bottom, left	Length or auto, with position. On a relative inline element top wins over bottom, a percentage computes to auto, and left and right have no effect. The text and its background move; an underline stays where it was	top: 1cm;
z-index	Integer or auto, with position	z-index: 1;
page-break-before, break-before	auto, always, avoid; break-before also takes page, left, right, recto, verso. In a Flow, column continues in the next frame of the area, page on the next page, left and verso on the next left (even) page, right and recto on the next right (odd) one. A forced break is taken at any depth; on a block’s first child it applies to the block itself	page-break-before: always;
page-break-after, break-after	Same values as page-break-before. Acts in a Flow as break-before does, avoid keeps a block with the next one, such as a heading with its first paragraph. A forced break is taken at any depth; on a block’s last child it applies to the block itself	page-break-after: avoid;
page-break-inside, break-inside	auto, avoid. avoid keeps a paragraph or a container in one frame of a Flow unless it is taller than the frame. XTS does not split a table row: a row that does not fit moves to the next frame whole	page-break-inside: avoid;
widows	Positive integer, the default is 2; 1 switches the control off. Acts in a Flow; a paragraph placed with PlaceObject is never split	widows: 3;
orphans	Positive integer, the default is 2; 1 switches the control off. Acts in a Flow, as with widows	orphans: 3;

Lists and generated content

Property	Values	Example
list-style-type	disc, circle, square, none, decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-latin, upper-latin, lower-roman, upper-roman, lower-greek	list-style-type: lower-roman;
list-style	Shorthand for list-style-type and list-style-position	list-style: square;
list-style-position	inside, outside. Accepted for compatibility, markers are always placed outside	list-style-position: outside;
counter-reset	Counter name with an optional start value, repeated for several counters	counter-reset: section;
counter-increment	Counter name with an optional step, repeated for several counters	counter-increment: section;
content	On ::before, ::after, ::marker and in page margin boxes: strings, attr(), counter(), counters(), target-counter(), target-counters(), target-text(), element(), leader(). The counter functions take a counter style as their last argument	content: counter(section, upper-roman) ". ";

Custom properties

Property	Values	Example
-bag-font-expansion	Percentage of allowed glyph stretching, 0% turns it off. Only justified text uses it; ragged text is set at its natural width	-bag-font-expansion: 0%;
-bag-horizontal-scale	A positive percentage or number, 90% and 0.9 are the same, default 100%. Inherited. Draws the glyphs narrower or wider by a fixed factor (PDF horizontal scaling, Tz); the advances, kerns and spaces are scaled, so the line breaker sees the scaled width. The factor does not compound, 90% inside 90% stays 90%, so an element inside a scaled one returns to normal with 100%. letter-spacing is not scaled, it stays an absolute length. Font expansion applies on top. Zero, negative or unparsable values are ignored with a warning	-bag-horizontal-scale: 90%;
-bag-italic-correction	auto, none	-bag-italic-correction: none;
-bag-leading-model	half (CSS line boxes, the default), trailing (TeX style), or a name that the Go program running XTS registered in XTSConfig.LineModels	-bag-leading-model: trailing;
-bag-linebreak-tolerance	Number, the largest adjustment ratio a line may have, default 4. How far the spaces of a line may stretch, as a multiple of their stretchability. A ratio, not a badness as TeX’s \tolerance: TeX’s 200 is about 1.26	-bag-linebreak-tolerance: 8;
-bag-linebreak-hyphen-penalty	Number, the TeX hyphen penalty	-bag-linebreak-hyphen-penalty: 200;
-bag-tab-stops	none, or a comma separated list of stops: a length or percentage of the line width, optionally start, end, center, decimal or decimal(","), optionally leader(" . ") (or dotted, solid, space). Inherited. A tab advances to the next stop past the text before it, left and right are synonyms of start and end. Tabs within a line survive any white-space mode, whitespace with a newline stays source formatting	-bag-tab-stops: 12mm, 100% end leader(dotted);
-bag-fixed-height	Length, or none (the default). On table rows only, not inherited. The row is exactly this high and never breaks inside: content that does not fit draws past the row, background and borders keep the height. Wins over height on the same row, and a cell’s height in a fixed row is ignored. On a cell the property has no effect	-bag-fixed-height: 16pt;
-bag-float-gutter	Non-negative length, default 9pt. Inherited. The space between a float and the text beside it where the float declares no positive margin on the side of the text; a declared margin replaces it. margin: 0 cannot be told from no margin, so -bag-float-gutter: 0 is how to get a browser’s spacing	-bag-float-gutter: 0;
-bag-bookmark	none, or a level number optionally followed by open or closed, see Bookmarks. Adds the element to the PDF outline	-bag-bookmark: 2 closed;

Selectors

XTS supports the CSS selectors of levels 1 to 3 and the most common of level 4:

Selector	Example
Element	p { ... }
Class	.highlight { ... }
ID	#main { ... }
Attribute	td[align="right"] { ... }
Descendant	table td { ... }
Child	table > tr { ... }
Sibling	h1 + p { ... }, h1 ~ p { ... }
Pseudo-class	tr:nth-child(even) { ... }, li:first-child { ... }, p:not(.intro) { ... }
Pseudo-element	h1::before { ... }, li::marker { ... }
Multiple	h1, h2, h3 { ... }

@-rules

@page

Sets up a master page, see Master Pages. The selector is the name of the master page, @page without a name is the default page. A named page inherits the descriptors of the unnamed rule.

Property	Values	Example
size	A paper name (a0 to a8, b0 to b8, jis-b4, jis-b5, letter, legal, ledger) with optional portrait or landscape, or width and height as two lengths	size: a4 landscape;
margin	One to four lengths, the page margins	margin: 2cm 1.5cm;
margin-top, margin-right, margin-bottom, margin-left	Length, one page margin	margin-left: 3cm;
border, border-top, border-right, border-bottom, border-left, border-width, border-style, border-color, border-radius	As on elements, drawn around the page content area on every page	border-left: 4pt solid navy;
padding, padding-top, padding-right, padding-bottom, padding-left	Length, space between the page border and the content	padding: 5mm;
background-color	Color value, fills the sheet. Painted on the first page only	background-color: #fafafa;
background-image	url() of an image or PDF file, scaled to the full sheet on every page that uses this @page rule	background-image: url("letterhead.pdf");
-bag-background-page	Page number of a multi page PDF used as background-image, the default is 1	-bag-background-page: 2;

The margin boxes @top-left-corner, @top-left, @top-center, @top-right, @top-right-corner, @left-top, @left-middle, @left-bottom, @right-top, @right-middle, @right-bottom, @bottom-left-corner, @bottom-left, @bottom-center, @bottom-right and @bottom-right-corner are nested in the @page rule. They take content, width, height and the text and border properties above.

@font-face

Defines a font face, see Fonts. The descriptors are:

Property	Values	Example
font-family	The name the font is used by	font-family: "Minion Pro";
font-style	normal, italic	font-style: italic;
font-weight	A weight name or number, or two of them for the range a variable font covers	font-weight: 300 700;
src	Comma separated list of url() or local() sources, each optionally followed by format() and tech()	src: url("minion.otf");
font-feature-settings	OpenType features switched on for this face, as on elements	font-feature-settings: "onum";
font-variation-settings	Axis values of a variable font, as on elements	font-variation-settings: "wght" 450;
size-adjust	Percentage that scales the glyphs of this face	size-adjust: 95%;
ascent-override	normal or a percentage of the em, in place of the face’s ascent. Read only by a line model registered with CSSBuilder.RegisterLineModel (see -bag-leading-model); the built-in half and trailing models do not use it	ascent-override: 107.91%;
descent-override	normal or a percentage of the em, in place of the face’s descent. Read only by a line model registered with CSSBuilder.RegisterLineModel (see -bag-leading-model); the built-in half and trailing models do not use it	descent-override: 25.1%;
line-gap-override	normal or a percentage of the em, in place of the face’s line gap. Read only by a line model registered with CSSBuilder.RegisterLineModel (see -bag-leading-model); the built-in half and trailing models do not use it	line-gap-override: 0%;

@-bag-color

Defines a named color, see Colors. The color name follows the at-rule, the descriptors are:

Property	Values	Example
model	cmyk, rgb, RGB, gray, GRAY, spotcolor. Upper case RGB and GRAY take components from 0 to 255, lower case from 0 to 100	model: cmyk;
value	A CSS color such as #ff0000 or rgb(255, 0, 0), used instead of a model with components	value: #c00;
colorname	Name of the separation for a spot color	colorname: PANTONE 300 C;
c, m, y, k, r, g, b	Number, one component of the chosen model	c: 100;