Style properties

These are all the style properties ngpdf reads. Any other property is ignored without a warning. An invalid value for a property in this list throws an ngpdf: error and the render rejects.

For a property that takes keywords, a keyword outside its list throws, for every such property, and the message names the value as you wrote it, the property, the element and the keywords it takes:

ngpdf: invalid value "middle" for text-align on pdf-text; use left, center, right or justify

flex-flow and vertical-align follow the same rule. Their messages say what they take, since flex-flow takes up to two keywords and vertical-align also takes a length or a percentage: use baseline, super, sub, a length or a percentage.

A typo or a CSS keyword ngpdf doesn't support, such as break-before: left, font-style: oblique 10deg or vertical-align: middle, fails the render instead of being dropped without a sign.

In the tables:

• length is a number with an optional unit: none or pt (points), px (= 1pt, whatever the page's dpi), in, cm or mm. Any other unit throws.
• length/% also accepts a percentage of the parent's content box.
• color is hex (3, 4, 6 or 8 digits), rgb()/rgba(), a CSS named color or transparent.
• Keywords are matched in any case, as in CSS: CENTER is center. That covers the keywords of text-align, text-decoration, text-transform, text-overflow, hyphens, vertical-align, white-space, normal in letter-spacing and line-height, display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-self, align-content, object-fit, overflow, position, font-weight, font-style, break-before, break-after and break-inside, none in max-lines, none and the function names in transform, the keywords of transform-origin, auto in lengths, auto and none in flex, and the border styles, and the gradient function names and keywords in background and background-image.

#Text

All text properties are inherited by child elements.

max-lines, text-overflow and vertical-align are not inherited:

A pdf-span takes display, color, font-family, font-size, font-weight, font-style, text-decoration, letter-spacing, text-transform, hyphens, vertical-align and white-space; line-height, text-align, max-lines and text-overflow come from its pdf-text. See Styled runs.

Without a registered family in the list: font-family contains courier or mono: Courier. Contains times, or serif without sans: Times. Otherwise Helvetica. With one, each character takes the first font in the list that has it. See Text and fonts.

#Flexbox

display is not inherited. It applies to every pdf-* element, pdf-span and pdf-note included, and is ignored on a component host element like its other styles. See Hiding elements.

flex takes:

#Size and spacing

Shorthands with 1 to 4 values follow CSS order: top, right, bottom, left.

#Borders and background

In border, a missing width is 1 and a missing color is black. The width keywords thin, medium and thick mean 1, 3 and 5 points. border and border-<side> set the style of the sides they cover, and solid when they name none. A side whose style is none or hidden has a width of 0, whichever declaration comes last. dashed draws dashes 3 widths long and dotted round dots one width across, 2 widths apart; see Backgrounds, borders and radius. double, groove, ridge, inset and outset are drawn solid with a dev-mode warning. Unlike CSS, the default style is solid, so border-width: 2 on its own draws a border. border-radius rounds the background and the borders. Radii that add up to more than a side are scaled down together, as in CSS. overflow is not inherited and is ignored on a pdf-page and a pdf-table; see Overflow.

transform applies its functions left to right, around transform-origin, and changes only how the element is drawn, not the layout. Angles take deg, rad or turn, and a positive angle turns clockwise. scale() takes one number for both axes or two. Translations take lengths or a percentage of the element's own border box. Neither property is inherited, and transform is ignored on a pdf-page and a pdf-table. See Transforms.

position and the four offsets are not inherited. The offsets do nothing on a static element. All five are ignored on a pdf-page, a pdf-row and a pdf-cell, where their values are still checked. See Positioning.

#Images, pages and breaks

#Ignored

Everything else is ignored, including:

• z-index, overflow-x, overflow-y;
• order;
• box-shadow;
• font, word-spacing;
• custom properties (--name).

Some styles are ignored in specific places:

• on a component host element (with a warning);
• width, height, the min-/max- sizes and margin on a pdf-page;
• horizontal padding, left and right borders, margins, justify-content, flex-direction, flex-wrap and the column gap (column-gap, or the column part of gap) on a pdf-row inside a table;
• margins, min-width and max-width on a pdf-cell inside a table;
• position and size styles other than height on pdf-page-number;
• position, top, right, bottom and left on a pdf-page, a pdf-row and a pdf-cell;
• everything except display and the eleven text properties above on a pdf-span (with a warning);
• vertical-align on anything but a pdf-span (with a warning).

#Throws

• an unknown unit: em, rem, vh, vw and the like;
• auto in gap, row-gap or column-gap, or more than two values in gap;
• a percentage or auto in font-size, border-radius, a border-*-radius corner, border-width or a border's width;
• an elliptical radius such as border-radius: 4 / 8;
• auto in padding or a padding-* side;
• a negative font-size, padding, gap, border width, radius or min-presence-ahead (margins can be negative, as in CSS);
• a percentage or a keyword such as auto in min-presence-ahead: ngpdf: invalid value "auto" for min-presence-ahead on pdf-text; use 0 or a length;
• a color that is not one of the forms above, including hsl(), currentColor and var();
• a keyword outside the lists above for any keyword property: font-weight, font-style, text-align, text-decoration, text-transform, text-overflow, hyphens, white-space, display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-self, align-content, border-style and its sides, object-fit, overflow, position, break-before, break-after and break-inside, in any case, and for vertical-align on a pdf-span (middle, top and the like);
• position: fixed and position: sticky;
• a transform function other than the seven above, such as skew(), matrix() or rotate3d(), an angle without a unit (other than 0) and a transform-origin with three values;
• a value that is not a number for flex-grow, flex-shrink and opacity;
• the wrong number of values in a shorthand;
• in background or background-image: repeating-* gradients, conic-gradient(), url(), several comma-separated backgrounds, explicit radial sizes, color hints, a stop with two positions, fewer than two stops, and anything else that is not a color or a supported gradient.