Собираем печатный каталог в HTML вместо Word и CorelDRAW

Печатный каталог оборудования обычно собирают из Word: готовят текст и таблицы, затем передают дизайнеру, который переносит всё в CorelDRAW или InDesign. Пока каталог создаётся один раз, такой процесс работает нормально.

Я не дизайнер и не верстальщик, но работал в технической поддержке и периодически собираю брошюры для отдела продаж. Очередной каталог на 35 страниц я делал в Word, потом дизайнер переносил его в CorelDRAW. Каждая мелкая правка — новая строка в таблице, изменённый артикул, уточнённая формулировка — запускала один и тот же цикл: правим Word, экспортируем таблицы, копируем текст в макет, выравниваем вручную, проверяем переносы. И так по кругу.

В какой-то момент я задал себе простой вопрос: почему каталог нельзя держать одним структурированным исходником, а PDF собирать только в самом конце? Так я пришёл к HTML.

Взял HTML и CSS. Разметил лист A4, задал поля, палитру и правила для таблиц — и стал собирать каталог как обычную веб-страницу. PDF получается не отдельным конвертером, а печатью из браузера: Ctrl+P → «Сохранить в формате PDF». Всё.

На скрине преобразование в pdf формат встроенными средствами браузера.

Три каталога серии SIMATIC (S7-1200, S7-1500, ET 200SP) я собрал именно так. Стили у них похожие, потому что палитра и отступы описаны в одном месте:

:root { --corporate-color: #173f6f; --accent-color: #b9cfe9; --light-bg: #e8edf5; --table-header-bg: #dae5f2; --text-dark: #2c3e50; --text-medium: #333333; --text-light: #666666; --text-white: #ffffff; }

Меняешь одну переменную — меняется весь каталог. Не нужно обходить сорок страниц и править цвет вручную, а ещё меньше соблазна ткнуть палитру на угад.

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

На скрине видно что таблица в векторном редакторе это набор линий, одна из таких линий выделена курсором. С буквами таже история.

2. SVG остаётся вектором. Схемы подключения и логотипы я подключаю как обычные картинки — в PDF и на печати они остаются чёткими. Тонкие линии не размываются, мелкие подписи читаются. Раньше приходилось переводить схемы в растр ради единого стиля и потом сожалеть об этом.

3. Правки вносит нейросеть, а я проверяю в браузере. Это, пожалуй, главный сдвиг. Word-документ или векторный макет нейросети менять тяжело — там много неявного форматирования и ручного позиционирования. HTML — это текст и короткие CSS-правила: модель точечно правит нужный фрагмент, а я через секунду вижу результат в браузере. Без пересборки макета.

Именно поэтому я ушёл из Блокнота в VS Code — не ради «профессиональных инструментов», а чтобы видеть структуру проекта, искать по всему каталогу, держать HTML и CSS рядом. Расширение Live Server автоматически обновляет страницу после сохранения — и работа начинает ощущаться как живой макет, а не как сборка документа по частям.

HTML не универсален.

Каталог, где каждая страница — авторская композиция с коллажами, сложной типографикой и ретушью, лучше собирать в дизайнерском инструменте — будет быстрее.
Если типография требует PDF/X, плашечные цвета, оверпринты и контроль CMYK — HTML добавит хлопот. Цвет в CMYK я перевожу вручную.
Результат будет зависеть от браузера, возможны нюансы.
WYSIWYG-редактор не прикрутить идеально. Между вами и макетом стоит прослойка из кода — к этому нужно привыкнуть.
Правки нейросети нужно проверять глазами. Она уверенно меняет и то, о чём её не просили.

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

Каталог стал одним проектом: HTML, CSS и таблицы лежат рядом.
Правка вносится в проект и через секунду видна в браузере.
PDF собирается печатью за минуту.
Из процесса ушёл самый неприятный этап — повторная сборка макета после каждой поправки.
Дизайнеру достаётся полиграфическая доводка, а не восстановление таблиц из экспорта.

По деньгам: браузер, VS Code и Live Server бесплатны. Лицензия на издательскую систему не нужна. Финальная оптимизация PDF в Acrobat уменьшает файл примерно в десять раз без потери качества иллюстраций — это тоже не требует подписки.

Пожалел ли я? Нет. Следующий каталог начну с прошлого проекта — стили уже готовы, их можно использовать повторно.

Сверстайте одну страницу A4 в HTML с встроенным CSS — этого достаточно для первого теста.
Откройте в Edge и нажмите Ctrl+P → «Сохранить в формате PDF».
Добавьте в CSS правила @media print с size: A4; margin: 0; и print-color-adjust: exact — иначе браузер может не вывести заливку шапки таблицы и фоны блоков.
Поставьте VS Code и Live Server — дальше правки пойдут заметно быстрее.

Минимальный пример страницы A4 с таблицей я специально сделал самостоятельным — его можно открыть сразу после сохранения и использовать как основу для экспериментов. Если тема зайдёт, следующим шагом — отдельный CSS, локальные шрифты и навигация.