Вёрстка

Происхождение и история термина

Один из исторических подходов к организации страницы — международный типографический стиль, также называемый швейцарским. Учебник BCcampus связывает его появление в Швейцарии и Германии с 1950-ми годами и выделяет композиционные сетки, ясность структуры и шрифты без засечек. Это история конкретного направления, а не дата изобретения вёрстки или сетки вообще. ^[1]

Для цифровой вёрстки первичным историческим документом служит рекомендация W3C CSS1 от 17 декабря 1996 года. CSS — каскадные таблицы стилей — описывает оформление элементов HTML, языка разметки веб-страниц. В оригинальной спецификации показана связь правила оформления с элементом документа, а модель форматирования строится на прямоугольных блоках с содержимым, внутренними отступами, рамками и внешними отступами. ^[5]

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

Суть и механизм

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

Сетка — система направляющих линий, которая делит пространство и помогает согласовать элементы. Колонки задают вертикальные области, горизонтальные линии — уровни размещения. В учебнике BCcampus сетка рассматривается как переход от замысла к организованному пространству. ^[1] Например, фотография может занимать две колонки, а короткая заметка — одну. Совпадающие границы связывают блоки, хотя сами направляющие читатель обычно не видит.

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

Ещё один рабочий объект — текстовый блок с заданными границами. Если после правки текста становится больше, нужно проверить, остался ли он видимым целиком. В Adobe InDesign термин overset text обозначает переполнение текста; программа может сообщать о нём через панель Preflight. ^[2] Устранить такой дефект можно разными способами, но выбор затрагивает содержание: увеличение блока, перенос части материала и согласованное сокращение текста дают разные результаты.

Для цифровой страницы пространственное расположение дополняется смысловой разметкой. Руководство W3C рекомендует обозначать области страницы, выстраивать уровни заголовков по отношениям между разделами и выбирать подходящие элементы содержимого. Это помогает навигации, в том числе при использовании программы экранного чтения. ^[3] Просто сделать строку крупнее недостаточно, если в структуре документа она остаётся обычным абзацем.

Виды и классификации

Практическое различение в этой статье строится по способу представления. Это редакционная схема для объяснения задач, а не обязательная отраслевая классификация.

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

По устройству сетки BCcampus, в частности, рассматривает одноколоночную, многоколоночную и модульную организацию. В последней пространство делится повторяющимися горизонтальными и вертикальными линиями. Перечисленные варианты — часть рассмотренных в учебнике способов организации; они не исчерпывают все композиционные решения. ^[1]

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

Как применяется на практике

Представим учебный номер российской районной газеты «Городской день». Название, размеры и материалы примера вымышлены. Ширина страницы составляет 240 мм. Слева и справа оставлены поля по 12 мм, внутри расположены три равные колонки с двумя промежутками по 6 мм. Главная статья занимает две колонки; справа размещены короткие новости. Фотография и её подпись входят в тот же материал, что и главная статья.

Редактор дополняет заголовок словами «после общественного обсуждения». Заголовок занимает дополнительную строку, и основной текст сдвигается. Если подпись была помещена в отдельный блок без учёта этого изменения, она может оказаться слишком далеко от фотографии. Проверка одного исправленного заголовка не обнаружит всю цепочку последствий. Поэтому в предлагаемом учебном процессе после изменения смотрят материал целиком, включая связанные элементы.

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

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

WCAG 2.2, международные рекомендации по доступности веб-контента, требуют в критерии 1.3.2, чтобы правильный порядок чтения можно было определить программно, если последовательность влияет на смысл. Программа должна получать этот порядок из данных документа; на веб-странице для этого служит её структура. Тогда, например, программа экранного чтения может последовательно представить материал человеку, который не видит его расположения на экране. ^{[3, 4]}

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

Как измерить или проверить

Начнём с геометрии сетки. Для одинаковых колонок их ширина вычисляется из ширины страницы, полей и межколонных промежутков:

