Styling WebPDF - Guides

Sizing pages

At scale 1, a page has the size of the PDF page in CSS pixels, and scale multiplies it, like the size of an image. Size it with CSS instead, and it fills the box you give it, keeping its aspect ratio; scale then only sets how sharp it is drawn:

Pages that follow their container

html

<pdf-file id=f src=//pdf.ist/web.pdf></pdf-file>
<div class=pages>
  <pdf-page of=f scale=2></pdf-page>
  <pdf-page of=f no=2 scale=2></pdf-page>
</div>

css

.pages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
pdf-page {
  width: 100%;
}

Paper and outline

Pages are drawn transparent, on paper that is the page's background. Color the paper, or drop it, with --pdf-page-background-color, and the hairline around the page with --pdf-page-outline-color:

css

pdf-page {
  --pdf-page-background-color: transparent;
  --pdf-page-outline-color: transparent;
}

The defaults of the other colors, such as the outline and the bar, use light-dark(), so they follow the page's color-scheme. The paper stays light in a dark scheme, since PDFs are drawn for white paper.

Parts

The elements inside a page that you may style are ::part()s: the image and text layers, every link and form field, the signature cards and every piece of the controls. A part name that is not an identifier is escaped:

css

pdf-page::part(link) {
  background: oklch(62% 0.24 27 / 0.1);
}
pdf-page::part(\<input\>) {
  background: oklch(96% 0.04 95);
}
pdf-page::part(sig-card) {
  font-size: 0.9rem;
}

See ::part() names for all of them.

States

Pages and files expose their state as :state()s: a page that is still on the way, one with controls, one with a file dragged over it, a file whose signatures were checked. WebPDF never adds attributes or classes to your elements, so your markup stays as you wrote it:

css

pdf-page:state(pending) {
  opacity: 0.5;
}
pdf-page:state(drop-target) {
  outline: 2px dashed;
}

See :state() names.

Custom properties

Colors and sizes are custom properties you set on a page or any ancestor: the paper, the focus outline, text selection, the signature colors and the look of the bar. The page also sets a few you can read, such as its size (--width, --height) and the name of its file (--name). See custom properties.

css

pdf-page {
  --pdf-page-focus-outline: 2px solid oklch(55% 0.2 250);
  --pdf-page-text-selection-background-color: oklch(85% 0.1 250 / 0.5);
}

Fullscreen and print

A page shown fullscreen matches :fullscreen, and --pdf-page-fullscreen-background-color colors the space around it. In print, pages print as they are drawn; signature cards and the controls are left out.