Під час друку з 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, де, якщо вершина плаваючого елемента збігається з розривом сторінки, плаваючий елемент взагалі не друкується [підтвердження: Реннан Rieke].
Пропонована стратегія розривів сторінок
Найкраща політика (звичайно, поки браузери не покращуються) - це дати їм перерву (га!), Надавши їм якомога більше розсуду у виборі точок перерви. У них виникають особливі проблеми з бічними елементами, такими як розташовані <div>s; пливе; та таблиці з двома або більше стовпцями. Отже, відповідні стратегії включають створення <div>статичного статичного; плаваючі поплавці; та розбиття таблиць, що використовуються для компонування, на ряд коротших таблиць [Примітка 1]. Незважаючи на те, що властивості розриву сторінки погано підтримуються, не обмежуйте браузери: використовуйте значення "уникати" якомога легшим дотиком.
Веб-переглядачі дійсно не люблять плаваючих елементів, коли мова йде про друк (див. Попередній розділ). Вирішення проблеми полягає у розблокуванні плаваючих елементів (float: none та можливо ширина: auto також). Якщо під час друку ви ризикуєте мати плаваючий елемент, він може друкуватись через розрив сторінки (верхівка плаваючого елемента прив’язана до поточного рядка). Залежно від природи плаваючого матеріалу це може бути прийнятною поведінкою. Якщо ні, то лише Opera дозволить вам придушити такий розкол.
Якщо у вас повинен бути надрукований лише якийсь контент на одній сторінці, наприклад, бланк, ваш найкращий шанс - це зробити його значно менше однієї сторінки, щоб ви мали хороший запас помилок. Що стосується розміру канцелярських товарів, ви можете взяти на себе стандарт міжнародного розміру формату А4 (ISO) для міжнародної аудиторії) або розмір письма США (виключно для американської аудиторії), хоча немає гарантії, яким розміром користувачі користуються. Але запитайте себе, як би ви відреагували, якби ви створили форму на одній сторінці за допомогою текстового процесора, а користувач із порушеннями зору попросив версію з великим шрифтом. Як завжди з веб-дизайном та CSS, життя стане набагато простішим, якщо ви не намагаєтеся боротися з користувачем, наполягаючи на досконалості пікселів або гарантованому розриві сторінки. Дизайн рідини застосовується як на папері, так і на екрані.
Це питання мене давно хвилює. Я виявив, що якщо ви клацніть правою кнопкою миші на сторінці, перейдіть до "Перевірити елемент", а потім перейдіть до "Редактора стилів" у вікні огляду, ви можете додати:
p {
page-break-inside: avoid;
}
Зазвичай це буде робити. Я бачив, як деякі люди пропонують ввести цей стиль всередину тегу 'img', але це не працювало для мене на жодній сторінці, яку я намагався ним використовувати.
Цей тег також зручний, якщо ви хочете відокремити основні елементи сторінки. Наприклад, коли я роздруковую речі з EBSCOhost, якщо ввести цей стиль у тег "body", цитата буде розміщена на одній сторінці, текст на їх власних сторінках та зображення на їх власних сторінках. Це дійсно зручний стиль.
imgтег у a, pі це все одно спрацює.