Блог

Типограф. Висячие предлоги и редактирование текста.

Что такое типограф и как работает

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

  • Заменяет выравнивает и корректирует пробелы
  • Вставляет неразрывные пробелы ( ) между короткими словами (предлогами, союзами) и последующим словом, чтобы «и в» не переносилось разрозненно.
  • Убирает лишние пробелы перед знаками препинания и добавляет R-пробелы там, где это нужно (например, между цифрами и единицами измерения). R-пробел — это разговорное обозначение неразрывного пробела. «R» — от слова Rigid (жёсткий, неразрываемый).
Превращает дефисы в тире

  • Двойной дефис - или пробел-дефис-пробел превращается в — (длинное тире, em-dash).
  • Одинарный дефис между цифрами превращается в – (короткое тире, en-dash), например 2010-2015 → 2010–2015.
Обрамляет кавычки
  • Прямые кавычки " и ' меняются на типографские: «ёлочки» («…») или „немецкие“ кавычки — в зависимости от настроек.
  • Апострофы и одинарные кавычки внутри слов заменяются корректно.
Собирает точки в троеточие

  • Три точки ... превращаются в единственный символ … (ellipsis).
Обрабатывает особые сочетания

  • ©, ®, ™ — могут заменяться на HTML-сущности.
  • Специальные символы (угловые скобки, тире-запятая) вставляются в нужных местах.

Думаю, я не всё перечислил, но суть донёс

Что под капотом?

Токенизация HTML, набор последовательных правил, промежуточное хранение через placeholder, конфигурация и локализация. Возможно, еще какие-то вещи в которых абсолютно не разбираюсь но в совокупности работает это так:

  • Сначала типограф находит важные куски, вроде ссылок и кода, и временно их прячет, чтобы случайно не изменить.
  • Затем приводит в порядок текст: расставляет правильные кавычки, тире, пробелы и троеточия.
  • После этого возвращает на место скрытые куски — ссылки, код и всё остальное.
  • Для каждого языка свои правила оформления. В русском — кавычки «ёлочки», в английском — “двойные” и ‘одинарные’ и так для каждого.

Итог

Когда вы складываете все эти правила и запускаете типограф на «сыром» тексте, вы получаете:

x Привет, как дела? «Я люблю типографику «-- сказал он …
✓ Привет, как дела? «Я люблю типографику» — сказал он…

Именно так работает «типограф» в самых популярных JS/PHP/Python-библиотках и онлайн-сервисах: они последовательно применяют множество мелких правил к вашему тексту, чтобы он выглядел как у профессионального издателя.

Примеры из жизни.

Примеры из жизни.

Текст-донор

"Вчера я прочитал статью в газете "Новости дня" - она была очень интересной! - сказал Иван. - Ты читал её?"
Цена товара составляет $12 1/2, а скидка - 5%.
Для заказа позвоните по номеру: 8-800-555-35-35 или 495-123-45-67.
Стоимость услуги составляет 1000 руб.

Ошибки

  1. Неправильное использование кавычек: используются прямые кавычки вместо «ёлочек».
  2. Неправильное тире в прямой речи: используется дефис (-) вместо длинного тире (—).
  3. Висячие предлоги: одно- и двухбуквенные предлоги ("в", "по") остаются в конце строки, что ухудшает читаемость.
  4. Неправильное оформление дробей: дробь "12 1/2" записана некорректно.
  5. Неправильное форматирование номеров телефонов: используются дефисы вместо пробелов для разделения групп цифр.
  6. Неправильное размещение знака доллара: в русском тексте символ доллара ($) следует ставить после суммы и отделять неразрывным пробелом.
  7. Неправильное сокращение рубля: сокращение "руб." должно быть с точкой и отделяться неразрывным пробелом от суммы.

Коррекция

После обработки этого текста с помощью типографа, он будет выглядеть следующим образом:
«Вчера я прочитал статью в газете „Новости дня“ — она была очень интересной! — сказал Иван. — Ты читал её?»
Цена товара составляет 12½ $, а скидка — 5 %.
Для заказа позвоните по номеру: 8 800 555 35 35 или 495 123 45 67.
Стоимость услуги составляет 1000 ₽.
Такой результат дает обработка текста чатом GPT. Я буду рассматривать его как образцовый.

