Media queries for landscape printing?

Question

I've got some styles specifically for print, which are being applied correctly with a print media query. The thing is, my layout breaks a bit if you switch to landscape printing, and I'd like to tweak some things for it. Is there any way to define styles for landscape printing?

Did you try the `(orientation: landscape)` media query in combination with `print`? — cimmanon, May 16 '13 at 20:43
Wow, well no, I hadn't tried that for some reason. Works like a charm. Make it an answer and I'll accept it. — Zachary Nicoll, May 16 '13 at 20:54

score 31 · Accepted Answer · answered May 16 '13 at 21:00

31

Media Queries offer matching against the device's orientation:

@media print and (orientation: landscape) {
    /* landscape styles */
}

@media print and (orientation: portrait) {
    /* portrait styles */
}

answered May 16 '13 at 21:00

cimmanon

67,211
17
165
171

1

Does work in chrome, at least in the version I'm testing in. – FremyCompany Jul 08 '15 at 08:14
1

Unfortunatly, This is not working in the current version of Chrome. – Hicham O-Sfh Nov 14 '20 at 15:22

score 2 · Answer 2 · answered Nov 10 '20 at 01:00

<style>
    @media print {
        @page {
            size: landscape; /*automatically set to Landscape only*/
        }
    }
</style>

If you want letting the user to choose between the two ways : portrait/Landscape, do :

 <style type="text/css" media="print">
        @page {
            /* portrait/Landscape */
            size: auto;
           /*adding some margins to let the title and the date to be displayed*/
            margin: 40px 10px 35px; 
        }
  </style>

Media queries for landscape printing?

2 Answers2

Linked