При печати из Firefox (я думаю, в любой операционной системе) браузер разделяет изображения и иногда даже строки текста через разрывы страниц - верхняя часть изображения отображается внизу страницы n, а остальная часть отображается вверху. страницы n + 1.
Есть ли способ заставить Firefox сохранять изображения на отдельных страницах во время печати?
TLDR: разрывы страниц плохо поддерживаются браузерами (вероятно, по уважительной причине), поэтому в основном это должен сделать дизайнер страниц. В остальном вы мало что можете сделать, кроме копирования его в документ, возможно. И C-Net соглашается.
Разрывы страниц
Поскольку "поля печати" не находятся под вашим контролем как веб-автора, вы не можете гарантировать, сколько веб-документов будет напечатано на каждой странице и, следовательно, где будут разрывы страниц. Это будет зависеть от браузера пользователя, настроек браузера и принтера. И основной размер шрифта пользователя и размер канцелярских принадлежностей также находятся вне вашего контроля. Вы захотите использовать CSS, чтобы влиять (не контролировать) положение разрывов страниц. CSS2.1 Глава 13 Постраничные носители является важным чтением. Обратите внимание, что в этой главе CSS2.1 отбрасывает некоторые функции в CSS2, которые браузеры никогда не реализовывали.
Поддержка свойств разрыва страницы (например, разрыва страницы) является плохой, даже в последних браузерах, за исключением Opera (Opera 5 и более поздних версий), поддержка которой очень хорошая:
Хуже того, браузеры могут разбивать страницы в явно недопустимых местах (см. Также следующий абзац). Например, я нашел случаи, когда браузеры разбивали изображение по страницам. Тестирование на моих различных сайтах показывает, что обработка разрывов страниц в Opera, хотя и не идеальная, явно более надежна, чем в Firefox или IE.
В статье Эрика (см. Ниже) упоминается ошибка в браузерах на основе Gecko (Mozilla), связанная с печатью плавающих элементов. Эта ошибка, видимо, еще должна быть исправлена [на июль 2009 года], в результате чего всплывающие элементы обрезаются в конце печатной страницы, а иногда и только на одной странице печатного документа [Примечание 2]. Я обнаружил похожую проблему с плавающей точкой в старых версиях Opera (например, O7.21). В IE была обнаружена другая ошибка, когда, если верхняя часть плавающего элемента совпадает с разрывом страницы, плавающий элемент вообще не печатается [ССЛЕДОВАНИЕ: Реннан Рике].
Предлагаемая стратегия для разрывов страниц
Лучшая политика (конечно, пока браузеры не улучшатся) - дать им перерыв (ха!) предоставляя им как можно больше свободы действий при выборе точек останова. У них есть особые проблемы с соседними элементами, такими как позиционированные <div> s; поплавки; и таблицы с двумя или более столбцами. Таким образом, подходящие стратегии включают в себя позиционирование <div> статически; плавучие поплавки; и разбиение таблиц, используемых для разметки, на серию более коротких таблиц [Примечание 1]. Несмотря на то, что свойства разрыва страницы плохо поддерживаются, не ограничивайте браузеры слишком сильно: используйте значение "избежать" как можно более легким касанием.
Браузеры действительно не любят поплавки, когда дело доходит до печати (см. Предыдущий раздел). Обходной путь - отсоединить плавающие элементы (float: none и, возможно, width: auto). Если вы рискуете иметь плавающий элемент при печати, он может печататься через разрыв страницы (верхняя часть плавающего элемента привязана к текущей строке). В зависимости от природы всплывающего материала, это может быть приемлемым поведением. Если нет, только Opera позволит вам подавить такой раскол.
Если вам нужно, чтобы какой-то контент был напечатан только на одной странице, например, на форме, ваш лучший шанс - сделать его значительно длиннее одной страницы, чтобы у вас был хороший запас ошибок. Что касается размера канцелярских товаров, вы можете выбрать международный (ISO) размер A4 (для международной аудитории) или US Letter (для исключительно американской аудитории), хотя нет никакой гарантии, какой размер используют пользователи. Но спросите себя, как бы вы ответили, если бы вы создали одностраничную форму с помощью текстового редактора, а пользователь с ослабленным зрением запросил версию для большого шрифта. Как всегда с веб-дизайном и CSS, жизнь будет намного проще, если вы не попытаетесь бороться с пользователем, настаивая на совершенстве пикселей или гарантированном разрыве страниц. Жидкий дизайн применяется как на бумаге, так и на экране.
Эта проблема беспокоила меня долгое время. Я обнаружил, что если вы щелкнете правой кнопкой мыши на странице, перейдите к "Проверка элемента", а затем перейдите к "Редактор стилей" в окне проверки, вы можете добавить:
p {
page-break-inside: avoid;
}
Это обычно будет делать это. Я видел, как некоторые люди предлагали использовать этот стиль внутри тега img, но это не помогло мне ни на одной из страниц, которые я пытался использовать.
Этот тег также удобен, если вы хотите отделить основные элементы страницы. Например, когда я печатаю материал из EBSCOhost, добавление этого стиля в тег «body» поместит ссылку на одну страницу, текст на их собственные страницы и изображения на их собственные страницы. Это действительно удобный стиль.