page-orientation

Ограниченная доступность

Эта функция не является Baseline, так как она не работает в некоторых из самых широко используемых браузеров.

Описание page-orientation CSS для правила @page управляет поворотом печатной страницы. Оно обрабатывает поток контента по страницам при изменении ориентации страницы. Это поведение отличается от описания size, так как пользователь может определить направление поворота страницы.

Это описание помогает с макетом и ориентацией печатных документов, особенно при печати документов с двух сторон. Пользователь может указать, как будут поворачиваться страницы при печати. Это особенно полезно для размещения контента, такого как таблицы, которые могут быть шире остального контента, в другой ориентации.

Примечание: Поля и другие позиционные элементы не взаимодействуют со специфическим способом с этим описанием. Поля выстраиваются как обычно на неповернутой странице, а затем поворачиваются вместе со всем остальным.

Синтаксис

/* Displays the print content in an upright position */
@page {
  page-orientation: upright;
}

/* Displays the print content rotated counter-clockwise */
@page {
  page-orientation: rotate-left;
}

/* Displays the print content rotated clockwise */
@page {
  page-orientation: rotate-right;
}

Значения

upright: Ориентация не применяется, и страница выстраивается и форматируется как обычно.
rotate-left: После выстраивания страницы, страница должна отображаться повернутой на четверть оборота влево (против часовой стрелки).
rotate-right: После выстраивания страницы, страница должна отображаться повернутой на четверть оборота вправо (по часовой стрелке).

Формальное определение

Связанное правило at-rule	`@page`
Начальное значение	`upright`
Вычисленное значение	как указано

Формальный синтаксис

page-orientation = 
  upright       |
  rotate-left   |
  rotate-right

Примеры

Поворот печатных страниц

Этот пример показывает, как можно повернуть содержимое печатного документа для адаптации к содержимому страницы и ее положению.

CSS

В этой первой части кода CSS устанавливаются именованные страницы для определения направления поворота содержимого.

@page upright {
  size: portrait;
  page-orientation: upright;
}

@page left {
  size: landscape;
  page-orientation: rotate-left;
}

@page right {
  size: landscape;
  page-orientation: rotate-right;
}

Следующая вторая часть кода CSS объявляет правило именованной страницы, определенное выше для селекторов, таких как <section class="left">…</section>.

@media print {
  .upright {
    page: upright;
  }
  .left {
    page: left;
  }
  .right {
    page: right;
  }
}

Результат

Нажмите кнопку печати, чтобы увидеть повернутые страницы.

Спецификации

Спецификация
CSS Paged Media Module Level 3 # page-orientation-prop

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`page-orientation`	85	85	предварительный просмотр	71	Нет	85	Нет	60	Нет	14.0	85

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@page/page-orientation