https://github.com/spearance/fly-typograf.js

автотипографика текста на лету
https://github.com/spearance/fly-typograf.js

ecmascript javascript regexp

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/spearance/fly-typograf.js
• Owner: Spearance
• License: mit
• Created: 2021-12-12T18:19:34.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-06-21T17:36:20.000Z (8 months ago)
• Last Synced: 2024-10-28T07:22:48.913Z (3 months ago)
• Topics: ecmascript, javascript, regexp
• Language: JavaScript
• Homepage: https://spearance.github.io/fly-typograf.js/dist/
• Size: 1.63 MB
• Stars: 21
• Watchers: 2
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

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

[![NPM version](https://img.shields.io/npm/v/fly-typograf.js.svg?style=flat)](https://www.npmjs.com/package/fly-typograf.js)

[![NPM downloads](https://img.shields.io/npm/dm/fly-typograf.js.svg?style=flat)](https://www.npmjs.com/package/fly-typograf.js)

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

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

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

![fly-typograf демо](./src/assets/fly-typograf.gif)

Умеет:

* Заменять кавычки, тире, спецсимволы: `…`, `©`, `®`, `™`, `₽`, `±`, `÷`

* Ставить простые дроби: `½`, `⅓`, `¼`, `⅕`, `⅙`, `⅐`, `⅛`, `⅑`, `⅒`, `⅔`, `⅖`, `¾`, `⅗`, `⅜`, `⅘`, `⅚`, `⅝`, `⅞`

* Умеет ставить минус между числами и `×` между размерными единицами

* Привязывать неразрывным пробелом союзы и предлоги к последующим словам, а частицы к предыдущим

* Ставить степени, градусы, дюймы

* Разрешает писать HTML и комментарии к нему

Пример работы [Типографа](https://spearance.github.io/fly-typograf.js/dist/)

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

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

| Название | Запись | Замена | Раскладка |

|----------|:------:|:------:|:---------:|

| Копирайт | `(c)\|(C)` | `©` | — |

| Зарегистрированный знак | `(r)\|(R)` | `®` | английская |

| Торговая марка | `(tm)\|(TM)` | `™` | английская |

| Рубль | `(р)\|(Р)` | `₽` | русская |

| Плюс минус | `+/-` | `±` | — |

| Разделить | `-:-` | `÷` | — |

| Степень | `12^2` | `12²` | — |

| Дюймы | `32^"` | `32″` | — |

| Градусы | `+32С^o` | `+32С°` | — |

## Установка ##

```

npm install fly-typograf

```

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

```javascript

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`, будет значительно меньше пятерки.

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