Force landscape orientation in CSS

Question

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 ?

Did you try this solution? http://stackoverflow.com/questions/138422/landscape-printing-from-html — s0rfi949, Sep 06 '16 at 19:30
i try : @page { size: landscape; as the solution says the final try is to use pdf as not all browsers accept this property. — Ângelo Rigo, Sep 06 '16 at 19:46

Martin Thoma · Answer 1 · 2017-09-01T09:58:19.400

The CSS you provided has problems:

The bracket does not close (missing }),
You overwrite size with A4
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.

score 3 · Accepted Answer · edited Oct 17 '22 at 16:26

3

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;

edited Oct 17 '22 at 16:26

Lonnie Best

9,936
10
57
97

answered Aug 05 '21 at 12:19

Vlatko Petrush

46
2

score 1 · Answer 3 · answered Jul 11 '22 at 20:34

1

In my case, it works with:

@page {
   size: landscape letter;
}

answered Jul 11 '22 at 20:34

David Tabla

91
3

Force landscape orientation in CSS

3 Answers3

Alternative