Флай Типограф

Автотипографика текста в полях <input>, <textarea> и contenteditable="true" на лету.

Что делает Типограф?

Верстает текст внутри полей <input> и <textarea> автоматически при наборе с клавиатуры.

Умеет:

• Заменять кавычки, тире, спецсимволы: …, ©, ®, ™, ₽, ±, ÷
• Ставить простые дроби: ½, ⅓, ¼, ⅕, ⅙, ⅐, ⅛, ⅑, ⅒, ⅔, ⅖, ¾, ⅗, ⅜, ⅘, ⅚, ⅝, ⅞
• Умеет ставить минус между числами и × между размерными единицами
• Привязывать неразрывным пробелом союзы и предлоги к последующим словам, а частицы к предыдущим
• Ставить степени, градусы, дюймы
• Разрешает писать HTML и комментарии к нему

Пример работы Типографа

fly-typograf.js не является полноценной заменой он-лайн сервиса typograf.ru и не может им быть, потому что содержит гораздо меньше правил проверки, но он помогает снять до 80% вопросов экранной типографики.

Как записывать разные символы?

Название	Запись	Замена	Раскладка
Копирайт	(c)|(C)	©	—
Зарегистрированный знак	(r)|(R)	®	английская
Торговая марка	(tm)|(TM)	™	английская
Рубль	(р)|(Р)	₽	русская
Плюс минус	+/-	±	—
Разделить	-:-	÷	—
Степень	12^2	12²	—
Дюймы	32^"	32″	—
Градусы	+32С^o	+32С°	—

Установка

npm install fly-typograf

Пример подключения

import FlyTypograf from 'fly-typograf.js';

const textarea = document.querySelector(`textarea`);

const Typograf = new FlyTypograf(textarea);

const onTextAreaInput = () => {
  Typograf.process();
}

textarea.addEventListener(`input`, onTextAreaInput);

На что обратить внимание!

В некоторых гарнитурах шрифтов нет полного набора простых дробей и числовые символы степеней и размеры простых дробей отрисованы по-разному.

Обратите внимание на пары: ½ и ⅐ или ¹ и ⁵.

Этот нюанс не важен до момента, пока вы не решите написать 12¹⁵. Единица в степени, например гарнитурой Times New Roman, будет значительно меньше пятерки.

Шрифты развиваются и глифы исправляют, возможно, у вас они уже отображаются хорошо, но помните, что так может быть не у всех.