Как определить класс CSS для установки печатной страницы в альбомном режиме?

Я создал таблицу стилей CSS, которая может печатать HTML-страницу в ландшафтном режиме, используя следующее правило @media:

   @media print{
      @page {size: landscape;}
    }

Я не хочу печатать все страницы HTML, которые загружают эту таблицу стилей в ландшафтном режиме. В идеале я хотел бы указать ландшафтный класс, который бы это сделал.

По мере сгенерирования HTML я всегда могу создать отдельный файл landscape.css и при необходимости добавить его в заголовок, но я надеялся, что это может быть более чистый способ сделать это с помощью классов.

В качестве продолжения я также попробовал следующее без везения:

@page rotated {
  size: landscape;
}
@media print{
  .rotate {
    page: rotated;
  }
}

Я, вероятно, просто ударяю головой о стену для решения, которое, похоже, работает только в браузерах на основе webkit. Настройка размера страницы @page: пейзаж не работает в Firefox или (неожиданно, неожиданно) ie10.

ОТВЕТЫ

Ответ 1

К сожалению, в настоящее время мы не можем использовать селектор типов страниц для запросов к медиафайлу за пределами предложенных :left, :right, :first и :blank псевдоклассов.

https://www.w3.org/TR/css3-page/#page-selector-and-context

Однако W3C рассматривает возможность добавления других псевдоязыков страниц для будущих уровней CSS [ @page :nth(4) { ... } или @page (.class) { ... }]. Я не уверен, почему названные страницы не смогли работать, но по состоянию на 26 января 2016 года медиа-запросы уровня 4 (включая правило @page) могут включать диапазоны, отрицание и пользовательские медиа-запросы с использованием сценариев. Кроме того, свойство размера в настоящее время поддерживается только в Chrome.

https://www.w3.org/TR/mediaqueries-4/

Это самый близкий я смог использовать только HTML и CSS, который применяет ландшафтную ориентацию к страницам с четным номером. Я знаю, что это не точное решение, и оно работает только в Chrome.

<html>
    <head>
        <style>
            .landscape {
                page-break-before: always;
            }
            @page :left {
                size: landscape;
            }
        </style>
    </head>
    <body>
        <p>This is a normal paragraph.</p>
        <p class="landscape">This is in landscape form, following a page break.</p>
    </body>
</html>

Ответ 2

Я думаю, что лучший способ добиться этого - сделать следующее:

@media print{
    .class-name{
        @page{
            size:landscape;
        }
    }
}

Я не проверял это, поэтому исправьте меня, если я ошибаюсь. Удачи!

Ответ 3

Я действительно не понимаю, что вы сделали с:

@page rotated {
  size: landscape;
}
@media print{
  .rotate {
    page: rotated;
  }
}

В любом случае, вы хотите напечатать несколько страниц в режиме landscape, в то время как другие страницы должны быть в режиме по умолчанию (portrait). Поэтому я предлагаю следующее:

@media print {
    body.special-page {
        transform:rotate(180deg);
        -webkit-transform: rotate(91deg);
        -moz-transform: rotate(10deg);
        -ms-transform:rotate(20deg);
    }
}

И мы добавим .special-page для body. (Возможно, через JS):

<body class="special-page">
  <p>
  Lorem ipsum dolor sit amet, his mucius sensibus omittantur 
 et, ex cum nemore iuvaret. Voluptua constituam ad nam. Est ei etiam 
 labitur, instructior definitiones ad sit. Ut probo assum 
 scribentur pro. Dicant epicuri ea pri.
  </p>
</body>

Оформить заказ jsbin

Мы пишем конкретные стили для режима print страницы через @media print, и мы вращаем всю страницу 180deg, чтобы она работала как в ландшафтном режиме, если body содержит .special-page класс.

Я не мог найти другой способ, используя @page и классы.

Ответ 4

Трюк в атрибуте media установлен на print следующим образом:

<style media="print"></style>

Затем используйте этот CSS внутри этого элемента style:

@page {
  size: landscape;
}

Вот рабочий пример, который позволяет печатать в обоих направлениях:
(Протестировано и работает на Chrome, Edge и Firefox.)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Sorry for using so much Lorem ipsum O:)</title>
  <style media="print">
    /* this prints the page in landscape by default. */
    @page {
      size: landscape;
    }
    /* If you would like to rotate the body element: */
    /*body {
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
    }*/
    /* If you would like to rotate the body element in the other direction: */
    /*body {
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }*/
  </style>
</head>
<body>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
</body>
</html>

Удачи и всего наилучшего.

Ответ 5

Я создал пустой документ MS Document с настройкой Landscape, а затем открыл его в блокноте. Скопировано и вставлено следующее на мою страницу html

<style type="text/css" media="print">
@page Section1
{size:11 8.5in;
margin:.5in 13.6pt 0in 13.6pt;
mso-header-margin:.5in;
mso-footer-margin:.5in;

  • Элемент списка

    МСО-бумага-источник: 4;} div.Section1 {Страница: Раздел1;}

     положить текст/изображения/другие вещи

Предварительный просмотр печати показывает страницы в ландшафтном размере. Это, похоже, отлично работает на IE и Chrome, Вы также можете видеть это.