Show HN: uWrap.js – A faster and more accurate text wrapping util in < 2KB

https://news.ycombinator.com/rss Hits: 16
Summary

⏎ μWrap A 10x faster and more accurate text wrapping util in < 2KB (min) (MIT Licensed) Introduction uWrap exists to efficiently predict varying row heights for list and grid virtualization, a technique for UI performance optimization when rendering large, scrollable datasets. Doing this both quickly and accurately turns out to be a non-trivial task since Canvas2D provides no API for text wrapping, and measureText() is quite expensive; measuring via DOM is also a non-starter due to poor performance. Additionally, font size, variable-width fonts, letter-spacing , explicit line breaks, and different white-space choices affect the number of wrapped lines. Notes: Today, works most accurately with Latin charsets Does not yet handle Windows-style \r explicit line breaks explicit line breaks Only pre-line wrapping strategy is implemented so far Performance uWrap handily out-performs canvas-hypertxt in both CPU and memory usage by a wide margin while being significantly more accurate. The benchmark below wraps 100,000 random sentences in boxes of random widths between 50px and 250px. You can see this live in DevTools console of the demo page. Chrome 135 Firefox 137 Safari 18.1 uWrap 82ms 90ms 185ms canvas-hypertxt 770ms 1660ms 1430ms Installation npm i uwrap or < script src =" ./dist/uWrap.iife.min.js " > </ script > API A 10 LoC uWrap.d.ts TypeScript def. Usage

First seen: 2025-04-05 00:03

Last seen: 2025-04-05 16:08