Василий Половнёв и Игорь Петров. ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей
«Когда на сайте не следят за оформлением текста, это выглядит неряшливо и непрофессионально: упрощённые кавычки, дефис вместо тире, предлоги отклеились и висят в воздухе, а вместо спецсимволов уродливые ТМ и (c).
Наводить красоту — „богатую“ типографику — можно вручную с раскладкой Бирмана или сервисами вроде Типографа Студии Лебедева. Узнать правила оформления текста поможет справочник Мильчина».
Василий Половнёв и Игорь Петров. ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей
Поделюсь опытом и мыслями насчёт автоматического типографирования текста на сайте. Всё это актуально для любого языка программирования, движка или админки.
Типографируйте на сервере
Скачки содержимого после загрузки не только жутко бесят, но и создают CLS (Cumulative Layout Shift), из‑за чего поисковики могут понизить рейтинг сайта в поисковой выдаче.
Если типографировать страницу на клиенте — уже после того, как браузер получил содержимое с сервера, — вы получите либо задержку отрисовки, либо риск скачков содержимого, особенно заметных на крупных кеглях и в заголовках.
Скачки содержимого после загрузки не только жутко бесят, но и создают CLS (Cumulative Layout Shift), из‑за чего поисковики могут понизить рейтинг сайта в поисковой выдаче.
Типографируйте автоматикой
Бывают расширения, которые добавляют кнопку типографа в админку, в визуальный редактор. Проблема тут в человеческом факторе — про кнопку могут забывать, на неё могут забивать. В итоге разные страницы сайта могут иметь разное оформление текста.
Типограф по кнопке может быть уместен, когда нужно иметь возможность не типографировать часть текста, но представить такую ситуацию в повседневных задачах сложновато.
Не типографируйте весь вывод
Часто встречается типографирование всей страницы целиком перед отдачей в браузер читателя, от <html> до </html>. Не советую идти по этому пути: это регулярная тяжёлая операция на ровном месте и частый источник неочевидных в отладке багов вёрстки. И чем сложнее правила типографа, тем выше риск в какой‑то момент что‑нибудь неочевидно сломать.
Типографируйте точечно при сохранении в базу данных
Советую определить, какие кусочки ваших данных нужно типографировать, и прогонять их через типограф на этапе сохранения в базу данных. Например, прогонять через типограф заголовок и текст статьи при её создании или обновлении в админке.
В идеале хранить в базе отдельно и оригинальный текст, и оттипографированную версию. Оригинал может пригодиться сам по себе и подстрахует в случае глюков типографа.
По сравнению с типографированием всего текста на выводе, этот подход оптимальнее по производительности и проще в отладке.
Ещё хранение оттипографированного текста в базе позволяет без дополнительной работы постить его куда угодно: на сайт, в приложение, в РСС, фид Яндекс‑маркета или в Телеграм‑канал.
Конечно, не весь текст сайта хранится в базе, что‑то зашито в коде: меню, слоган в подвале, плашка о куках и так далее. Такое проще разово оттипографить вручную на этапе разработки раскладкой Бирмана или онлайн‑типографом.
Типографируйте проще и не пытайтесь предусмотреть всё
Большие библиотеки вроде типографа Муравьёва мне кажутся избыточными для большинства задач. Они часто сложновато устроены и содержат огромный набор правил, большинство из которых будет в лучшем случае лежать мёртвым грузом, а в худшем — периодически создавать неочевидные баги, вроде превращения музыканта Антохи МС в Антоху М. С. из‑за зашитого где‑то в недрах правила обработки инициалов.
Регулярка или регулярное выражение — это шаблон для поиска и замены текста.
Обычно от типографа достаточно лишь подклеивания предлогов, союзов и чисел, да причёсывания кавычек и тире. Это можно делать простой функцией из пары наглядных регулярок:
Регулярка или регулярное выражение — это шаблон для поиска и замены текста.
function microTypograph(string $str): string
{
// символ неразрывного пробела
$nbsp = " ";
// пробел-дефис-пробел -> тире
$str = preg_replace('/[ \t]+-[ \t]+/u', ' — ', $str);
// первый уровень кавычек
$str = preg_replace('/"([^"]+)"/u', '« »', $str);
// предлоги, союзы + любое число клеим со следующим словом
$str = preg_replace(
'/(^|\s)(а|но|не|ни|в|во|на|за|от|до|из|у|к|ко|с|со|о|об|при|по|для|как|\d+)[ \t]+(?=\S)/iu',
' $2' . $nbsp,
$str
);
return $str;
}
// …
// применяем в проекте, например, к нужным полям при сохранении статьи
class Article extends Model
{
protected static function booted(): void
{
static::saving(function (Article $article) {
$article->title_typo = microTypograph($article->title);
$article->text_typo = microTypograph($article->body);
});
}
// …
}ПХППод разные проекты и хитрые задачи можно дополнять микротипограф новыми правилами, благо с ИИ сейчас не проблема навайбкодить любые регулярки. Совсем редкие и нестандартные ситуации обычно проще отдать на откуп редакторам, чем пытаться их заранее предугадать и автоматизировать.
Приглашаю уважаемых советчиков поделиться в коментах своим опытом и приёмами работы с богатой типографикой в вебе и не только.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.