Много лет назад, в ноябре 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;
}
То есть титульный лист должен быть напечатан на страницах с названием «пусто». 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 dpi (веб) = 595 X 842 пикселей
- 300 точек на дюйм (печать) = 2480 х 3508 пикселей
- 600 точек на дюйм (высокое качество печати) = 4960 х 7016 пикселей
Тем не менее, я бы избегал хлопот и просто использовал cm(сантиметры) или mm(миллиметры) для определения размеров, поскольку это позволяет избежать рендеринга сбоев, которые могут возникнуть в зависимости от того, какой клиент вы используете.