Web rendered size doesn't match print size

Question

First of all, I do search and research and try this about a week and has no clue.. so I thought I have earned my right asking somewhat simple, haha!

For some reason, it looks like, width: 210mm; doesn't work as I want. Following screenshot rendered as print mode with F12 tool on chrome.

This is css..

@media screen {
    body {
        background-color: #eeeeee;
        counter-reset: page-number;
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 0mm;
    }

    html, body, .page-frame { max-width: 210mm; }
    
    .page-frame {
        margin: 0;
    }
}

.page-frame
{
    overflow: hidden;
    position: relative;
    page-break-after: always;
    background-color: white;
    width: 210mm;
    height: 297mm;
    padding: 30mm 20mm 20mm 20mm;
    border: 1px solid #dddddd;
    column-count: 2;
    column-gap: 5mm;
    column-rule-width: 2px;
    column-rule-color: var(--secondary);
    column-rule-style: solid;
    counter-increment: page-number;
    margin-top: 1em;
}


/* page layouts */
.page-header { position: relative; column-span: all; margin-top: -17mm; margin-bottom: 2mm; height: 15mm; border-bottom: 2px solid var(--secondary); }
.page-footer { position: relative; column-span: all; height: 10mm; padding-top: 2mm; border-top: 2px solid var(--secondary); text-align: center; margin-top: 2mm; }
.page-header > div, .page-footer > div { position: absolute; width: 100%; height: 100%; }
.page-footer .page-number:before { content: counter(page-number); }
.column-frame { height: 100%; width: 100%; }

In other attempts, including uploaded image, the grey area (body element) remains and surround expecting-paper area and I cannot get rid of this surrounding grey area.

Also, .paper-frame div itself looks smaller than actual a4 size.. and I cannot understand whats happening at this point.

All I want is the .page-frame element properly rendered as A4 size on both screen and print.. and it's hard!

I'm using bootstrap 4 on laravel 7.x and latest version of Chrome browser..

Edit 1 --- Chrome Issue #273306 https://bugs.chromium.org/p/chromium/issues/detail?id=273306

Could it be that problem is the same issue in above link? .. maybe?? or not?.. still I cannot solve this. In my previous work, I used https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css for A4 rendering and it works, but I cannot find whats crucially different so cause the problem.

score 1 · Answer 1 · answered Aug 31 '20 at 08:54

1

I've worked with chromes print function in the past and the best way i found to fix these kinds of rendering problems was to brute force it.

Basically change the .page-frame size until it fits.

Although I have to say that your problem seems weird to me since if I remember correctly then the pixel sizes of your .page-frame are inline with what I used.

From the information I can gather from the picture, chrome might be including the margins of .page-frame in to the render. So zero them out forcefully in css.

You could also try to set the "scale" in print options higher to see if that fixes the problem.

answered Aug 31 '20 at 08:54

restart it

96
6

thats the problem. I've working with print on chrome and this is my third work. I also have currently working example of my prior project.. problem is I cannot find difference between those two.. – GatesPlan Aug 31 '20 at 09:55
I cannot use `width: 100%` on print because that cause screen and print result are different. The only option that I could use is rendering actual size on screen and print at the same time using same css option.. but something cause scaling down screen result....... I believe. – GatesPlan Aug 31 '20 at 10:01
and beside that. margins are already 0 and this margins I cannot remove .. – GatesPlan Aug 31 '20 at 20:22

score 1 · Accepted Answer · answered Sep 04 '20 at 05:09

For the start, I'd like to introduce might be a rookie problem that there is !important value inside bootstrap.print module.

When you print out, browser using @media print script, yes?

Since I use laravel, hence using webpack, so I generate app.css file that include bootstrap.

During that phase, there are two variables named $print-page-size and $print-body-min-width at the end of node_modules\bootstrap\scss\_variables.css

/* ..(inside node_modules >> bootstrap folder)/_variables.css */
..
// Printing
$print-page-size:                   a3 !default;
$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;

This cause the problem. It's not a bug or any. Well, if you compare the size of actual a4 paper and rendered paper on screen, there might be some difference between those two but it's not a problem. Size is different but result is resemblance.

When you look inside of resource\sass\app.scss file, bootstrap imported after custom scss files like custom or variables.

You can specifiy $print-page-size and $print-body-min-width parameter before importing default bootstrap _print module. When you do that, specified parameter overwrite those value so problem solved. I just set those two value like below.

/* resources/sass/_variables.scss file */
// print
$print-page-size: a4;
$print-body-min-width: auto;

..hey. I sovled!

Web rendered size doesn't match print size

2 Answers2