Search code examples
htmlcssprintingscale

How to avoid a blank page while scaling down a page for printing purpose?

I try to scale down my page by using

@media print {
    body {
        transform: scale(.5);
        transform-origin: 0 0;
    }
}

That works fine for me but I get a blank page if I print it. How can I avoid this? Or is there a better way to do the job? Thank you in advance!

For the sake of completeness, an small example:

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
      @media print {
         body {
            transform: scale(.5);
            transform-origin: 0 0;
         }
   </style>
   <title>Test</title>
</head>
<body>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
</body>
</html>

Edit: I have to mention that I have no influence on the body-content

Solution

  • I solved my problem by changing transform to zoom.