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.

score 2 · Accepted Answer · answered Jul 26 '18 at 02:16

2

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

answered Jul 26 '18 at 02:16

ove

3,092
6
34
51

but I thought you want to use Chrome’s Scale feature – Sandip Nirmal Jul 27 '18 at 02:03
Chrome scale feature is a workaround but i found the solution. – ove Jul 27 '18 at 02:20
But the way asked it seemed you want to achieve ``scale`` only. Anyways. – Sandip Nirmal Jul 27 '18 at 03:04
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. – ove Jul 27 '18 at 05:10

Sandip Nirmal · Answer 2 · 2018-07-25T04:20:25.150

0

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%

edited Jul 25 '18 at 04:20

answered Jul 23 '18 at 06:07

Sandip Nirmal

2,283
21
24

Does not work. When you zoom the control zoom out as it is, different to what the scale property is doing in chrome. – ove Jul 23 '18 at 10:59
@ove I updated the answer to use ``scale`` instead of zoom. You can check the codepen example. I think it should help you. – Sandip Nirmal Jul 24 '18 at 04:05
Have you checked the codepen? Can you add your example code/page structure? – Sandip Nirmal Jul 24 '18 at 05:46
Yes, I changed the scale value in your pen and nothing happens on Chrome – ove Jul 24 '18 at 06:25
@ove 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. – Sandip Nirmal Jul 25 '18 at 04:06
@ove Actually, I was using ``zoom`` earlier then switched to ``scale`` not sure why, but ``zoom`` seems to work just fine. – Sandip Nirmal Jul 25 '18 at 04:15
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/176696/discussion-between-sandip-nirmal-and-ove). – Sandip Nirmal Jul 25 '18 at 08:17

score 0 · Answer 3 · answered Jul 25 '18 at 11:49

0

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;}

}

answered Jul 25 '18 at 11:49

Torjescu Sergiu

1,483
10
24

Try the same thing, but instead of body, use html – Torjescu Sergiu Jul 25 '18 at 12:33

Css to emulate scaling in Chrome

3 Answers3

Linked