CODEWITHSUNDEEP
htmlcss
mailman_73
mailman_73

Reputation: 798

change page size for print based on class of the certain element in css

I work on a single page application. I want to print page with landscape or portrait orientation based on class of the div. And the hardest part: I want to use only css, no javascript.

For example, I have a default size of the print

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

but I want to resize it if block "frame" has a modificator "media"

Unfortunately, that's doesn't work:

@media print {
  @page .frame ._media {
    size: portrait
  }
}

Upvotes: 3

Views: 2600

Answers (1)

Mark Wilson
Mark Wilson

Reputation: 1354

You can not add selector with @page as you have mentioned. There are only some psuedo classes that can be added. You can read more about them here:

https://developer.mozilla.org/en/docs/Web/CSS/@page

The best solution will be to use JS. But since you want to do it only with CSS.

There is no way you can set the @page rule using the classes.

My solution would be to: Have two different stylesheets(say style1.css, style2.css) and on the pages where you have class1 include style1.css and on the pages where you have class2 include style2.css.

style1.css:

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

and style2.css:

@media print {
  @page {
    size: portrait;
  }
}

That's the only way you can set two different @page rules.

Otherwise please use Javascript.

Upvotes: 3

Related Questions