Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Media queries for landscape printing?

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?

like image 783
Zachary Nicoll Avatar asked May 16 '13 20:05

Zachary Nicoll


People also ask

What is orientation landscape in media query?

Media queries can also be used to change layout of a page depending on the orientation of the browser. You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called "Landscape" orientation.

What media queries should I use?

In the context of media queries for responsive design, the most common media feature is width , including min-width and max-width . However, you also have more choices here, such as: height — Pretty much the same as width but for device height. Also takes min-height and max-height to define ranges.


2 Answers

Media Queries offer matching against the device's orientation:

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

@media print and (orientation: portrait) {
    /* portrait styles */
}
like image 126
cimmanon Avatar answered Nov 16 '22 03:11

cimmanon


<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>
like image 34
Hicham O-Sfh Avatar answered Nov 16 '22 04:11

Hicham O-Sfh