Using CSS, can I use @media print to force a single page in a 2up landscape?-CodePudding

I have a site: https://www.thestudiolapine.com/yoga/schedule that the client wants to print the page to create flyers.

Two things are happening:

Two blank pages are being produced before and after the actual content.

Second, the client wants to force it into landscape mode and print two of the schedules on a single page.

My current css looks like this:

@media print {
  body {
    visibility: hidden;
  }
  .noprint {
    visibility: hidden;
  }
  div.printarea {
    margin:0;
  }
  div.printarea * { display:block; visibility:visible; }
  @page {
    size: landscape;
    
  }
}

Any insight or help would be greatly appreciated.

(Note: This is a React/NextJS site)

CodePudding user response：

First of all, you can add border to all elements to see what causes a new page to be appended (maybe some margins, paddings, etc).

* { border: 1px solid red;}

This will help you to avoid blank page

html, body { height: auto; } or `height: 100vh`

You can try also this:

@media print {

    html, body {
      height:100vh; 
      margin: 0 !important; 
      padding: 0 !important;
      overflow: hidden;
    }

}

In your CSS you can set the @page property as shown below to force as landscape.

@media print{@page {size: landscape}}

CodePudding user response：

To avoid blank pages you can use page-break-before and page-break-after

div.printarea:last-child {
     page-break-after: auto;
}

div.printarea:last-child {
     page-break-before: auto;
}

To switch to landscape view you can rotate the page like below

<style type="text/css" media="print">
    div.printarea
    {
     -webkit-transform: rotate(-90deg); 
     -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
</style>