Hello,

I am trying to create a CSS class that turns the content of a page to an oriented landscape.
However the following code doesnt seem to work correctly.

.landscape {
 @page {
  size: A4 landscape;
  margin:2cm;
  page-break-before:avoid;
  page-break-after:avoid;
 }
}

I have tried creating multiple classes of .landscape using the following code. (.landscape1, .landscape2, .landscape3)
Which works, the only problem now is that. I am only able to use this class once, because of the page.

div.landscape, table.landscape, img.landscape, span.landscape {
 page: landscape_page;
}

@page landscape_page {
  size: A4 landscape;
  margin: 2cm;
  page-break-before:avoid;
  page-break-after:avoid;
}

Also I was wondering why the page-break:avoid doesnt work.

Thanks in advance,
Emiel

You are saying that for each page avoid page breaks before and after.

What you may want to do is to create a div that you want to avoid page breaks before/after/within.

Jim Albright
Wycliffe Bible Translators

At the moment you cannot have a landscape block on a portrait page, the whole page will be landscape, and that requires page breaks before and after. The page-break-after/before properties have no effect on @page rules.