rotate(90deg) isn't print friendly

Question

I am making a website that has a mixture of A4 landscape and portrait pages like shown in the picture below:

When I try to print, it doesn't work well. So I added a CSS to rotate a portrait page by 90 degrees:

.page {
      padding-top:0.5cm;
      padding-bottom:0.5cm;
      padding-left: 1cm;
      padding-right: 1cm;
      border: 5px #ccc solid;
      height: 296mm;
      width: 210mm;   
      outline: 2cm whitesmoke solid;

      background: white;
      margin: 1mm auto;
      position: relative;

 } 


.landscape {
      position: relative;
      width: 296mm;
      height: 210mm;
      margin: 1mm auto;
      margin-top : 180px;
      margin-bottom : 180px;
      background: white;

      outline: 2cm whitesmoke solid;
      border: 5px #ccc solid;           
      padding-top:0.5cm;
      padding-bottom:0.5cm;
      padding-left: 1cm;
      padding-right: 1cm;     
}



@media print {
.rotate_print{
    transform: rotate(90deg);
}    

    .page {
        page-break-before: always;        
        margin : 0mm;            
        padding : 1cm;        
        outline: 0;
        border: 0px;        
    }

    .landscape {
        page-break-before: always;    
        margin : 0mm;   
        padding : 1cm; 
        outline: 0;
        border: 0px;        
    }

    .no-print {
        display: none;
    }
 }

The page is rotated but it creates some big spaces between a rotated page and normal page:

And it fails to print correctly, the rotated page still has problem like the image below. How can I print the webpage using rotate transformation properly?

I tried changing the position to relative and tried moving the pages closer but the problem persists. I also tried changing printer setting to 0 margin. Tried it on Safari and Chrome.

score 1 · Answer 1 · answered Jun 27 '19 at 01:35

Properties called page-break-inside and break-inside can be used to stop the pages being split

@media print{
   .page{
        page-break-inside: avoid;
        break-inside: avoid;
        page-break-before: always;
        break-before: always;
    }
   .landscape{
        page-break-inside: avoid;
        break-inside: avoid;
        page-break-before: always;
        break-before: always;
    }
}

score 0 · Accepted Answer · answered Jun 27 '19 at 01:26

0

Landscape printing from HTML

Dennis' solution works for the mixture of landscape and portrait pages on Chrome and Safari.

answered Jun 27 '19 at 01:26

zcahfg2

861
1
12
27

rotate(90deg) isn't print friendly

2 Answers2