Как настроить CSS с помощью медиа-запроса на динамически устанавливаемую ориентацию во время печати?CSS

Разбираемся в CSS
Ответить
Anonymous
 Как настроить CSS с помощью медиа-запроса на динамически устанавливаемую ориентацию во время печати?

Сообщение Anonymous »

Я пытался добавить разрыв страницы после элемента, когда страница находится в альбомной ориентации, с помощью медиа-запроса:

Код: Выделить всё

@media print and (orientation: landscape) {
.item2 {
break-after: page;
}
}
Это отлично работает, когда ориентация выбрана в диалоговом окне печати.
Однако, когда размер страницы предлагается через CSS, разрыв страницы не появляется:

Код: Выделить всё

@page {
size: a4 landscape;
}
Пример:

Код: Выделить всё

body {
print-color-adjust: exact;
}

.item1,
.item2,
.item3 {
width: 100%;
height: 200px;
}

.item1, .item3 {
background-color: gray;
}
.item2 {
background-color: red;
}

@page {
/* remove this line to see it work */
size: a4 landscape;
}

@media print and (orientation: landscape) {
.item2 {
break-after: page;
}
}


Протестировано в Chrome и Firefox.

Это ошибка или я делаю что-то не так?
Изменить:
Я пытаюсь установить правило @page динамически перед открытием диалогового окна печати, так как мне нужно обновить некоторые SVG через JS в зависимости от ориентации.

Подробнее здесь: https://stackoverflow.com/questions/798 ... ing-printi
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»