CODEWITHSUNDEEP
htmlcss
fitzmode
fitzmode

Reputation: 1066

Multiple @page media queries

I have a setup where I need to print the content of two div elements. One in portrait mode and the other in Landscape mode. Is it possible to set the @page css attribute of each independently?

// Need to set @page for each div?
@page {
  size: landscape
}

@media print {
  body * {
    visibility: hidden;
  }
  #printPortrait,
  #printPortrait * {
    visibility: visible;
  }
  #printPortrait {
    position: absolute;
    left: 0;
    top: 0;
    width: 210mm;
    height: 297mm;
    padding: 10px;
    margin: 0;
  }
  #printLandscape,
  #printLandscape * {
    visibility: visible;
  }
  #printLandscape {
    position: absolute;
    left: 0;
    top: 0;
    width: 297mm;
    height: 210mm;
    padding: 10px;
    margin: 0;
  }
}
<body>
  <div id="printPortrait"></div>
  <div id="printLandscape"></div>
</body>

Upvotes: 0

Views: 50

Answers (1)

Bryce Howitson
Bryce Howitson

Reputation: 7690

If they print together you can do something like this:

@page {
  size: landscape
}

@page :first {
  size: portrait
}

where the second rule overrides the first but only for the first page.

Upvotes: 1

Related Questions