Что такое типограф и как работает
мой Телеграм про дизайн и те только
Типограф — это набор правил и алгоритмов, который автоматически превращает «грубую» исходную строку в правильно оформленный с точки зрения типографики текст. Проще говоря, он:
- Заменяет выравнивает и корректирует пробелы
- Вставляет неразрывные пробелы ( ) между короткими словами (предлогами, союзами) и последующим словом, чтобы «и в» не переносилось разрозненно.
- Убирает лишние пробелы перед знаками препинания и добавляет R-пробелы там, где это нужно (например, между цифрами и единицами измерения). R-пробел — это разговорное обозначение неразрывного пробела. «R» — от слова Rigid (жёсткий, неразрываемый).
Превращает дефисы в тире
- Двойной дефис - или пробел-дефис-пробел превращается в — (длинное тире, em-dash).
- Одинарный дефис между цифрами превращается в – (короткое тире, en-dash), например 2010-2015 → 2010–2015.
Обрамляет кавычки
- Прямые кавычки " и ' меняются на типографские: «ёлочки» («…») или „немецкие“ кавычки — в зависимости от настроек.
- Апострофы и одинарные кавычки внутри слов заменяются корректно.
Собирает точки в троеточие
- Три точки ... превращаются в единственный символ … (ellipsis).
Обрабатывает особые сочетания
Думаю, я не всё перечислил, но суть донёс
- ©, ®, ™ — могут заменяться на HTML-сущности.
- Специальные символы (угловые скобки, тире-запятая) вставляются в нужных местах.
Думаю, я не всё перечислил, но суть донёс
Что под капотом?
Токенизация HTML, набор последовательных правил, промежуточное хранение через placeholder, конфигурация и локализация. Возможно, еще какие-то вещи в которых абсолютно не разбираюсь но в совокупности работает это так:
- Сначала типограф находит важные куски, вроде ссылок и кода, и временно их прячет, чтобы случайно не изменить.
- Затем приводит в порядок текст: расставляет правильные кавычки, тире, пробелы и троеточия.
- После этого возвращает на место скрытые куски — ссылки, код и всё остальное.
- Для каждого языка свои правила оформления. В русском — кавычки «ёлочки», в английском — “двойные” и ‘одинарные’ и так для каждого.
Итог
Когда вы складываете все эти правила и запускаете типограф на «сыром» тексте, вы получаете:
x Привет, как дела? «Я люблю типографику «-- сказал он …
✓ Привет, как дела? «Я люблю типографику» — сказал он…
Именно так работает «типограф» в самых популярных JS/PHP/Python-библиотках и онлайн-сервисах: они последовательно применяют множество мелких правил к вашему тексту, чтобы он выглядел как у профессионального издателя.
x Привет, как дела? «Я люблю типографику «-- сказал он …
✓ Привет, как дела? «Я люблю типографику» — сказал он…
Именно так работает «типограф» в самых популярных JS/PHP/Python-библиотках и онлайн-сервисах: они последовательно применяют множество мелких правил к вашему тексту, чтобы он выглядел как у профессионального издателя.
Примеры из жизни.
Примеры из жизни.
Текст-донор
"Вчера я прочитал статью в газете "Новости дня" - она была очень интересной! - сказал Иван. - Ты читал её?"
Цена товара составляет $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 руб.
Ошибки
- Неправильное использование кавычек: используются прямые кавычки вместо «ёлочек».
- Неправильное тире в прямой речи: используется дефис (-) вместо длинного тире (—).
- Висячие предлоги: одно- и двухбуквенные предлоги ("в", "по") остаются в конце строки, что ухудшает читаемость.
- Неправильное оформление дробей: дробь "12 1/2" записана некорректно.
- Неправильное форматирование номеров телефонов: используются дефисы вместо пробелов для разделения групп цифр.
- Неправильное размещение знака доллара: в русском тексте символ доллара ($) следует ставить после суммы и отделять неразрывным пробелом.
- Неправильное сокращение рубля: сокращение "руб." должно быть с точкой и отделяться неразрывным пробелом от суммы.
Коррекция
После обработки этого текста с помощью типографа, он будет выглядеть следующим образом:
«Вчера я прочитал статью в газете „Новости дня“ — она была очень интересной! — сказал Иван. — Ты читал её?»
Цена товара составляет 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. Я буду рассматривать его как образцовый.
Эталонный вариант
После обработки этого текста с помощью типографа, он будет выглядеть следующим образом:
«Вчера я прочитал статью в газете „Новости дня“ — она была очень интересной! — сказал Иван. — Ты читал её?»
Цена товара составляет 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. Я буду рассматривать его как образцовый.
В отформатированном тексте:
- Кавычки: прямые кавычки заменены на «ёлочки» и „лапки“ для вложенных цитат.
- Тире в прямой речи: дефисы заменены на длинные тире (—) с соответствующими пробелами.
- Висячие предлоги: короткие предлоги привязаны к следующему слову с помощью неразрывного пробела, предотвращая их оставление в конце строки.
- Оформление дробей: дробь "12½" представлена корректно, используя специальный символ для дробей.
- Форматирование номеров телефонов: номера телефонов разделены неразрывными пробелами на группы по две или три цифры, что соответствует рекомендациям по оформлению телефонных номеров.
- Размещение знака доллара: в русском тексте символ доллара ($) поставлен после суммы и отделён неразрывным пробелом.
- Сокращение рубля: использован официальный символ рубля (₽), отделённый неразрывным пробелом от суммы.
Практика. 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 руб.
Я умышленно оставил со специальными символами, чтобы показать, что не каждый редактор обрабатывает их, а возможности скопировать без них — нет.
Типограф Горбунова
«Вчера я прочитал статью в газете «Новости дня» — она была очень интересной! — сказал Иван. — Ты читал её?»Цена товара составляет $12 1/2, а скидка — 5%.Для заказа позвоните по номеру: 8-800-555-35-35 или 495-123-45-67.Стоимость услуги составляет 1000 руб.
Что использовать?
Пока ни один из типографов не работает идеально. У каждого есть свои недостатки.
Возможно, скоро, всё придет в норму, а пока я бы использовал самый удобный, а это тот, который под рукой здесь и сейчас.
Возможно, скоро, всё придет в норму, а пока я бы использовал самый удобный, а это тот, который под рукой здесь и сейчас.
Если главное — качество, я бы выбрал chat GPT
Если скорость при работе в фигме — Text Prettier или SBOL Typograph
Для частных случаев типографы студии Лебедева и Бюро Горбунова
Если скорость при работе в фигме — Text Prettier или SBOL Typograph
Для частных случаев типографы студии Лебедева и Бюро Горбунова
Если было полезно, подпишись на Телеграм