title: How to print HTML in landscape?
body: <p>This question has been asked, and answered, but the heavily upvoted accepted answer both:</p>
  
  <ul>
  <li>doesn't explain how to do it</li>
  <li>does not work</li>
  </ul>
  
  <p>The reason, of course, is that the accepted answer<sup><a href="https://stackoverflow.com/a/1392794/12597">1</a></sup> is deprecated<sup><a href="https://stackoverflow.com/a/4249717/12597">2</a></sup>. And the W3C has not come up with any standard replacement. Which leaves me with a problem, as I have actual things that need to get done.</p>
  
  <p>How to tell browsers to print content in landscape?</p>
  
  <h2>Example that doesn't work</h2>
  
  <p>I threw together an example that contains every snippet of chewing gum that i could find. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;HEAD&gt;
  &lt;STYLE type="text/css"&gt;
  
  /* https://stackoverflow.com/a/1392794/12597 */
  @page
  {
  size: landscape;
  }
  
  /* http://www.devx.com/tips/Tip/32962 */
  @media print{
  @page {
   size: landscape
  }
  }
  
  /* https://stackoverflow.com/a/16655216/12597 */
  @media print{
  .class-name{
      @page{
          size:landscape;
      }
  }
  }
  &lt;/STYLE&gt;
  
  &lt;!--https://stackoverflow.com/a/13684191/12597 --&gt;
  &lt;STYLE type="text/css" media="print"&gt;
    @page { size: landscape; }
  &lt;/STYLE&gt;
  
  &lt;/HEAD&gt;
  
  &lt;BODY&gt;
  Hello, landscape.
  &lt;/BODY&gt;
  
  &lt;/HTML&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can anyone come up with something that does work? </p>
  
  <p>Assume Chrome, IE11 or Edge.</p>
  
  <h2>Background</h2>
  
  <p>The reason i'm doing this, of course, is that i need to print landscape. In my particular case i will be using the rich markup and layout services available in HTML to print on an 8.5x11" piece of tri-perforated paper:</p>
  
  <p><a href="https://i.stack.imgur.com/tkY9K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tkY9K.png" alt="enter image description here"></a></p>
  
  <p>I want to go down the strips vertically, except that means having to have the text, images, and layout, be horizontal on the page:</p>
  
  <p><a href="https://i.stack.imgur.com/EAAWr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EAAWr.png" alt="enter image description here"></a></p>
  
  <h2>Bonus Reading</h2>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/138422/landscape-printing-from-html">Landscape printing from HTML</a></li>
  <li><a href="https://stackoverflow.com/questions/16654804/how-can-i-define-a-css-class-to-set-the-printed-page-in-landscape-mode">How can I define a CSS class to set the printed page in landscape mode?</a></li>
  <li><a href="https://stackoverflow.com/questions/13684128/print-in-landscape-format">Print in Landscape format</a></li>
  <li><a href="http://www.w3.org/TR/2004/CR-css-print-20040225/#section-properties" rel="nofollow noreferrer">W3C CSS Print Profile</a></li>
  <li><a href="http://www.devx.com/tips/Tip/32962" rel="nofollow noreferrer">Printing an HTML Page in Landscape Mode</a></li>
  <li><a href="https://stackoverflow.com/questions/4249532/is-page-sizelandscape-obsolete">Is @Page { size:landscape} obsolete?</a></li>
  <li><a href="http://www.w3.org/TR/css3-page/#page-size" rel="nofollow noreferrer">CSS Paged Media Module Level 3</a></li>
  </ul>