Типограф на JavaScript

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

Попробуйте типограф в действии.

Черты:

гибкость и расширяемость;
UTF-8;
кроссплатформенность;
кроссбраузерность;
поддержка Node.js;
типографирование на лету;
TDD.

Форматы:

TXT
HTML
XML
SVG

Плагины

Использование

В браузере

npm install typograf

<script src="./node_modules/typograf/dist/typograf.min.js"></script>
<script>
    var tp = new Typograf({locale: ['ru', 'en-US']});
    alert(tp.execute('     Мир - мой мир!!      '));
</script>

Node.js

npm install typograf

const Typograf = require('typograf');
const tp = new Typograf({locale: ['ru', 'en-US']});

console.log(tp.execute(' Мир - мой мир!!   '));

Локализация

Типограф поддерживает несколько десятков локалей.

Задать локаль можно как одну, так и несколько. Первая локаль является основной, по ней выбирается какие будут выполнены правила и вид кавычек.

// Выполняются правила "common/*" и "ru/*".
// Кавычки русские.
// Расстановка неразрывных пробелов только между русскими словами.
var tpRu = new Typograf({locale: 'ru'});

// Выполняются правила "common/*" и "ru/*".
// Кавычки русские.
// Расстановка неразрывных пробелов между русскими и английскими словами.
var tpRuEn = new Typograf({locale: ['ru', 'en-US']});

// Выполняются правила "common/*" и "en-US/*".
// Кавычки английские.
// Расстановка неразрывных пробелов между русскими и английскими словами.
var tpEnRu = new Typograf({locale: ['en-US', 'ru']});

API

Висячая пунктуация

По умолчанию висячая пунктуация отключена.

Для включения необходимо подключить правила:

var Typograf = require('typograf'),
    tp = new Typograf({locale: ['ru', 'en-US']});

tp.enableRule('ru/optalign/*');
console.log(tp.execute('"Мир"'));

А также в HTML-код страницы добавить:

<!-- Для висячей пунктуации -->
<link rel="stylesheet" href="dist/typograf.css" />

Включить или отключить правила

var tp = new Typograf({locale: ['ru', 'en-US']});
tp.enableRule('ru/money/ruble'); // Включить правило
tp.enableRule('ru/money/*'); // Включить все правила в группе
tp.enableRule('*'); // Включить все правила
//...
tp.disableRule('ru/money/ruble'); // Отключить правило
tp.disableRule('ru/money/*'); // Отключить все правила в группе
tp.disableRule('*'); // Отключить все правила

Изменить настройку у правила

var tp = new Typograf({locale: ['ru', 'en-US']});

// Название правила, название настройки, значение

// Неразрывный пробел перед последним словом в предложении, не более 5 символов
tp.setSetting('common/nbsp/beforeShortLastWord', 'lengthLastWord', 5);

// Вложенные кавычки тоже «ёлочки» для русской типографики
tp.setSetting('common/punctuation/quote', 'ru', {left: '«', right: '»', removeDuplicateQuotes: true});

// Неразрывный пробел после короткого слова, не более 3 символов
tp.setSetting('common/nbsp/afterShortWord', 'lengthShortWord', 3);

Добавить простое правило

// Типографический смайлик
Typograf.addRule({
    name: 'common/other/typographicSmiley',
    handler: function (text) {
        return text.replace(/:-\)/g, ':—)');
    }
});

HTML-сущности

// Режим по умолчанию, HTML-сущности, как UTF-8 символы
var tp = new Typograf({locale: ['ru', 'en-US']});
tp.execute('12 кг...'); // 12 кг…

// HTML-сущности в виде имён
var tpName = new Typograf({
    locale: ['ru', 'en-US'],
    htmlEntity: {type: 'name'}
});
tpName.execute('12 кг...'); // 12&nbsp;кг&hellip;

// HTML-сущности в виде цифр
var tpDigit = new Typograf({
    locale: ['ru', 'en-US'],
    htmlEntity: {type: 'digit'}
});
tpDigit.execute('12 кг...'); // 12&#160;кг&#8230;

// Все HTML-сущности в UTF-8, а невидимые сущности в виде цифр
// Невидимые сущности — &nbsp; &thinsp; &ensp; &emsp; &shy; &zwnj; &zwj; &lrm; &rlm;
var tpNameInvisible = new Typograf({
    locale: ['ru', 'en-US'],
    htmlEntity: {
        type: 'name',
        onlyInvisible: true
    }
});
tpNameInvisible.execute('12 кг...'); // 12&nbsp;кг…

// Все HTML-сущности в UTF-8, а заданные в списке в виде цифр
var tpDigit = new Typograf({
    locale: ['ru', 'en-US'],
    htmlEntity: {
        type: 'digit',
        list: ['nbsp', 'shy', 'mdash', 'ndash']
    }
});
tpDigit.execute('12 кг...'); // 12&#160;кг…

Типографика на лету

Данный live-режим необходим, если текст типографируется на каждый ввод символа в текстовых полях.

var tp = new Typograf({locale: ['ru', 'en-US'], live: true});

Подробнее

Неразрывные пробелы

По умолчанию типограф не заменяет неразрывные пробелы на обычные, чтобы не удалить ранее проставленные неразрывные пробелы. Если в тексте неправильно расставлены неразрывные пробелы, включите правило common/nbsp/replaceNbsp.

Перед типографированием в live-режиме неразрывные пробелы заменяются на обычные, т. к. один и тот же текст типографируется многократно при каждом вводе символа.

Отключение типографирования в участках текста

var tp = new Typograf({locale: ['ru', 'en-US']});

// Отключить типографирование внутри тега <no-typography>
tp.addSafeTag('<no-typography>', '</no-typography>');
//...
// Отключить типографирование внутри управляющих конструкций какого-нибудь шаблонизатора
tp.addSafeTag('\\{\\{', '\\}\\}'); // {{...}}
tp.addSafeTag('\\[\\[', '\\]\\]'); // [[...]]
//...
// Отключить типографирование внутри PHP-кода
tp.addSafeTag('<\\?php', '\\?>');

tp.execute(text);

Типографирование HTML-атрибутов

Для типографирования HTML-атрибутов необходимо включить правило common/html/processingAttrs. В правиле, по умолчанию, обрабатываются атрибуты title и placeholder.

var tp = new Typograf({locale: ['ru', 'en-US']});
tp.enableRule('common/html/processingAttrs');
tp.setSetting('common/html/processingAttrs', 'attrs', ['title', 'placeholder', 'alt', 'my-attr']);

Сжатие с UglifyJS

Если typograf.js сжимается вместе с другими js-файлами в UglifyJS, то необходимо использовать опцию ascii_only: false, иначе типограф будет работать некорректно.

Разработка

git clone https://github.com/typograf/typograf.git

Пересборка: npm run rebuild

Пересборка и запуск тестов: npm test

Подготовка новой версии: npm run dist

Проверка скорости работы правил: npm run benchmark

Лицензия

MIT License

motorin/typograf