Василий Половнёв и Игорь Петров. ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей
«Когда на сайте не следят за оформлением текста, это выглядит неряшливо и непрофессионально: упрощённые кавычки, дефис вместо тире, предлоги отклеились и висят в воздухе, а вместо спецсимволов уродливые ТМ и (c).
Наводить красоту — „богатую“ типографику — можно вручную с раскладкой Бирмана или сервисами вроде Типографа Студии Лебедева. Узнать правила оформления текста поможет справочник Мильчина».
Василий Половнёв и Игорь Петров. ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей
Поделюсь опытом и мыслями насчёт автоматического типографирования текста на сайте. Всё это актуально для любого языка программирования, движка или админки.
Типографируйте на сервере
Скачки содержимого после загрузки не только жутко бесят, но и создают CLS (Cumulative Layout Shift), из‑за чего поисковики могут понизить рейтинг сайта в поисковой выдаче.
Если типографировать страницу на клиенте — уже после того, как браузер получил содержимое с сервера, — вы получите либо задержку отрисовки, либо риск скачков содержимого, особенно заметных на крупных кеглях и в заголовках.
Скачки содержимого после загрузки не только жутко бесят, но и создают CLS (Cumulative Layout Shift), из‑за чего поисковики могут понизить рейтинг сайта в поисковой выдаче.
Типографируйте автоматикой
Бывают расширения, которые добавляют кнопку типографа в админку, в визуальный редактор. Проблема тут в человеческом факторе — про кнопку могут забывать, на неё могут забивать. В итоге разные страницы сайта могут иметь разное оформление текста.
Типограф по кнопке может быть уместен, когда нужно иметь возможность не типографировать часть текста, но представить такую ситуацию в повседневных задачах сложновато.
Не типографируйте весь вывод
Часто встречается типографирование всей страницы целиком перед отдачей в браузер читателя, от <html> до </html>. Не советую идти по этому пути: это регулярная тяжёлая операция на ровном месте и частый источник неочевидных в отладке багов вёрстки. И чем сложнее правила типографа, тем выше риск в какой‑то момент что‑нибудь неочевидно сломать.
Типографируйте точечно при сохранении в базу данных
Советую определить, какие кусочки ваших данных нужно типографировать, и прогонять их через типограф на этапе сохранения в базу данных. Например, прогонять через типограф заголовок и текст статьи при её создании или обновлении в админке.
В идеале хранить в базе отдельно и оригинальный текст, и оттипографированную версию. Оригинал может пригодиться сам по себе и подстрахует в случае глюков типографа.
По сравнению с типографированием всего текста на выводе, этот подход оптимальнее по производительности и проще в отладке.
Ещё хранение оттипографированного текста в базе позволяет без дополнительной работы постить его куда угодно: на сайт, в приложение, в РСС, фид Яндекс‑маркета или в Телеграм‑канал.
Конечно, не весь текст сайта хранится в базе, что‑то зашито в коде: меню, слоган в подвале, плашка о куках и так далее. Такое проще разово оттипографить вручную на этапе разработки раскладкой Бирмана или онлайн‑типографом.
Типографируйте проще и не пытайтесь предусмотреть всё
Большие библиотеки вроде типографа Муравьёва мне кажутся избыточными для большинства задач. Они часто сложновато устроены и содержат огромный набор правил, большинство из которых будет в лучшем случае лежать мёртвым грузом, а в худшем — периодически создавать неочевидные баги, вроде превращения музыканта Антохи МС в Антоху М. С. из‑за зашитого где‑то в недрах правила обработки инициалов.
Регулярное выражение — это шаблон для поиска и замены текста.
Обычно от типографа достаточно лишь подклеивания предлогов, союзов и чисел, да причёсывания кавычек и тире. Это можно делать простейшей функцией из трёх наглядных регулярных выражений:
Регулярное выражение — это шаблон для поиска и замены текста.
const nbsp = ' ';
export const microTypograph = (str) =>
str
// пробел-дефис-пробел -> тире
.replace(/[ \t]+-[ \t]+/g, ' — ')
// первый уровень кавычек
.replace(/"([^"]+)"/g, '« »')
// предлоги, союзы + любое число клеим со следующим словом
.replace(
/(^|\s)(а|но|не|ни|в|во|на|за|от|до|из|у|к|ко|с|со|о|об|при|по|для|как|\d+)[ \t]+(?=\S)/giu,
` $2${nbsp}`
);Под разные проекты и хитрые задачи можно дополнять микротипограф новыми правилами, благо с ИИ сейчас не проблема навайбкодить любые регулярки. Совсем редкие и нестандартные ситуации обычно проще отдать на откуп редакторам, чем пытаться их заранее предугадать и автоматизировать.
Приглашаю уважаемых советчиков поделиться в коментах своим опытом и приёмами работы с богатой типографикой в вебе и не только.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.