Стили печати: Как обеспечить, чтобы изображение не занимало разрыв страницы - PullRequest
Новая
       23

Стили печати: Как обеспечить, чтобы изображение не занимало разрыв страницы

78 голосов
/ 16 апреля 2010

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

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |  ________________  |
       | | Top of image   | |
       |____________________|
       ------page break------
        ____________________
Page 2 | | Rest of image  | |
       | |________________| |
       |         …          |

Что бы я хотел 

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |                    |
       |                    |
       |____________________|
       ------page break------
        ____________________
Page 2 |  ________________  |
       | | Full image     | |
       | |                | |
       | |________________| |
       |         …          |

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

1 Ответ

53 голосов
/ 16 апреля 2010

Единственное, что я могу придумать, - это использовать одно (или потенциально больше) из следующих правил CSS: 

img {
    page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-inside: avoid; /* or 'auto' */
}

Я наполовину напоминаю, что эти объявления применяются только к элементам уровня блока (поэтому вам также нужно определить display: block; на вашем изображении, или использовать какой-то контейнер для переноса и применить к нему правила (будь то в параграф, div, span, list и т.д ...).

Некоторые полезные обсуждения здесь: " Какие наиболее полезные media="print" специфические, совместимые с браузером свойства CSS? "

Ссылки:

...