Skip to main content

Styles

The typed Nuxt PDF style contract, including units, inheritance, valid primitives, conformance evidence, and limitations.

PdfStyle is Nuxt PDF's framework-owned authoring contract. It intentionally contains the behavior this package tests and supports; it does not re-export the wider upstream stylesheet types and it is not browser CSS.

ts
import type { PdfStyle } from '@lupinum/nuxt-pdf'

const pageStyle = {
  color: '#18251d',
  fontFamily: 'Invoice Sans',
  fontSize: 10,
  paddingHorizontal: 48,
  paddingVertical: 40,
} satisfies PdfStyle

Use satisfies, not a type assertion. It preserves the object's useful inferred type while making vue-tsc reject unknown keys, invalid enums, and unsupported units.

PdfStyle belongs to page-flow layout and text metrics. SVG paint and geometry use direct props: PdfG and shapes do not accept style, PdfSvg.style places the SVG root in page flow, and SVG PdfText.style controls text metrics while its direct fill prop controls paint.

Values and units

TypeAccepted valuesNotes
PdfLengthA number, or pt, px, in, mm, cm, rem, vh, or vw (for example 12, '12pt', '4mm')A unitless number is a PDF point. px uses the page DPI; the default is 72.
PdfPercentageA numeric percentage string such as '50%'Accepted only by properties whose type includes percentages.
ColorA color string such as '#18251d', 'rgb(24, 37, 29)', or 'red'There are no CSS variables or global cascade.
EnumOne of the literals listed belowBrowser-only values are rejected even when a similarly named CSS property exists.

rem uses the engine's 18-point base. vw and vh resolve against the PDF page container, not a browser window. Percentages resolve against the relevant parent dimension.

em, ch, ex, calc(), var(), container queries, and arbitrary CSS strings are not part of the contract.

Dimensions and positioning

These keys are valid on page-flow primitives (PdfPage, PdfView, PdfText, PdfImage, PdfLink, and PdfNote). width and height also size PdfSvg inside page flow.

PropertyAccepted valueInheritedEvidence / limitation
width, heightPdfLength | PdfPercentageNoNumeric and percent parent/child sizing are in styles conformance; image dimensions and percent width are in images.
minWidth, minHeight, maxWidth, maxHeightPdfLength | PdfPercentageNoExercised by the shipped document playgrounds and their raster checks.
position'relative' | 'absolute'NoAbsolute fixed headers and footers are covered by pagination and playground fixtures. Browser fixed and unneeded static positioning are not accepted; use the fixed component prop to repeat content.
top, right, bottom, leftPdfLength | PdfPercentageNoAbsolute positioning is covered by conformance and playground fixtures.

Flex layout

Flex properties primarily belong on PdfPage and PdfView. Text, links, images, notes, and SVGs can be flex items. The engine defaults to a column direction.

PropertyAccepted valueInheritedEvidence / limitation
flexDirection'row' | 'row-reverse' | 'column' | 'column-reverse'NoRow and column layouts are in styles conformance.
flex, flexGrow, flexShrinknumberNoGrow and shrink geometry are in styles; numeric flex is used by raster-reviewed documents.
flexBasisPdfLength | PdfPercentage | 'auto'NoBasis with shrink is in styles conformance.
flexWrap'nowrap' | 'wrap' | 'wrap-reverse'NoWrap is exercised by the annual-report playground.
alignItems'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'NoCenter and baseline layouts are covered by conformance/playground documents.
justifyContent'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'Nospace-between is in styles conformance.
gapPdfLengthNoNumeric gap geometry is in styles conformance.

There is no grid, browser block layout, floats, selectors, or CSS cascade.

Box model

The box model is valid on page-flow primitives. Percentages resolve through the engine's PDF layout container, not a browser viewport.

PropertyAccepted valueInheritedEvidence / limitation
margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeftPdfLength | PdfPercentage | 'auto'NoEvery resolved margin edge is asserted in styles conformance.
padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeftPdfLength | PdfPercentageNoEvery resolved padding edge is asserted in styles conformance. Padding does not accept auto.

Borders and paint

