Css to emulate scaling in Chrome

Question

There is a print setting (Scale) in Chrome that I would like to emulate.

In IE11, I have added in the css and that seems to fix it but not in Chrome.

@page {
  size: A4 portrait;
  margin: 1mm 1mm 0 5mm;
}

In Chrome, I have to manually change the scale to 50 to fix it. I have tried in css

zoom: 50%
transform: scale(0.5);

UPDATE Now I know why it is working in IE11. Nothing to do with setting the A4 size. Looks like IE has a 'Shrink to Fit' settings that's turned on by default. I don't think there is a way to do in CSS.

Cora

Related question: Print Scale by CSS – Terce

Answer 1

Finally found the answer.

It is because of the bootstrap css.

I implemented the fix below and it seems to work for now.

https://github.com/twbs/bootstrap/issues/12078

Cora

but I thought you want to use Chrome’s Scale feature – Debbiedebbra

Chrome scale feature is a workaround but i found the solution. – Cora

But the way asked it seemed you want to achieve scale only. Anyways. – Debbiedebbra

Yes initially until I found the solution. That is a workaround. Using zoom/scale in css wont fix the bootstrap issue. It has different behaviour to the scale setting in chrome. – Cora

Answer 2

You cannot provide zoom in @page. However you can set zoom to parent container inside @media print. You can do something like this

@media print: {
    .container: {
      zoom: 50%;
    }
}

Here container class is applied to parent, so when you print it entire screen will be scaled to 50%.

As per documentation @page only support size, marks and bleed. More details available over here https://developer.mozilla.org/en-US/docs/Web/CSS/@page.

For more details about using print css you can read beautiful blog by Racheal Andrew. https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

You can check pen here https://codepen.io/sandipnirmal/pen/ajWWgp.

Following are screenshots:

Chrome Scaling:

Media Print with zoom: 50%

Debbiedebbra

Does not work. When you zoom the control zoom out as it is, different to what the scale property is doing in chrome. – Cora

@Cora I updated the answer to use scale instead of zoom. You can check the codepen example. I think it should help you. – Debbiedebbra

Have you checked the codepen? Can you add your example code/page structure? – Debbiedebbra

Yes, I changed the scale value in your pen and nothing happens on Chrome – Cora

@Cora can you use zoom: 50% instead of transform: scale(0.5) and remove transform-origin. I made changes to the original answer. Also modified pen. It is working perfectly for me. You can give it a try. – Debbiedebbra

@Cora Actually, I was using zoom earlier then switched to scale not sure why, but zoom seems to work just fine. – Debbiedebbra

Let us continue this discussion in chat. – Debbiedebbra

Answer 3

Those are User settings you are trying to manipulate and you cannot alter the Scale. Try this out:

@media print {
body {transform: scale(.5);}
table {page-break-inside: avoid;}

}

Kitchenette

Try the same thing, but instead of body, use html – Kitchenette

Answer 4

Another way you can scale a page for printing is to manually specify the width of the body, like this:

@media print {
    body {
        min-width: 1000px;
    }
}

The content of the page will be scaled to print. I've only tested this roughly in Windows Chrome and iPhone Safari, but both of these seem to scale the output so that the entire body fits the width of the printed page.

Terce