Типограф на JavaScript
Помогает автоматически расставить неразрывные пробелы, исправить мелкие опечатки, привести кавычки к правильному виду, заменить дефисы на тире в нужных местах и многое другое.
Попробуйте типограф в действии.
Черты:
Форматы:
Плагины
Использование
В браузере
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(' Мир - мой мир!! '));
Локализация
Типограф поддерживает несколько десятков локалей.
Задать локаль можно как одну, так и несколько. Первая локаль является основной, по ней выбирается какие будут выполнены правила и вид кавычек.
var tpRu = new Typograf({locale: 'ru'});
var tpRuEn = new Typograf({locale: ['ru', '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']});
tp.setSetting('common/nbsp/beforeShortLastWord', 'lengthLastWord', 5);
tp.setSetting('common/punctuation/quote', 'ru', {left: '«', right: '»', removeDuplicateQuotes: true});
tp.setSetting('common/nbsp/afterShortWord', 'lengthShortWord', 3);
Добавить простое правило
Typograf.addRule({
name: 'common/other/typographicSmiley',
handler: function (text) {
return text.replace(/:-\)/g, ':—)');
}
});
HTML-сущности
var tp = new Typograf({locale: ['ru', 'en-US']});
tp.execute('12 кг...');
var tpName = new Typograf({
locale: ['ru', 'en-US'],
htmlEntity: {type: 'name'}
});
tpName.execute('12 кг...');
var tpDigit = new Typograf({
locale: ['ru', 'en-US'],
htmlEntity: {type: 'digit'}
});
tpDigit.execute('12 кг...');
var tpNameInvisible = new Typograf({
locale: ['ru', 'en-US'],
htmlEntity: {
type: 'name',
onlyInvisible: true
}
});
tpNameInvisible.execute('12 кг...');
var tpDigit = new Typograf({
locale: ['ru', 'en-US'],
htmlEntity: {
type: 'digit',
list: ['nbsp', 'shy', 'mdash', 'ndash']
}
});
tpDigit.execute('12 кг...');
Типографика на лету
Данный live-режим необходим, если текст типографируется на каждый ввод символа в текстовых полях.
var tp = new Typograf({locale: ['ru', 'en-US'], live: true});
Подробнее
Неразрывные пробелы
По умолчанию типограф не заменяет неразрывные пробелы на обычные, чтобы не удалить ранее проставленные неразрывные пробелы. Если в тексте неправильно расставлены неразрывные пробелы, включите правило common/nbsp/replaceNbsp
.
Перед типографированием в live-режиме неразрывные пробелы заменяются на обычные, т. к. один и тот же текст типографируется многократно при каждом вводе символа.
Отключение типографирования в участках текста
var tp = new Typograf({locale: ['ru', 'en-US']});
tp.addSafeTag('<no-typography>', '</no-typography>');
tp.addSafeTag('\\{\\{', '\\}\\}');
tp.addSafeTag('\\[\\[', '\\]\\]');
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
Ссылки