Много лет назад, в ноябре 2005 года, AlistApart.com опубликовал статью о том, как они опубликовали книгу, используя только HTML и CSS. Смотри: http://alistapart.com/article/boom
Вот выдержка из этой статьи:
В CSS2 есть понятие постраничных носителей (листы бумаги), в отличие от непрерывных носителей (полосы прокрутки). Таблицы стилей могут устанавливать размер страниц и их поля. Шаблонам страниц могут быть заданы имена, а элементы могут указывать, на какой названной странице они хотят печататься. Кроме того, элементы в исходном документе могут вызывать разрывы страниц. Вот фрагмент из таблицы стилей, которую мы использовали:
@page {
size: 7in 9.25in;
margin: 27mm 16mm 27mm 16mm;
}
Имея американского издателя, нам дали размер страницы в дюймах. Мы, будучи европейцами, продолжили метрические измерения. CSS принимает оба.
После настройки размера и поля страницы нам нужно было убедиться, что в нужных местах есть разрывы страниц. Следующий отрывок показывает, как создаются разрывы страниц после глав и приложений:
div.chapter, div.appendix {
page-break-after: always;
}
Кроме того, мы использовали CSS2 для объявления именованных страниц:
div.titlepage {
page: blank;
}
То есть титульный лист должен быть напечатан на страницах с именем «blank». CSS2 описал концепцию именованных страниц, но их значение становится очевидным только тогда, когда доступны верхние и нижние колонтитулы.
В любом случае ...
Поскольку вы хотите напечатать A4, вам, конечно, понадобятся разные размеры:
@page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
В статье рассматриваются такие вещи, как настройка разрывов страниц и т. Д., Поэтому вы можете прочитать это полностью.
В вашем случае главное - сначала создать CSS для печати. Большинство современных браузеров (> 2005) поддерживают масштабирование и уже могут отображать веб-сайт на основе печатного CSS.
Теперь вам нужно, чтобы веб-дисплей выглядел несколько иначе, и адаптировать весь дизайн под большинство браузеров (включая старые, до 2005 года). Для этого вам нужно будет создать веб-файл CSS или переопределить некоторые части вашего CSS для печати. Создавая CSS для веб-отображения, помните, что браузер может иметь ЛЮБОЙ размер (подумайте: от «мобильного» до «телевизоров с большим экраном»). Значение: для веб-CSS ваши ширина страницы и ширина изображения лучше всего настраиваются с использованием переменной ширины (%), чтобы поддерживать как можно больше устройств отображения и клиентов для просмотра веб-страниц.
РЕДАКТИРОВАТЬ (26-02-2015)
Сегодня я наткнулся на другую, более свежую статью в SmashingMagazine , которая также посвящена разработке для печати с использованием HTML и CSS ... на тот случай, если вы сможете использовать еще один учебник.
РЕДАКТИРОВАТЬ (30-10-2018)
Мне стало известно, что size не является допустимым CSS3, что действительно правильно - я просто повторил приведенный в статье код, который (как было отмечено) был старым добрым CSS2 (что имеет смысл, когда вы смотрите в тот год статья и этот ответ были впервые опубликованы). В любом случае, вот вам действующий код CSS3 для удобства копирования и вставки:
@media print {
body{
width: 21cm;
height: 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
}
Если вы считаете, что вам действительно нужны пиксели (, вам следует избегать использования пикселей ), вам придется позаботиться о выборе правильного DPI для печати:
- 72 точек на дюйм (сеть) = 595 X 842 пикселей
- 300 точек на дюйм (печать) = 2480 X 3508 пикселей
- 600 точек на дюйм (высококачественная печать) = 4960 X 7016 пикселей
Тем не менее, я бы избежал хлопот и просто использовал cm (сантиметры) или mm (миллиметры) для определения размеров, так как это позволяет избежать рендеринга сбоев, которые могут возникнуть в зависимости от того, какого клиента вы используете.