Здесь (c) — ширина колонки, (W) — ширина страницы, (m_l) и (m_r) — левое и правое поля, (n) — количество колонок, (g) — промежуток между соседними колонками. Все линейные размеры должны быть в одинаковых единицах. Формула — геометрический расчёт редакционного примера, а не норматив выбора размеров.

Для страницы шириной 240 мм после двух полей остаётся 216 мм. Два промежутка занимают ещё 12 мм, поэтому три колонки получают 204 мм, то есть по 68 мм каждая. Изображение на две колонки имеет ширину 142 мм: две ширины колонки и промежуток между ними. Если забыть промежуток, край изображения не совпадёт с внешней границей второй колонки.

Обратная проверка возвращает исходную ширину: три колонки по 68 мм, два промежутка по 6 мм и два поля по 12 мм вместе дают 240 мм. Для одной колонки промежутков нет. При нулевом количестве колонок деление невозможно; отрицательная или нулевая ширина содержимого означает, что выбранные размеры не оставляют места для обычной колонки. Хорошая арифметика подтверждает геометрию, но не удобство чтения.

Затем проверяют технические условия. Preflight — предварительная проверка документа на возможные производственные проблемы. В InDesign она может обнаруживать отсутствующие шрифты, изменённые связи с файлами, переполнение текста и изображения с недостаточным разрешением. Профиль задаёт правила, а параметры позволяют выбрать проверяемые слои и учитывать определённые объекты. Отдельно работает диапазон страниц: он фильтрует список ошибок в панели. Фоновая проверка остальных страниц при этом не отключается. ^[2]

Отсюда следует конкретная граница просмотра. В учебном двадцатиполосном номере сотрудник включил фильтр страниц 1–4 и просмотрел показанные результаты. Он рассмотрел результаты для четырёх полос; результаты остальных шестнадцати пока не просмотрены, хотя программа продолжает их проверять. Пустой список при таком фильтре говорит лишь об отсутствии показанных ошибок в выбранном диапазоне по действующим правилам. Это не подтверждает ни правильность фамилии героя, ни соответствие фотографии подписи.

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

Для веба отдельный ориентир даёт критерий WCAG 1.4.10. Содержимое должно перестраиваться без потери информации и функциональности и без прокрутки в двух направлениях: для вертикально прокручиваемого содержимого проверяется ширина, эквивалентная 320 CSS-пикселям, для горизонтально прокручиваемого — высота 256 CSS-пикселей. Части, которым двумерная компоновка необходима для смысла или использования, например таблица данных, имеют оговорённое исключение. ^[4]

CSS-пиксель здесь — единица измерения в веб-оформлении, отличная от физического пикселя экрана. ^[4]

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

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

Ошибки, ограничения и спорные вопросы

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

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

Четвёртое — перенести итог одной проверки на весь выпуск. В нашем примере 90% страниц без переполнения ничего не говорит о точности дат или удобстве мобильного представления. Полезный протокол называет конкретный файл или адрес, состав проверенного набора и условия просмотра. Тогда другой сотрудник понимает, какой результат можно повторить и какие вопросы ещё открыты.

Правовой аспект

Для российского периодического печатного издания часть первая статьи 27 Закона РФ от 27.12.1991 № 2124-1 «О средствах массовой информации» устанавливает сведения каждого выпуска. Среди них — название, учредитель, фамилия и инициалы главного редактора, тираж и адреса редакции, издателя, типографии; перечисление здесь не заменяет полный состав нормы. Использована редакция от 26.06.2026, действующая с 01.09.2026. ^[6]

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

Дата начала действия текущей редакции не означает нового введения всех требований статьи 27. Федеральный закон от 26.06.2026 № 215-ФЗ изменяет часть десятую статьи 4 закона о СМИ. Его положения, отложенные до 24.12.2026, относятся к банковским сведениям и законодательству об иностранных агентах и не меняют рассматриваемые выходные данные. ^[7]

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

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

• Свёрстанная полоса
• Макет номера
• Полоса
• Заголовок
• Корректор
• Структура сайта