PDFPageElement: scale property

Value

A number. 1 (the default) draws the page at its PDF size: one PDF point is 96 / 72 CSS pixels, so an A4 page is about 794 × 1123 pixels at 1.

Setting 1 removes the attribute, and NaN is ignored. The bar's − and + buttons and the keyboard (Ctrl -, Ctrl +) step by 0.1 between 0.1 and 8; Ctrl 1 to 4 set 1 to 4.

When you size a page with CSS instead (for example width: 100%), scale only sets the image resolution. The page also exposes --width, --height and --scale to CSS; see custom properties.

Examples

Zooming a page

This example shows the first page of a PDF at a third of its size, and doubles it when you click it.

HTML

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

JavaScript

const page = document.querySelector("#page");
page.addEventListener("click", () => {
  page.scale = page.scale === 0.3 ? 0.6 : 0.3;
});

Result

Using scale as the resolution

Sized by CSS, a page fills its box; scale then only decides how sharp the image is.

HTML

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

CSS

pdf-page {
  width: 45%;
}

Result

Specifications

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

Browser compatibility

See also

• PDFPageElement.rotation
• Lazy pages and placeholders
• Styling WebPDF