Pretext — layout текста без браузера 🤯
Pretext измеряет и раскладывает текст в JavaScript без DOM: от chat bubbles до Canvas и серверного рендера.
Cheng Lou сделал deps-free библиотеку для мультистрочного измерения текста и его layout’а без участия браузера.
Что это даёт?
Ты можешь получить размеры текста, строки и переносы на основе заданной ширины и шрифта.
Работает с любыми языками, шрифтами и даже эмодзи 👍 И главное — все расчёты происходят в JS, без DOM, а значит без любимых браузером reflow при каждом измерении.
💡 Что можно сделать
-
Идеальные chat bubbles под конкретный текст, без лишнего воздуха. Пример.
-
Обтекание текста вокруг динамических объектов. Пример. (отдельно стоит отметить перфоманс — ~19ms на текст из 500 слов)
-
Рендер текста в Canvas, SVG и даже на сервере.
Выглядит нишево, но на самом деле это про контроль: ты сам управляешь layout’ом текста, а не браузер за тебя.