Force landscape orientation in CSS

css printing

26,965

Solution 1

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

size: A4 landscape;

Solution 2

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.

26,965

Author by

Ângelo Rigo

Web developer, Content Management Consulting, Moodle consulting. Technologies: PHP/Laravel/VUEJS/Wordpress/Mysql/Postgresql/Oracle/Javascript/CSS

Updated on August 06, 2021

Comments

Ângelo Rigo almost 3 years
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 ?