Печатный каталог в HTML — сверстать и не пожалеть

Когда нужно обновить каталог оборудования, обычно вспоминают о привычных инструментах для печатной вёрстки. В этом проекте мы пошли другим путём: каталог SIMATIC собирается вручную в HTML и CSS, а PDF получается при печати из браузера.

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

Векторные иллюстрации без компромиссов

Отдельно важен формат SVG. Его поддержка появилась в Word лишь в относительно новых версиях, тогда как в HTML векторная иллюстрация подключается почти так же просто, как обычная картинка. В PDF и на печати SVG остаётся вектором: тонкие линии не теряют чёткости, а мелкие подписи остаются читаемыми. Для логотипов это особенно очевидно, но ещё полезнее такой подход для чертежей и схем подключения.

Переводить такую схему в растр обидно, особенно если она отрисована с нуля. Иногда это приходится делать ради единого стиля: в исходных руководствах схемы часто создавались разными людьми, в разное время и с разной детализацией или логикой обозначений. В целом они понятны, но в каталоге хочется не только передать информацию, но и аккуратно встроить её в общий дизайн.

Для работы с такими иллюстрациями я использую бесплатный редактор Inkscape. В нём можно извлечь из PDF чертёж или логотип, доработать его и сохранить в простом SVG, который хорошо подходит для HTML. При необходимости SVG можно дополнительно оптимизировать специальными программами, чтобы уменьшить размер файла.

В случае с Word процесс был менее удобным: в документ приходилось вставлять растровую копию схемы, чтобы показать расположение элементов, а дизайнеру отдельно передавать исходник для финального макета. Затем нужно было ещё проверить, что исходник вставлен правильно и что в процессе не изменились шрифты или другие детали. В HTML исходный SVG можно сразу использовать в макете и проверить в браузере вместе со всей страницей.

Почему не собрать весь каталог в Inkscape

В современных версиях Inkscape появилась многостраничная вёрстка, поэтому теоретически каталог можно было бы собрать целиком в нём. Но для иллюстрации и для таблицы это принципиально разные задачи. В векторном редакторе таблица обычно состоит из отдельных текстовых фрагментов, горизонтальных и вертикальных линий. Чтобы изменить ширину одной колонки или добавить строку, приходится сдвигать и выравнивать множество объектов, следить за линиями, отступами и переносами текста.

В SVG можно использовать CSS, но на практике в векторных редакторах оформление и расположение чаще задают вручную: с помощью сетки, направляющих, привязок и инструментов выравнивания. Для отдельной схемы это удобно и даёт полный контроль. В многостраничном каталоге с десятками однотипных строк такой процесс быстро превращается в ручную работу, где легко нарушить общий ритм и что-нибудь не заметить. HTML-таблица, напротив, знает, что перед ней строки, ячейки и колонки: добавление позиции или изменение ширины колонки описывается правилом, а не перемещением каждого элемента по отдельности.

В этом каталоге центральную роль играют таблицы. Они не просто перечисляют товары, а формируют карту выбора оборудования для проектировщика или продавца: позволяют сравнить характеристики, совместимость и артикулы в одном месте. Для таких структурированных данных HTML особенно удобен — таблица остаётся таблицей, а не набором вручную выровненных текстовых полей.

Это особенно полезно на этапе черновика. Отдел продаж или руководитель может попросить уточнить таблицу, добавить позицию или исправить ошибку. В привычной цепочке после этого снова меняется документ, затем дизайнер вручную выравнивает текст, линии, отступы и цвета. В HTML изменения вносятся в один исходник, а общие стили сразу применяются ко всему каталогу.

За счёт этого с дизайнером можно заранее договориться о палитре, отступах, размерах и правилах оформления — и закрепить их в CSS. К моменту финальной подготовки остаётся не пересобирать каталог, а выполнить полиграфическую доводку: при необходимости перевести цвета из RGB в CMYK, немного скорректировать отдельные элементы и обложку. В результате получается макет, почти готовый к передаче в печать.

Например, базовые цвета каталога заданы в одном месте:

: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;
}

Отдельное преимущество — работа с нейросетью. Word-документ или векторный макет плохо подходят для такого взаимодействия: в них много неявного форматирования, привязанных объектов и ручного позиционирования. Нейросети сложно надёжно изменить такой файл, не затронув соседние элементы и не нарушив выравнивание. HTML, напротив, состоит из понятной структуры и коротких правил CSS: текст, таблицы и блоки явно описаны в коде.

