Pretext — библиотека для JavaScript и TypeScript, которая измеряет и раскладывает многострочный текст без единого обращения к DOM. Это значит, что ты получаешь высоту параграфа, количество строк и их ширину чистой математикой, минуя дорогущие операции вроде getBoundingClientRect или offsetHeight, которые заставляют браузер пересчитывать всю страницу.
Работает просто: сначала вызываешь prepare() — библиотека нормализует пробелы, разбивает текст на сегменты, измеряет их через canvas и возвращает готовую структуру. Потом запускаешь layout() — быстрый проход по уже посчитанным данным, который выдает высоту и число строк. Никаких перерисовок, никаких тормозов. На бенчмарках prepare() отрабатывает за 19 миллисекунд на пачку из 500 текстов, а layout() — за 0.09 миллисекунды.
Pretext понимает все языки, включая арабский, китайский, эмоджи и смешанные направления письма. Умеет работать с обычными пробелами и с textarea-режимом, где сохраняются табы и переносы строк. Для этого достаточно передать опцию whiteSpace: 'pre-wrap' в prepare().
Если нужно больше контроля, используй prepareWithSegments() и layoutWithLines() — получишь массив строк с их текстом, шириной и позициями. Есть walkLineRanges() для случаев, когда хочешь узнать ширину каждой строки без построения самих строк, например, чтобы найти минимальную ширину контейнера. А layoutNextLine() позволяет строить текст построчно с разной шириной на каждой строке — удобно для обтекания картинок или сложных макетов.
Библиотека открывает путь к виртуализации без костылей, к серверному рендерингу текста, к проверке переполнения лейблов еще на этапе разработки и к предотвращению layout shift при подгрузке контента. Рендерить можно в DOM, Canvas, SVG, скоро добавят серверную сторону.
Блог