При написании таблицы стилей печати есть способ гарантировать, что изображение всегда находится только на одной странице, а не на нескольких страницах. Изображения намного меньше размера страницы, но в зависимости от потока документов они оказываются внизу страницы и разделяются. Пример поведения, который я вижу, приведен ниже:
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.
css
image
printing
print-style
Дэвидтбернал
источник
источник
Ответы:
Единственное, что я могу придумать, - это использовать одно (или потенциально несколько) из следующих правил 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 , список и т. д.).Вот несколько полезных обсуждений: « Какие
media="print"
свойства CSS являются наиболее полезными и совместимыми с кроссбраузерностью? »Ссылки:
page-break-after
.page-break-before
.page-break-inside
.источник
page-break-inside:avoid
). Теперь мне напомнили, почему поплавки LaTeX - это боль.