Различные ориентации страницы для печати HTML

код:

Я пытаюсь сделать следующую простую работу HTML-страницы:

<html>
  <head>
    <style type="text/css">     
    @media print
    {               
      @page port { size: portrait; }
      .portrait { page: port; }

      @page land { size: landscape; }
      .landscape { page: land; }                

      .break { page-break-before: always; }
    }
    </style>
  </head>
  <body>
    <div class="landscape">
      <p>This is a landscape page.</p>
    </div>
    <div class="portrait break">
      <p>This is a portrait page.</p>
    </div>
  </body>
</html>

Вопрос:

Я хочу напечатать первый div-контент на первой странице с альбомной ориентацией, а второй - с портретным режимом. Однако все браузеры (Chrome, Opera, Safari, IE10) печатают две портретные страницы. Я что-то пропустил или ни один из браузеров не поддерживал эту функцию? В последнем случае есть ли альтернатива для достижения этого результата?

Ответ 1

Быстро и грязно взломать было бы поворот div, который должен быть в ландшафте на 90 градусов, используя CSS3 или фильтры. Было бы выполнено следующее:

-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

В настоящее время нет простого способа сделать это любым другим способом, так как директива CSS size реализована только одним браузером (Opera), но тем не менее является частью текущих черновиков (Является ли @Page {size: landscape} устаревшим? для устаревания http://www.w3.org/TR/css3-page/#page-size для спецификации).

Следующий дешевый взлом - это то, что я упомянул выше: отложите свой HTML на портрете... и поверните на 90 градусов с помощью CSS3.

Ответ 2

Свойство size не используется (больше), поэтому я не буду опираться на это. Наиболее прагматичным способом было бы создать PDF на сервере перед печатью.

Вращающееся решение, предоставляемое Seéastien, также будет работать, но только в браузерах, которые его поддерживают.