WebPDF custom properties (--pdf-page-*)

Syntax

pdf-page {
  --pdf-page-background-color: transparent;
  --pdf-page-focus-outline: 2px solid;
}

Properties you set

--pdf-page-background-color

The paper. Pages are drawn transparent, so this is what shows behind the content.

Default: oklch(99% 0 0)

--pdf-page-outline-color

The page outline.

Default: light-dark(oklch(87% 0 0), oklch(38% 0 0))

--pdf-page-focus-outline

The outline of a focused page with controls.

Default: 2px solid oklch(62% .24 27)

--pdf-page-fullscreen-background-color

Around the page in fullscreen.

Default: oklch(12% 0 0)

--pdf-page-text-selection-background-color

Selected text.

Default: oklch(62% .24 27 / .2)

--pdf-page-text-highlight-radius

The corners of find-in-page highlights.

Default: 4px

--pdf-page-signature-verified-color

Verified signatures and passed checks.

Default: light-dark(oklch(50% .14 150), oklch(78% .14 150))

--pdf-page-signature-warn-color

Untrusted or expired signatures, and checks that warn.

Default: light-dark(oklch(58% .14 70), oklch(80% .13 80))

--pdf-page-signature-invalid-color

Invalid or revoked signatures, and failed checks.

Default: light-dark(oklch(54% .2 27), oklch(72% .17 25))

--pdf-page-signature-unknown-color

Unknown or pending signatures, and checks not made.

Default: light-dark(oklch(55% 0 0), oklch(70% 0 0))

--pdf-page-signature-card-color

The text of signature cards.

Default: CanvasText

--pdf-page-signature-card-background-color

The background of signature cards.

Default: Canvas

--pdf-page-signature-card-border-color

The border and separators of signature cards.

Default: color-mix(in oklch, card color 14%, card background)

--pdf-page-signature-outline

A signature field on hover, on focus and while its card is open.

Default: 2px solid (the status color)

--pdf-page-bar-color

The text and icons of the bar and its menu.

Default: light-dark(oklch(25% .018 255), oklch(92% .008 255))

--pdf-page-bar-background-color

Their background, blurred like acrylic.

Default: light-dark(oklch(98.6% .004 255 / .82), oklch(24% .012 255 / .84))

--pdf-page-bar-border-color

Their border.

Default: light-dark(oklch(86% .009 255), oklch(34% .012 255))

--pdf-page-bar-hover-color

A button or item under the pointer.

Default: light-dark(oklch(91.5% .025 250 / .76), oklch(35% .035 250 / .72))

--pdf-page-bar-accent-color

Checks and the focus ring.

Default: light-dark(oklch(57% .19 251), oklch(72% .14 247))

--width and --height

The box of a page before its first render, such as 210mm and 297mm: plain lengths (px, in, cm, mm, pt, pc, q), both above 0, used as given and not multiplied by scale.

Default: 0px

Built-in behavior

Pages have content-visibility: auto built in: off-screen pages skip layout and paint and keep their size. Opt out with pdf-page { content-visibility: visible; } or break=content-visibility.

Page sizes are remembered in localStorage, so a reload reserves every box before the PDF arrives; break=hint opts out. See Lazy pages and placeholders.

Properties the page sets

These are set on the page itself; read them with getComputedStyle() or use them in your own rules:

--width and --height

The page box: the placeholder, then the page. Set with !important: once the page has a size, outer CSS cannot change them.

--aspect-ratio

The page's aspect ratio, such as 612 / 792.

--scale

The scale, also with !important.

--w, --h and --u

The paper size at scale 1, unrotated: such as 210, 297 and "1mm".

--N

The file's page count, as a string.

--name

The file name, as a CSS string.

--re

The renderer, as an emoji: "🔲" none yet, "🔄" rendering, "🦊" PDF.js, "♊" PDFium, "💎" SVG.

Examples

Transparent pages on a colored background

HTML

<pdf-file id=f src=//pdf.ist/web.pdf></pdf-file>
<pdf-page of=f scale=0.4></pdf-page>

CSS

body {
  background: oklch(85% 0.08 230);
}
pdf-page {
  --pdf-page-background-color: transparent;
  --pdf-page-outline-color: transparent;
}

Result

Reading the page size

const page = document.querySelector("pdf-page");
page.addEventListener("load", () => {
  const style = getComputedStyle(page);
  console.log(style.getPropertyValue("--w"), style.getPropertyValue("--h"), style.getPropertyValue("--u"));
});

Specifications

Not part of any specification. <pdf-file> and <pdf-page> are autonomous custom elements defined by WebPDF.pro. It implements:

Browser compatibility

See also

• ::part() names
• :state() names
• Styling WebPDF