
Здравствуйте, это блог IT‑Центра.
Новости компании из первых рук: все, что произошло в компании вчера, позавчера и в прошлый четверг. Все публикации очищены от белого шума и синхронизированы с RSS‑лентой.
Метки
Фото и видео © 2009–2023 www.svetlanalarina.com
Использование материалов блога — текст, фотографии и видеоролики — возможно только с указанием активной ссылки на источник.
Вёрстка текста для публикации на сайте

Как часто вы заходили на сайт в поисках информации и тут же закрывали страницу, потому что материалы ресурса невозможно читать? Слова сливаются в кашу, строчки набегают друг на друга, а взгляд спотыкается о союзы, болтающиеся в конце строки.
Качественные иллюстрации, которые подчеркивают тему статьи, привлекают внимание и заставляют вчитаться в текст. Опрятная, аккуратная вёрстка текста работает на этот же результат, причем для достижения этого результата не потребуется много вложений. Несколько усовершенствований — и материалы будут легче восприниматься читателями и индексироваться поисковиками.
Абзацы и подзаголовки
Первое, что необходимо сделать, если вы готовите к публикации длинный текст — разбить материал на логические части. Озаглавьте каждую часть и оберните каждый заголовок в теги h2
, h3
и т.д. — это нравится поисковым системам и облегчает работу над общим стилем статьи.
Разделите каждую часть на абзацы. Деление длинного текста на части задают графику всей статье, акцентируют внимание на логике повествования, дают отдых глазам и цепляют внимание подзаголовками при чтении по диагонали.
Один и тот же текст в двух вёрстках. Какой вариант читается легче?
Мы предлагаем разработку сайтов с помощью CMS или «с нуля». «Нулевые» сайты не опираются на громоздкие и ограниченные CMS, поэтому скорость загрузки страниц выше в 1.5‑2 раза, мы измеряли. В рамках сайта «с нуля» можно сделать всё. Или почти всё. Помимо этого мы готовы проконсультировать Клиента по вопросу выбора площадки для хостинга сайта, обсудив и прокомментировав все плюсы и минусы планируемого решения. Сайт - не сайт, если для пользователей поисковых систем он остается невидимым. Мы консультируем наших Клиентов по вопросам продвижения сайта в Сети: регистрации в поисковых системах, SEO‑оптимизации и т.д. Или берем на себя часть этих хлопот. Наш опыт показывает, что текст, написанный профессионалом, - наиболее простой путь опубликовать интересную статью на сайте. А правильно сверстать текст мы вам поможем.
Создание сайта
Мы предлагаем разработку сайтов с помощью CMS или «с нуля». «Нулевые» сайты не опираются на громоздкие и ограниченные CMS, поэтому скорость загрузки страниц выше в 1.5‑2 раза, мы измеряли. В рамках сайта «с нуля» можно сделать всё. Или почти всё.
Развертывание сайта на площадке хостера
Мы готовы проконсультировать Клиента по вопросу выбора площадки для хостинга сайта, обсудив и прокомментировав все плюсы и минусы планируемого решения.
Продвижение в Сети
Сайт — не сайт, если для пользователей поисковых систем он остается невидимым. Мы консультируем наших Клиентов по вопросам продвижения сайта в Сети: регистрации в поисковых системах, SEO‑оптимизации и т.д. Или берем на себя часть этих хлопот.
Консультации пользователей
Консультации сотрудников Клиента по вопросам обновления сайта. Наш опыт показывает, что текст, написанный профессионалом, — наиболее простой путь опубликовать интересную статью на сайте. А правильно сверстать текст мы вам поможем.
Висящие предлоги и союзы
Строка текста, которая заканчиваться одно‑ или двухбуквенными предлогами, союзами и частицами, тяжело читается и смотрится обрезанной. Чтобы избежать этого, двухбуквенные конструкции склеивают неразрывным пробелом со следующим словом. Неразрывный пробел запрещает браузеру переносить предложения на новую строку в месте склейки.
See the Pen nbsp-example by ItCntr (@itcntr) on CodePen.
15 бусинок, 2 июня и 12 км/ч
Правило похоже на предыдущее. Величины и их размерности, предметы и их количество пишут на одной строке, не допуская «подвисания» числительных. Для этого обе графемы склеивают неразрывным пробелом.
See the Pen Moscow Summer by ItCntr (@itcntr) on CodePen.
Неразрывный дефис
Неразрывный дефис ‑
используется, когда нужно запретить разделение дефисных конструкций на две части при переходе с одной строки на другую. В эту категорию попадают, например, составные имена собственные, для которых перенос неуместен в принципе.
See the Pen IT Center by ItCntr (@itcntr) on CodePen.
Тире вместо дефиса
Замена тире дефисом — типографская и грамматическая ошибка, которую заманчиво совершать день за днём: знак дефиса присутствует на любой клавиатуре, а тире нет. Тем не менее если в тексте присутствует длинное тире, его прописывают через код —
и проклеивают с предыдущим словом неразрывным пробелом. Исключение составляют случаи, когда тире стоит в начале строки и обозначает прямую речь. В этом случае тире склеивают неразрывным пробелом со следующим словом.
See the Pen Yoda asks by ItCntr (@itcntr) on CodePen.
Знак копирайта
Специфические символы, такие как знак копирайта или знак градуса добавляются в текст статьи с помощью числового кода или имени. Альтернативы: (с) вместо © — выглядят беспомощно и непрофессионально.
See the Pen copy-trade by ItCntr (@itcntr) on CodePen.
Кавычки
Кавычки повторяют судьбу длинного тире: правильных кавычек на компьютерной клавиатуре нет, поэтому их проставляют вручную числовыми или буквенными кодами. Кроме того, внешний вид кавычек меняется от языка к языку.
Для текста на русском языке внутренние кавычки оформляются кавычками‑лапками: „”, их коды „
, ”
, внешние — кавычками‑елочками «» с кодами «
, »
Та же пара для англоязычного текста: внутренние кавычки “”, внешние кавычки: ‘’.
See the Pen Nimbus 2000 by ItCntr (@itcntr) on CodePen.
Вместо послесловия
Когда формальные правила вёрстки выполнены, посмотрите на текст как на картинку и оцените графику веб‑страницы. Для этого уменьшите масштаб страницы браузера до 40‑50%. Оцените, как перетекают предложения в абзаце? Как абзацы взаимодействуют друг с другом? Если текст выглядит слишком плотно, поиграйтесь межстрочным интервалом и размером шрифта.
А затем сравните свёрстанную страницу с тем, что было в самом начале. Вам понравится результат.