Как сделать аккуратный PDF из HTML

Что нужно, чтобы HTML-страница хорошо печаталась, какой CSS управляет страницами и как избежать типичных проблем: разорванных таблиц, пропавших картинок и мелкого текста.

Открыть инструмент: Конвертер HTML в PDF

Вёрстка под ширину листа

У A4 с полями 20 мм полезная ширина 170 мм — около 643 CSS-пикселей. Более широкая вёрстка уменьшится, и текст станет мельче. Задайте картинкам max-width: 100 %, а колонкам сетки — ширину в процентах или fr.

CSS для печати в пяти строках

  • @page { size: A4; margin: 20mm; } — формат и поля.
  • h2 { break-after: avoid; } — заголовок не отрывается от текста.
  • tr, figure { break-inside: avoid; } — строки таблиц и рисунки не делятся.
  • .glava { break-before: page; } — каждая глава с новой страницы.
  • @media print { nav, button { display: none; } } — скрываем экранные элементы.

Шрифты и изображения

Шрифты, установленные только на вашем компьютере, на других не откроются: подключите веб-шрифт или используйте распространённые. Для печати картинкам нужно 150–200 пикселей на дюйм: фото на всю ширину A4 — около 1300 пикселей.

Какой способ выбрать

Для счетов, договоров и документации выбирайте «Сохранить PDF» — текст останется доступным для поиска. Для плакатов, грамот и макетов, которые должны выглядеть одинаково везде, подойдёт «Скачать PDF».