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.
import type { PdfStyle } from '@lupinum/nuxt-pdf'
const pageStyle = {
color: '#18251d',
fontFamily: 'Invoice Sans',
fontSize: 10,
paddingHorizontal: 48,
paddingVertical: 40,
} satisfies PdfStyleUse 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
| Type | Accepted values | Notes |
|---|---|---|
PdfLength | A 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. |
PdfPercentage | A numeric percentage string such as '50%' | Accepted only by properties whose type includes percentages. |
| Color | A color string such as '#18251d', 'rgb(24, 37, 29)', or 'red' | There are no CSS variables or global cascade. |
| Enum | One of the literals listed below | Browser-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.
| Property | Accepted value | Inherited | Evidence / limitation |
|---|---|---|---|
width, height | PdfLength | PdfPercentage | No | Numeric and percent parent/child sizing are in styles conformance; image dimensions and percent width are in images. |
minWidth, minHeight, maxWidth, maxHeight | PdfLength | PdfPercentage | No | Exercised by the shipped document playgrounds and their raster checks. |
position | 'relative' | 'absolute' | No | Absolute 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, left | PdfLength | PdfPercentage | No | Absolute 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.
| Property | Accepted value | Inherited | Evidence / limitation |
|---|---|---|---|
flexDirection | 'row' | 'row-reverse' | 'column' | 'column-reverse' | No | Row and column layouts are in styles conformance. |
flex, flexGrow, flexShrink | number | No | Grow and shrink geometry are in styles; numeric flex is used by raster-reviewed documents. |
flexBasis | PdfLength | PdfPercentage | 'auto' | No | Basis with shrink is in styles conformance. |
flexWrap | 'nowrap' | 'wrap' | 'wrap-reverse' | No | Wrap is exercised by the annual-report playground. |
alignItems | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' | No | Center and baseline layouts are covered by conformance/playground documents. |
justifyContent | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | No | space-between is in styles conformance. |
gap | PdfLength | No | Numeric 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.
| Property | Accepted value | Inherited | Evidence / limitation |
|---|---|---|---|
margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft | PdfLength | PdfPercentage | 'auto' | No | Every resolved margin edge is asserted in styles conformance. |
padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft | PdfLength | PdfPercentage | No | Every resolved padding edge is asserted in styles conformance. Padding does not accept auto. |
Borders and paint
| Property | Accepted value | Inherited | Valid primitives / evidence |
|---|---|---|---|
backgroundColor | color string | Only through nested PdfText runs | Border/background raster conformance; otherwise use on page-flow primitives. |
color | color string | Yes | Text inheritance conformance; applies to text-bearing primitives. |
opacity | number | Yes | Alpha blending is raster-compared in styles. |
borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth | PdfLength | No | Every edge is geometry-checked and border painting is raster-compared. |
borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor | color string | No | Page-flow primitives; border painting is raster-compared. |
borderStyle, borderTopStyle, borderRightStyle, borderBottomStyle, borderLeftStyle | 'solid' | 'dashed' | 'dotted' | No | Shorthand expansion and edge overrides have semantic assertions; dashed and dotted painting has a reviewed raster baseline. |
borderRadius | PdfLength | No | Page-flow primitives. Percent shorthand radius is intentionally not accepted because the engine requires a resolved number there. |
borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius | PdfLength | PdfPercentage | No | Page-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.
| Property | Accepted value | Inherited | Evidence / limitation |
|---|---|---|---|
fontFamily | string | Yes | Registered-family selection and nested family overrides are in text conformance. |
fontSize | PdfLength | Yes | Nested size inheritance and override are in styles and text. |
fontStyle | 'normal' | 'italic' | 'oblique' | Yes | All values pass the paired style resolver; actual italic-face selection is raster-reviewed. Register the corresponding face before using italic or oblique text. |
fontWeight | number or thin, hairline, ultralight, extralight, light, normal, medium, semibold, demibold, bold, ultrabold, extrabold, heavy, black | Yes | Every named alias has an independent numeric-normalization assertion; registered numeric face selection is exercised by the playground render matrix. |
letterSpacing | PdfLength | Yes | Line wrapping changes are asserted in text conformance. |
lineHeight | unitless multiplier, PdfLength, or PdfPercentage | Yes for static text | Static layout is verified. Dynamic render text deliberately uses font-default line spacing; see Conformance. |
maxLines | number | No | Two-line truncation is asserted in text conformance. |
textAlign | 'left' | 'right' | 'center' | 'justify' | Yes | All four values have geometry assertions in text. |
textDecoration | 'none' | 'underline' | 'line-through' or both decoration names separated by a space | Yes | Every value renders in paired React/Vue raster parity; underline color and style also has a reviewed baseline. |
textDecorationColor | color string | No | PdfText and PdfLink. |
textDecorationStyle | 'solid' | 'dashed' | 'dotted' | No | PdfText and PdfLink. |
textOverflow | 'ellipsis' | No | Supported with maxLines; ellipsis extraction is asserted in text. |
textTransform | 'none' | 'capitalize' | 'lowercase' | 'uppercase' | Yes | All 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
| Property | Accepted value | Inherited | Valid primitives / evidence |
|---|---|---|---|
objectFit | 'contain' | 'cover' | No | PdfImage; both modes have semantic box checks and reviewed raster baselines. |
transform | One to three space-separated rotate(...), scale(...), or translate(...) operations | No | Page-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:
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 PdfStyleValueNumbers, 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.