У веб-дизайнеров революция: разраб из Midjourney придумал, как сделать обтекаемый…

У веб-дизайнеров революция: разраб из Midjourney придумал, как сделать обтекаемый текст в браузере — прямо как в глянцевых журналах

Бывший инженер Midjourney Cheng Lou выпустил библиотеку Pretext для точного измерения и расчёта многострочного текста. Главная фишка — технология не использует CSS и DOM-измерения (getBoundingClientRect, offsetHeight), которые триггерят дорогой reflow. Вместо этого библиотека реализует собственную логику измерения текста, используя браузерный движок как эталон.

Что умеет:
— Измерять высоту абзаца без единого обращения к DOM
— Раскладывать текст вручную строка за строкой с разной шириной (например, обтекание вокруг картинки)
— Поддерживает все языки, эмодзи и смешанное направление письма
— Работает с Canvas, SVG, WebGL и скоро на сервере

Цифры:
— prepare() (анализ текста) — около 19 мс для 500 текстов
— layout() (расчёт) — около 0,09 мс для той же пачки

Pretext написан на чистом TypeScript, поддерживается всеми современными браузерами.

Код доступен тут.