CODEWITHSUNDEEP
cssprinting
Ângelo Rigo
Ângelo Rigo

Reputation: 2157

Force landscape orientation in CSS

I do set to landscape the size property of a CSS file to print pages in landscape 

@page {
          margin: 0.1cm;
          size: landscape;
          orientation: landscape;
          size: A4;

Some pages are printed into portrait orientation, some in landscape orientation.

How can i detect and force the pages to be printed in landscape using CSS ?

Upvotes: 15

Views: 40895

Answers (3)

Vlatko Petrush
Vlatko Petrush

Reputation: 46

The problem is first you write size: landscape; but then you write size: A4; If not provided, domPDF is rendering like default portrait, and it overwrites the landscape. Set the second parameter landscape and it will work out.

size: A4 landscape;

Upvotes: 3

David Tabla
David Tabla

Reputation: 143

In my case, it works with:

@page {
   size: landscape letter;
}

Upvotes: 1

Martin Thoma
Martin Thoma

Reputation: 136359

The CSS you provided has problems:

  1. The bracket does not close (missing }),
  2. You overwrite size with A4
  3. orientation seems to exist for media queries, but not as an attribute (source). Hence you can check the orientation, but not set it.

I tried

@page {
    size: A4 landscape;
}

in Chrome 60 on Linux and it worked. Seems not to work in Firefox, though.

You could set the width and height of the <body> to whatever you need (only for printing by using the media query) just like paper.css does.

Alternative

You could add

body {
    transform: rotate(-90deg);
}

Seems to be safe to use.

Upvotes: 18

Related Questions