PropertyAccepted valueInheritedValid primitives / evidence
backgroundColorcolor stringOnly through nested PdfText runsBorder/background raster conformance; otherwise use on page-flow primitives.
colorcolor stringYesText inheritance conformance; applies to text-bearing primitives.
opacitynumberYesAlpha blending is raster-compared in styles.
borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidthPdfLengthNoEvery edge is geometry-checked and border painting is raster-compared.
borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColorcolor stringNoPage-flow primitives; border painting is raster-compared.
borderStyle, borderTopStyle, borderRightStyle, borderBottomStyle, borderLeftStyle'solid' | 'dashed' | 'dotted'NoShorthand expansion and edge overrides have semantic assertions; dashed and dotted painting has a reviewed raster baseline.
borderRadiusPdfLengthNoPage-flow primitives. Percent shorthand radius is intentionally not accepted because the engine requires a resolved number there.
borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadiusPdfLength | PdfPercentageNoPage-flow primitives; edge radii are resolved independently.

Full CSS border strings such as '1px solid red' are not public authoring syntax. Use the explicit width, style, and color keys so invalid values remain type-checkable.

Text

Text keys apply to PdfText and PdfLink. They may be set on ancestor PdfPage/PdfView nodes when the table marks them inherited.

PropertyAccepted valueInheritedEvidence / limitation
fontFamilystringYesRegistered-family selection and nested family overrides are in text conformance.
fontSizePdfLengthYesNested size inheritance and override are in styles and text.
fontStyle'normal' | 'italic' | 'oblique'YesAll values pass the paired style resolver; actual italic-face selection is raster-reviewed. Register the corresponding face before using italic or oblique text.
fontWeightnumber or thin, hairline, ultralight, extralight, light, normal, medium, semibold, demibold, bold, ultrabold, extrabold, heavy, blackYesEvery named alias has an independent numeric-normalization assertion; registered numeric face selection is exercised by the playground render matrix.
letterSpacingPdfLengthYesLine wrapping changes are asserted in text conformance.
lineHeightunitless multiplier, PdfLength, or PdfPercentageYes for static textStatic layout is verified. Dynamic render text deliberately uses font-default line spacing; see Conformance.
maxLinesnumberNoTwo-line truncation is asserted in text conformance.
textAlign'left' | 'right' | 'center' | 'justify'YesAll four values have geometry assertions in text.
textDecoration'none' | 'underline' | 'line-through' or both decoration names separated by a spaceYesEvery value renders in paired React/Vue raster parity; underline color and style also has a reviewed baseline.
textDecorationColorcolor stringNoPdfText and PdfLink.
textDecorationStyle'solid' | 'dashed' | 'dotted'NoPdfText and PdfLink.
textOverflow'ellipsis'NoSupported with maxLines; ellipsis extraction is asserted in text.
textTransform'none' | 'capitalize' | 'lowercase' | 'uppercase'YesAll four values have paired extracted-text assertions; uppercase is also raster-reviewed in multiple playground documents.

wordSpacing is deliberately absent: the pinned text layout pipeline accepts the key but does not apply it to glyph advances or wrapping. Nuxt PDF does not type a no-op as supported authoring; use letterSpacing instead.

Images and transforms

PropertyAccepted valueInheritedValid primitives / evidence
objectFit'contain' | 'cover'NoPdfImage; both modes have semantic box checks and reviewed raster baselines.
transformOne to three space-separated rotate(...), scale(...), or translate(...) operationsNoPage-flow primitives; rotate accepts degrees or radians and translate operands are unitless PDF points. The three-operation transform is raster-compared while its layout box is asserted invariant. SVG transforms remain direct SVG props.

Style arrays

PdfStyleValue is either one PdfStyle or a recursively nested readonly array. Arrays merge left-to-right. false, null, and undefined entries are ignored, which makes Vue conditionals direct and type-safe:

ts
import type { PdfStyle, PdfStyleValue } from '@lupinum/nuxt-pdf'

const base = { fontSize: 10 } satisfies PdfStyle
const total = { fontWeight: 700 } satisfies PdfStyle

const style = [base, [isTotal && total], null] satisfies PdfStyleValue

Numbers, strings, true, functions, and arbitrary objects are not valid array entries. Nested flattening and falsy-entry filtering are covered by the paired React/Vue styles conformance fixture.