# HTML/CSS в печатный PDF

Верстает многостраничный печатный PDF прямо из HTML и CSS: размер и поля @page, колонтитулы глав, счётчики страниц, обрезные и приводные метки, выпуски.

> Каноническая страница: https://elysiatools.com/ru/tools/pdf-typesetting-html-css-nojs-print

- **Категория:** Document Tools

- **Ключевые слова:** html в pdf, пагинированные медиа css, pagedjs, page css, обрезные метки, выпуск, маргинальные боксы, бегущий колонтитул, счётчик страниц, печатный pdf, вёрстка, пагинация, print css, chromium печать

## Обзор

Вёрстка для пагинированных медиа CSS: подайте один самодостаточный HTML-документ, чей CSS несёт печатный дизайн, и инструмент отрендерит разбитый на страницы печатный PDF — рабочий процесс «выход качества LaTeX из HTML», без единой строки JavaScript в документе. Рендерер загружает файл в headless Chromium в режиме print-медиа и печатает с размером страницы из CSS и включённой печатью фонов. Два движка: по умолчанию Paged.js — полифил (MIT) пагинированных медиа W3C, закрывающий то, чего браузеры не умеют: обрезные и приводные метки (свойство marks), выпуски для подрезки, бегущие колонтитулы через маргинальные боксы вроде @top-center с заголовками глав через string-set, счётчики page и pages, именованные страницы, генерируемое содержимое для списков и сносок — он режет контент на фиксированные страничные боксы и рисует метки за линией реза. Нативный Chromium — резервный движок: Chrome 131+ сам реализует размеры и поля @page и все шестнадцать маргинальных боксов, что покрывает многие макеты, но отрисовка меток ограничена — потому полифил и существует. В режиме «Авто» берётся Paged.js, пока встроенный полифил доступен, иначе — нативный. Практика: документ должен быть самодостаточным (инлайновые стили, картинки data-URI) — рендерер не ходит в сеть; @page size принимает любую CSS-длину или именованный размер плюс landscape; страница PDF вырастает на величину выпуска, чтобы метки и выпуск легли за линией реза, готовые в типографию; сложные письменности верстаются системными шрифтами хоста. Метаданные фиксируют использованный движок и число страниц, разобранное Paged.js, чтобы проверить разбивку до отправки в печать.

## Входные данные

- **HTML-документ** (file)
- **Дополнительный CSS (необязательно)** (file)
- **Движок вёрстки** (select)

## Когда использовать

- Когда необходимо подготовить многостраничный буклет, каталог или книгу для офсетной либо цифровой печати с обрезными метками и вылетами.
- Когда требуется оформить отчёт или документацию с колонтитулами, содержащими заголовки текущих глав и счётчики страниц вида «страница X из Y».
- Когда вёрстка печатных макетов ведётся на чистом HTML и CSS без использования LaTeX или настольных издательских систем.

## Как это работает

- Пользователь загружает исходный HTML-документ (со встроенными стилями и графикой в base64) и при необходимости отдельный файл со стилями CSS.
- Выбирается движок рендеринга: полифил Paged.js для полноценной поддержки меток реза и сложных маргинальных боксов, нативный рендерер Chromium или автоматический режим.
- Headless Chromium открывает документ в режиме print-медиа, вычисляет геометрию страниц по правилу @page и выполняет печать с фоновыми изображениями.
- Генерируется готовый PDF-файл, в котором учтены размеры страницы, расширенные поля вылетов под обрез и метаданные о количестве свёрстанных страниц.

## Сценарии использования

- Верстка брошюр и методических пособий формата A5 с двухсторонними колонтитулами и метками совмещения для полиграфии.
- Генерация корпоративных годовых отчётов формата A4 с автоматической сквозной нумерацией страниц через CSS-счётчики.
- Создание печатных технических спецификаций и каталогов продукции из сгенерированного HTML-кода без ручной вёрстки.

## Частые вопросы

### Может ли инструмент загружать внешние шрифты и картинки по URL?

Нет, сетевые запросы заблокированы. Документ должен быть самодостаточным: изображения встраиваются через data-URI, а стили передаются инлайново или отдельным файлом.

### Чем движок Paged.js отличается от нативного Chromium?

Paged.js эмулирует спецификацию W3C Paged Media, добавляя метки реза, вылеты (bleed) и расширенные маргинальные боксы. Нативный Chromium использует встроенную печать браузера.

### Как добавить динамический заголовок текущей главы в колонтитул?

Назначьте имя строки через свойство string-set для заголовка h1/h2 и выведите его в маргинальном боксе правила @page с помощью content: string(название).

### Как задать нестандартный размер страницы макета?

Используйте свойство size внутри блока @page в CSS, например: size: 148mm 210mm; или именованный формат с ориентацией: size: A4 landscape;.

### Увеличивается ли итоговый размер страницы PDF при указании вылетов под обрез?

Да, при использовании Paged.js размер листа PDF автоматически расширяется на величину bleed, чтобы обрезные и приводные метки располагались за линией реза.

## Связанные инструменты

- [HTML в PDF](https://elysiatools.com/ru/tools/html-to-pdf-renderer): Рендерит ограниченный HTML в PDF
- [Шаблоны Колонтитулов PDF](https://elysiatools.com/ru/tools/pdf-header-footer-snippets): Преобразует HTML в PDF и добавляет логотип, заголовок и дату
- [HTML письма в PDF](https://elysiatools.com/ru/tools/libreoffice-html-mail-to-pdf): Рендерит HTML письма в PDF с сохранением базовой верстки
- [Темы Markdown в PDF](https://elysiatools.com/ru/tools/markdown-to-pdf-theme-pack): Конвертирует Markdown в PDF с светлой, тёмной или печатной темой
- [Извлечение таблиц PDF в CSV/JSON](https://elysiatools.com/ru/tools/pdf-table-extractor-to-csv-json): Извлекает таблицы из PDF через OpenDataLoader и экспортирует в JSON, CSV или HTML
- [PDF в PowerPoint](https://elysiatools.com/ru/tools/pdf-to-powerpoint): Извлекает текстовое содержимое из PDF-файлов и конвертирует его в слайды презентации PowerPoint
- [PDF в текст расширенный](https://elysiatools.com/ru/tools/pdf-to-text-advanced): Расширенный конвертер PDF в текст с выбором страниц, параметрами форматирования и извлечением метаданных
- [Мост OCR PDF → структурированный JSON](https://elysiatools.com/ru/tools/ocr-pdf-to-structured-json-bridge): Извлекает текстовый слой PDF с геометрией (строки по y-координате, таблицы по промежуткам колонок, заголовки по кеглю, пары ключ-значение через двоеточие) и заполняет пользовательскую JSON-схему поле за полем — метки сопоставляются по нормализованным ключам, значения приводятся к объявленным типам и проверяются ajv.

## Примеры

- [PDF Примеры](https://elysiatools.com/ru/samples/pdf-samples): PDF примеры, созданные инструментами 2026-02-01..2026-02-10
- [Примеры Markdown Презентаций](https://elysiatools.com/ru/samples/md-slide-deck-to-pdf): Markdown колоды в стиле Remark/Marp для тестирования экспорта в PDF
- [Примеры HTML с изображениями](https://elysiatools.com/ru/samples/html-with-images): Примеры исходного кода HTML с изображениями для тестирования извлечения
- [Образцы HTML](https://elysiatools.com/ru/samples/html-viewer-samples): Образцы файлов для браузерного HTML просмотрщика