Эталонный вариант

После обработки этого текста с помощью типографа, он будет выглядеть следующим образом:
«Вчера я прочитал статью в газете „Новости дня“ — она была очень интересной! — сказал Иван. — Ты читал её?»
Цена товара составляет 12½ $, а скидка — 5 %.
Для заказа позвоните по номеру: 8 800 555 35 35 или 495 123 45 67.
Стоимость услуги составляет 1000 ₽.
Такой результат дает обработка текста чатом GPT. Я буду рассматривать его как образцовый.
В отформатированном тексте:

  1. Кавычки: прямые кавычки заменены на «ёлочки» и „лапки“ для вложенных цитат.
  2. Тире в прямой речи: дефисы заменены на длинные тире (—) с соответствующими пробелами.
  3. Висячие предлоги: короткие предлоги привязаны к следующему слову с помощью неразрывного пробела, предотвращая их оставление в конце строки.
  4. Оформление дробей: дробь "12½" представлена корректно, используя специальный символ для дробей.
  5. Форматирование номеров телефонов: номера телефонов разделены неразрывными пробелами на группы по две или три цифры, что соответствует рекомендациям по оформлению телефонных номеров.
  6. Размещение знака доллара: в русском тексте символ доллара ($) поставлен после суммы и отделён неразрывным пробелом.
  7. Сокращение рубля: использован официальный символ рубля (₽), отделённый неразрывным пробелом от суммы.

Практика. Figma

Я пользуюсь двумя плагинами типографа. Когда уже все примерно сверстано, я прогоняю текст через SBOL Typograph или Text prettier. Они оба работают с нюансами: Текст притиер, например, игнорирует неразрывные пробелы в русском с предлогами из трех букв вроде «для». Сбол Типограф делает на русском все лучше, но не форматирует текст на английском, а еще иногда не форматирует выбранный фрейм, а форматирует всё.

Плагин SBOL Typograph

1/2 не обработалась
„Новости дня“ - она — думаю, тут надо тире
Некорректная оформились номера

Плагин Text Prettier

Рубли не заменены
Не те кавычки после «Вчера … Ты читал её?"

Вывод

Надеюсь, что на момент прочтения оба плагина уже работают идеально. Если нет — вам не составит труда найти свой среди миллиона плагиниов в комьюнити Figma.

Альтернатива

Я не фанат, но статьи ради провел еще реальный тест с типографами на сайтах.
Дельюсь результатом — выводы за вами.

Типограф Лебедева

«Вчера я прочитал статью в газете «Новости дня» — она была очень интересной! — сказал Иван. — Ты читал её?"​
Цена товара составляет $12 1/2, а скидка — 5%.​
Для заказа позвоните по номеру: 8-800-555-35-35 или 495-123-45-67.​
Стоимость услуги составляет 1000 руб.​
Я умышленно оставил со специальными символами, чтобы показать, что не каждый редактор обрабатывает их, а возможности скопировать без них — нет.

Типограф Горбунова

«Вчера я прочитал статью в газете «Новости дня» — она была очень интересной! — сказал Иван. — Ты читал её?»​Цена товара составляет $12 1/2, а скидка — 5%.​Для заказа позвоните по номеру: 8-800-555-35-35 или 495-123-45-67.​Стоимость услуги составляет 1000 руб.​

Что использовать?

Пока ни один из типографов не работает идеально. У каждого есть свои недостатки.
Возможно, скоро, всё придет в норму, а пока я бы использовал самый удобный, а это тот, который под рукой здесь и сейчас.
Если главное — качество, я бы выбрал chat GPT
Если скорость при работе в фигме — Text Prettier или SBOL Typograph
Для частных случаев типографы студии Лебедева и Бюро Горбунова
Если было полезно, подпишись на Телеграм
2025-03-12 12:04 Типографика Дизайн Фигма