chenglou/pretext

Что это?

Ключевые возможности

• 01Вычисляет высоту абзаца и количество строк без перерисовки DOM с помощью `prepare()` и `layout()`.
• 02Возвращает отдельные строки, их ширину и курсоры для ручной раскладки.
• 03Предоставляет расширенный API для встроенных элементов, поддерживающий смешанные шрифты, фрагменты кода и встроенные блоки.
• 04Поддерживает `pre-wrap`, перенос слов `keep-all` и межбуквенный интервал.
• 05Выводит результат в DOM, Canvas или SVG.

Сценарии использования

• Виртуализация длинных списков: высоту каждого элемента можно узнать до его отрисовки.
• Подгонка ширины пузырей чата по самой длинной строке.
• Обтекание плавающих изображений текстом со строками разной ширины.
• Проверка в режиме разработки, что подписи на кнопках не переносятся на вторую строку.

Быстрый старт

1. 1

   Установите пакет из npm

   npm install @chenglou/pretext
2. 2

   Импортируйте prepare и layout, а затем измерьте высоту абзаца, не обращаясь к DOM

Что важно знать

• !В качестве лицензии указано NOASSERTION, поэтому условия использования неясны — перед внедрением их следует проверить.
• !Измерение зависит от механизма обработки шрифтов в браузере, поэтому точность результатов определяется доступными шрифтами.

Темы

Частые вопросы

Что такое pretext?

Библиотека на чистом JavaScript/TypeScript измеряет многострочный текст и рассчитывает его раскладку без перерисовки DOM, выводя результат в DOM, Canvas или SVG. Pretext измеряет многострочный текст и вычисляет места переносов строк на чистом JavaScript или TypeScript. Благодаря этому код раскладки может получить высоту абзаца или отдельные строки, не обращаясь к `getBoundingClientRect` и `offsetHeight`. Такие обращения к DOM заставляют браузер пересчитывать раскладку страницы, что обходится дорого. Pretext использует для получения ширины текста измерения Canvas в браузере и применяет поверх них собственную логику переноса строк.

pretext можно использовать бесплатно? Какая у него лицензия?

pretext распространяется с открытым исходным кодом под лицензией Other. Перед использованием в коммерческих продуктах проверьте условия лицензии.

pretext всё ещё поддерживается?

Активно поддерживается. Последний коммит в pretext — 15 окт. 2026 г..

Для чего можно использовать pretext?

Виртуализация длинных списков: высоту каждого элемента можно узнать до его отрисовки. Подгонка ширины пузырей чата по самой длинной строке. Обтекание плавающих изображений текстом со строками разной ширины. Проверка в режиме разработки, что подписи на кнопках не переносятся на вторую строку.

Как установить pretext?

Установите пакет из npm: npm install @chenglou/pretext Импортируйте prepare и layout, а затем измерьте высоту абзаца, не обращаясь к DOM

Где скачать pretext?

Исходный код и инструкции по установке — на GitHub: https://github.com/chenglou/pretext