When pages have different sizes, the resulting PDF has all pages the same
There are legitimate reasons to have pages with various sizes, for example when one has a printer which supports many paper sizes, or when only printing to PDF. That can be achieved using something like this:
@page {
size: A4 landscape;
}
@page:left {
size: A5 landscape;
background-color: blue;
}
@page:right {
background-color: red;
}
When one tries this in a (non-polyfilled) Chromium 90, the page sizes in the resulting PDF are correct, but the page layout is computed incorrectly which causes the text to overflow (bug 835358).
Trying again with a PagedJS Polyfill v0.1.43, the layout is computed correctly this time (even rendering the colors this time), but the actual size of the page stays the same.
This is because the width
and height
of a .pagedjs_page
are set to --pagedjs-width-left
, however only --pagedjs-pagebox-width
is updated for the page. The computed styles are:
:root {
--pagedjs-orientation: landscape;
--pagedjs-width: 297mm;
--pagedjs-height: 210mm;
--pagedjs-width-right: 297mm;
--pagedjs-height-right: 210mm;
--pagedjs-width-left: 297mm;
--pagedjs-height-left: 210mm;
}
.pagedjs_page {
--pagedjs-pagebox-width: 297mm;
--pagedjs-pagebox-height: 210mm;
}
.pagedjs_page.pagedjs_left_page {
--pagedjs-pagebox-width: 210mm;
--pagedjs-pagebox-height: 148mm;
}
.pagedjs_page.pagedjs_left_page {
width: var(--pagedjs-width-left); /* results to 297mm, not 210mm */
height: var(--pagedjs-height-left); /* results to 210mm, not 148mm */
}
Would it be possible to fix this behavior and make the pages correctly sized?