Имитировать страницу формата А4 в формате HTML

Мне нужно создать HTML-страницу с размером бумаги A4.

Я знаю, что размер бумаги A4 в пикселях: 595px x 842px (строка № 10-11). Но пока я помещаю эти размеры и пытаюсь распечатать страницу (я печатаю в PDF файл из-за временного отсутствия чернил), я не получаю, чтобы мой HTML полностью соответствовал странице: он намного меньше.

Когда я попытался добавить несколько пикселей (с коэффициентом, конечно), я получил 794px x 1122px (строка № 12-13), а вторая попытка печати (сохранение в файл PDF) привела к тому, что этот вариант немного больше, чем необходимо.

Итак, каково решение и почему 595px x 842px не может быть совместим с реальным A4, сохраненным в PDF?

Это пример

P.S. Я использую Chromium для Ubuntu 13.10 и не проверял его на Windows.

Я делаю это, чтобы иметь возможность просто изменять значения через PHP, а затем конвертировать HTML-страницу в PDF, например описанную здесь.

Ответ 1

HTML предполагает, что экран имеет 96 DPI или 1 пиксель составляет 1/96 дюйма.

На аппаратном обеспечении с очень высоким разрешением используется концепция логических пикселей, которые являются единицами, близкими к 1/96 дюйма, и каждый из которых состоит из нескольких пикселей устройства. Это справедливо для принтеров, но также для телефонов и других устройств с экранами с высоким разрешением.

Итак, если вы хотите, чтобы прямоугольник того же размера был A4 (21 × 29,7 см), вы должны использовать 794 × 1122 пикселя или в CSS, width:794px; height:1122px. Но вы также можете использовать физические единицы, width:21cm; height:29.7cm, если вы не хотите беспокоиться об этих логических пикселях.

Ответ 2

Если вы планируете распечатать это, помните, что вы должны печатать с разрешением 300 точек на дюйм, поэтому 8.5 "x11" * 300 = height: 3300px; ширина: 2550 пикселей.

Кроме того, я должен был буферировать .25 "для поля, так что просто сделайте 8" x 10.5 "перед преобразованием в пиксели.