Проект можно разделить на несколько файлов: отдельно хранить стили, страницы, таблицы или данные. Нейросеть может внести точечное изменение в нужный фрагмент, а затем его легко проверить в браузере. Таблица или текстовый блок не начинают произвольно «плавать» по странице и не требуют после каждой правки ручного выравнивания — их положение и внешний вид задаются общими правилами.

У подхода есть границы. HTML вряд ли будет лучшим основным инструментом для каталога, где каждая страница — самостоятельная дизайнерская композиция с нестандартной типографикой, коллажами и сложной ретушью. Он также потребует другого процесса, если типография предъявляет строгие требования к PDF/X, плашечным цветам, оверпринтам и детальному контролю CMYK. Сложные многоязычные издания с автоматической пагинацией, сносками, оглавлениями и интенсивным перетеканием текста тоже обычно удобнее собирать в издательской системе.

Откуда эта задача

Я периодически верстаю брошюры для отдела продаж, хотя это не моя профессия. Раньше я работал во внутренней технической поддержке и помогал коллегам подбирать оборудование. Вопросы повторялись: как выбрать допконтакт к этому контактору, чем отличаются эти две шалабушки, мне на 630 Ампер — где взять артикул. Каталог решает именно эту проблему — он собирает ответы в одном месте и делает ассортимент понятным без отдельного обращения к специалисту.

Достаточно один раз хорошо собрать таблицу, и поток одинаковых вопросов заметно сокращается. Для продавца или проектировщика она становится картой: можно быстро сопоставить характеристики, увидеть совместимость и выбрать нужную позицию. При этом печатный каталог не исчезает после первой рассылки — он остаётся на полке у продавца или покупателя и работает долго. Ассортимент электрооборудования обычно не меняется радикально за несколько месяцев, поэтому у такой брошюры есть срок жизни.

В этом смысле каталог — ещё и реклама, но полезная. Когда у человека возникает задача подобрать оборудование, он с высокой вероятностью возвращается к источнику, который уже помог ему сориентироваться. А дальше имеет значение простая деталь: чьи контакты указаны на обложке, тому и позвонят.

Почему появилась идея с HTML

К HTML я пришёл после очередного каталога, который пришлось собирать в Word. Это был 35-страничный каталог преобразователей частоты INVT 2025, подготовленный на основе китайских руководств. Каталог быстро скопировали «конкуренто-партнёры» — это стало ещё одним подтверждением того, что понятная структура и собранная в одном месте информация действительно полезны.

Но во время подготовки стало видно и другое. Мелких правок было много: менялись формулировки, строки в таблицах, отдельные характеристики и артикулы. Чтобы с ними работать, приходилось разделять текстовую и табличную части по разным документам, затем копировать текст в CorelDRAW, а таблицы повторно экспортировать после каждой поправки. После этого макет снова требовал ручной доводки: проверить переносы, выровнять элементы, восстановить расстояния между блоками.

Именно тогда возник вопрос: можно ли оставить каталог обычным структурированным исходником, а не каждый раз собирать его заново из фрагментов? HTML показался естественным кандидатом: таблицы, текст и правила оформления существуют в одном проекте, а экспорт в PDF происходит уже после внесения всех правок.

Первый каталог: Блокнот, браузер и Алиса

HTML меня не пугал, поэтому следующий, более простой каталог я начал делать в Блокноте — том самом, который есть почти на любом компьютере с Windows. Для первого теста я сверстал таблицу в Word, отправил её Алисе и попросил превратить в HTML. Получившийся код вставил в Блокнот, сохранил файл с расширением .html и открыл в браузере.

Следующим шагом была имитация листа A4: размеры страницы, поля и базовые стили. Дальше началась итеративная работа с нейросетью — добавить текст, поправить таблицу, изменить отступы или цвет, настроить повторяющиеся элементы. Первые страницы удалось собрать довольно быстро.

Нейросеть хорошо справляется с текстом и повторяющимися правилами оформления: она может внедрить новый блок, исправить формулировки, дополнить таблицу или привести стили к одному виду. В результате работа стала заметно живее, чем в Word: вместо ручного перетаскивания объектов я формулировал задачу, получал правку в коде и сразу видел результат в браузере.

Переход в VS Code

Дальше я перешёл в Visual Studio Code. Он оказался удобнее Блокнота не потому, что нужен какой-то специальный «профессиональный» набор инструментов, а потому, что помогает держать проект в порядке: видно структуру файлов, можно быстро искать текст по всему каталогу, открывать рядом HTML и CSS и не теряться в длинных таблицах. Редактор умеет автоматически форматировать код, а команда Go to Definition позволяет перейти от имени класса в HTML к его определению в CSS. Это особенно удобно, когда каталог разрастается и одинаковые стили или названия нужно поправить сразу в нескольких местах.

Через некоторое время надоело постоянно сохранять файл и вручную обновлять страницу в браузере. Здесь помогло расширение Live Server. Его можно найти во встроенном магазине расширений VS Code по названию Live Server: оно запускает локальную страницу в браузере и автоматически обновляет её после сохранения файла.

После установки достаточно нажать правой кнопкой мыши на файле index.html в проводнике проекта и выбрать Open with Live Server. Браузер откроет страницу по локальному адресу, а после сохранения HTML или CSS обновит предпросмотр.

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

Нейросеть можно подключить и непосредственно к VS Code — через расширения или отдельные инструменты для работы с кодом. Эта тема уже подробно разобрана во множестве статей, поэтому здесь я не буду останавливаться на выборе конкретного решения. Для каталога важен сам принцип: исходник остаётся структурированным и достаточно простым, чтобы получать и проверять точечные правки быстро.

Что получилось в итоге

В результате я сверстал серию из трёх взаимодополняющих каталогов:

• Контроллеры SIMATIC S7-1200;

• Контроллеры SIMATIC S7-1500;

• Станции ввода-вывода SIMATIC ET 200SP.

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

Минимальный пример каталога A4 на HTML

Чтобы не раздувать статью, я подготовил небольшой самостоятельный пример. В нём одна печатная страница A4 и таблица оборудования. Стили встроены в HTML, поэтому файл можно открыть сразу после сохранения — именно с такого минимального шага и начался первый каталог.

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

Печать HTML в PDF из браузера Microsoft Edge

Для экспорта не нужен отдельный конвертер. Каталог открывается в Microsoft Edge, затем нажимается Ctrl+P, а в качестве принтера выбирается «Сохранить в формате PDF». CSS уже задаёт размер A4, нулевые поля и правила для печатной версии, поэтому браузер формирует PDF прямо из HTML. Я использовал браузер, потому что он не требует дополнительных библиотек, уже установлен и хорошо справляется с задачей.

Есть важная настройка, без неё браузер может не вывести заливку шапки таблицы, фон промо-баннера и другие цветные элементы. Со стороны CSS для этого также стоит добавить print-color-adjust: exact и -webkit-print-color-adjust: exact — они подсказывают браузеру, что цвета и фоны нужно сохранять при печати.

/* Правила, которые браузер применяет только при печати или экспорте в PDF. */
@media print {
    @page {
        size: A4;
        margin: 0;
    }
    html,
    body,
    .a4-page {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    body {
        background: #fff;
    }
    .a4-page {
        margin: 0;
        box-shadow: none;
        break-after: page;
}   }

Как уменьшить PDF в десять раз: оптимизация в Acrobat

После экспорта я открываю готовый файл в Adobe Acrobat и сохраняю его как оптимизированный PDF. Наиболее важная настройка здесь — разрешение изображений: Acrobat позволяет привести их к нужному значению PPI и подобрать степень сжатия. Поэтому в HTML можно использовать исходные иллюстрации и не тратить время на подготовку отдельной уменьшенной версии каждой картинки.

В результате оптимизируется уже готовый PDF: при подходящих настройках его размер может уменьшиться примерно в десять раз, а иллюстрации при этом сохраняют нужное для просмотра и печати качество. Это отделяет работу над содержанием и вёрсткой от технической задачи по уменьшению веса итогового файла.

Итоги

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

Отдельный выигрыш — стоимость. Браузер, редактор кода и Live Server бесплатны: чтобы начать, не нужна лицензия на издательскую систему. Финальная оптимизация PDF тоже не требует подписки.

Цена решения тоже видна. В CSS легко запутаться: за кодом приходится следить, а правки нейросети — проверять глазами, потому что она уверенно меняет и то, о чём её не просили. Цвет в CMYK переводится вручную. Результат зависит от браузера. И главное: изменения нельзя вносить привычным способом, как в Word, — между вами и макетом стоит прослойка из кода и нейросети. WYSIWYG-редактор можно прикрутить, но идеальным он не будет.

Всё это — плата за отказ от привычной цепочки: документ в Word, макет в CorelDRAW. Поэтому подход стоит брать не «вместо вёрстки», а там, где он полезен: каталог с большим числом однотипных таблиц, который обновляется часто и проходит через много правок. Следующий каталог я начну сразу с HTML — уже зная, где придётся поработать руками.