Forum How do I...?

Scaling with CSS

CsKwg
Hi!

I'm trying to scale the content while rendering to PDF.
Using zoom style did work on Chromium, but not while rendering with PRINCEXML.
I'm currently using this CSS:

@media print {
@page {
size: A4 landscape;
margin: 10mm 20mm 10mm 20mm;
}

html, body {
zoom: 50%;
}
}

How can I accomplish scaling when rendering to PrinceXML?

mikeday
Prince does not support the zoom property at this time, you can use prince-shrink-to-fit to scale down the width to fit the page like this:
@page {
    prince-shrink-to-fit: auto
}

Or you can use the --css-dpi option to determine how large px units are (defaulting to 96dpi).
CsKwg
Thanks! Would it be possible to have a specific media query, which only selects prince?
Like @media princexml {}
mikeday
The prince-shrink-to-fit property should not affect other user-agents, and you can write it as -prince-shrink-to-fit to make it clear that it is a vendor-specific extension and placate validators etc.

Alternatively you could put it in a separate style sheet applied from the Prince command-line with the --style option.
CsKwg
That's OK with me. I am using it withing media-print and it is working fine.
CsKwg
Finally, it turned out, that it is necessary for us to scale the content by using CSS.
Command line options are not possible in this case.

When using this CSS:

@media print {
@page {
size: A4 landscape;
margin: 4mm;
padding: 4mm;
}

body {
transform: scale(0.5);
transform-origin: 0 0;
}
}

the page is scaled correctly, but in the vertical direction, half of the printed page is empty because the automatic page break comes too early.

The rendering engine should take scaling into account, especially as this seems to be widely supported:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform