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

Вот важная новость с фронта ИИ: Yurmach 1 час назад Объяснить с Печатный каталог в HTML — сверстать и не пожалеть Простой 10 мин 1. 1K HTML * PDF CSS * Дизайн Кейс Когда нужно обновить каталог оборудования, обычно вспоминают о привычных инструментах для печатной вёрстки. В этом проекте мы пошли другим путём: каталог SIMATIC собирается вручную в HTML и CSS, а PDF получается при печати из браузера.

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

Технические детали

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

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

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

Отраслевые последствия

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

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

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

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.