{"_id":"uwrap","_rev":"3-5c79ccdac9807b137348de63fd6d3351","name":"uwrap","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"uwrap","version":"0.1.0","keywords":["text","line","word","wrap","wrapping","split","virtualization","virtualize","canvas","measure"],"author":"","license":"MIT","_id":"uwrap@0.1.0","maintainers":[{"name":"leeoniya","email":"leeoniya@gmail.com"}],"homepage":"https://github.com/leeoniya/uWrap#readme","bugs":{"url":"https://github.com/leeoniya/uWrap/issues"},"dist":{"shasum":"72ca764ced4ccec35ac638c6e36de553b898359b","tarball":"https://registry.npmjs.org/uwrap/-/uwrap-0.1.0.tgz","fileCount":7,"integrity":"sha512-tdiH4biH2sGAwJ6bB5lZvmM/Y0Vv3by9bEZWhkI9TmQC7wektnD/MfS/cyPBqAHJqxQKBE4FwONLEPQeb4v8TA==","signatures":[{"sig":"MEQCIBe2Mv3Ben6/MSHL7KdZfqmWNrQioSwKqJ/vrGngbSRHAiAfsrmAk4b8IdZVaQA4ZzYhnCxkr8HnOa5y9UDgckC3nw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17824},"type":"module","types":"./dist/uWrap.d.ts","module":"./dist/uWrap.mjs","gitHead":"e2dc6b1d0144e0b553c8ce79fe3da63c05644608","scripts":{"test":"node ./test/uWrap.test.mjs","build":"rollup -c"},"_npmUser":{"name":"leeoniya","email":"leeoniya@gmail.com"},"repository":{"url":"git+https://github.com/leeoniya/uWrap.git","type":"git"},"_npmVersion":"11.2.0","description":"A very fast and accurate text and line wrapping util","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","rollup":"^4.39.0","skia-canvas":"^2.0.2","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^12.1.2"},"_npmOperationalInternal":{"tmp":"tmp/uwrap_0.1.0_1743706115439_0.594044557542968","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"uwrap","version":"0.1.1","keywords":["text","line","word","wrap","wrapping","split","virtualization","virtualize","canvas","measure"],"author":"","license":"MIT","_id":"uwrap@0.1.1","maintainers":[{"name":"leeoniya","email":"leeoniya@gmail.com"}],"homepage":"https://github.com/leeoniya/uWrap#readme","bugs":{"url":"https://github.com/leeoniya/uWrap/issues"},"dist":{"shasum":"0b1174e3c50f753ae14f80f380dcf3cd4deb800d","tarball":"https://registry.npmjs.org/uwrap/-/uwrap-0.1.1.tgz","fileCount":7,"integrity":"sha512-R7C23yCtigWoc/UjxDZQZs8d/n/m87xvHHHbPZPZK58ZaRFEWAwvvvItk5h7XmJXEX7/KlCiMX1JoqBnK/HN2A==","signatures":[{"sig":"MEQCIAwoYmGTJCAp4JVfa2FhBtoFUOrmgsnCrv1BhQx0aARYAiAEQjIxU99sPBiqnt69ScPQp+mp2A6uuvS2S00PEBREwg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17840},"type":"module","types":"./dist/uWrap.d.ts","module":"./dist/uWrap.mjs","gitHead":"834ccb47ee6575d504752e24f8ebbbe3ccf677a9","scripts":{"test":"node ./test/uWrap.test.mjs","build":"rollup -c"},"_npmUser":{"name":"leeoniya","email":"leeoniya@gmail.com"},"repository":{"url":"git+https://github.com/leeoniya/uWrap.git","type":"git"},"_npmVersion":"11.2.0","description":"A very fast and accurate text and line wrapping util","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","rollup":"^4.39.0","skia-canvas":"^2.0.2","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^12.1.2"},"_npmOperationalInternal":{"tmp":"tmp/uwrap_0.1.1_1743892578819_0.7442014103084904","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"uwrap","version":"0.1.2","description":"A very fast and accurate text and line wrapping util","homepage":"https://github.com/leeoniya/uWrap#readme","bugs":{"url":"https://github.com/leeoniya/uWrap/issues"},"repository":{"type":"git","url":"git+https://github.com/leeoniya/uWrap.git"},"license":"MIT","author":"","type":"module","module":"./dist/uWrap.mjs","types":"./dist/uWrap.d.ts","keywords":["text","line","word","wrap","wrapping","split","virtualization","virtualize","canvas","measure"],"scripts":{"test":"node ./test/uWrap.test.mjs","build":"rollup -c"},"devDependencies":{"@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^12.1.4","rollup":"^4.46.1","skia-canvas":"^2.0.2","tslib":"^2.8.1"},"_id":"uwrap@0.1.2","gitHead":"fd98c2f1be18982444f2d02b81cf4ec3e764968e","_nodeVersion":"24.4.1","_npmVersion":"11.5.1","dist":{"integrity":"sha512-f3EJhcx+pB6sWtBZOKAcJ+RweICm/FmFiqCfMy3OLpsXNcf2P5tEYn8nu3BIBYTI/srzN+VrfRN1tCkJL6QuLg==","shasum":"2a5da1977ef85394ad76a64544988fc2f00a297c","tarball":"https://registry.npmjs.org/uwrap/-/uwrap-0.1.2.tgz","fileCount":7,"unpackedSize":18747,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBuMaasnJCqPBNSuhePAK8vWEiw0vES4rETl5X3csVYsAiAYGK1CuoRiJHcWz1VZiDc9Q1KWKit/V3SI/NRGXJpaQg=="}]},"_npmUser":{"name":"leeoniya","email":"leeoniya@gmail.com"},"directories":{},"maintainers":[{"name":"leeoniya","email":"leeoniya@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/uwrap_0.1.2_1753725424181_0.7300503653405557"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-03T18:48:35.438Z","modified":"2025-07-28T17:57:04.552Z","0.1.0":"2025-04-03T18:48:35.656Z","0.1.1":"2025-04-05T22:36:19.031Z","0.1.2":"2025-07-28T17:57:04.357Z"},"bugs":{"url":"https://github.com/leeoniya/uWrap/issues"},"license":"MIT","homepage":"https://github.com/leeoniya/uWrap#readme","keywords":["text","line","word","wrap","wrapping","split","virtualization","virtualize","canvas","measure"],"repository":{"type":"git","url":"git+https://github.com/leeoniya/uWrap.git"},"description":"A very fast and accurate text and line wrapping util","maintainers":[{"name":"leeoniya","email":"leeoniya@gmail.com"}],"readme":"## ⏎ μWrap\n\nA [10x faster](#performance) and more accurate text wrapping util in [< 2KB (min)](https://github.com/leeoniya/uWrap/blob/main/dist/uWrap.iife.min.js) _(MIT Licensed)_\n\n---\n### Introduction\n\nuWrap exists to efficiently predict varying row heights for list and grid [virtualization](https://www.patterns.dev/vanilla/virtual-lists/), a technique for UI performance optimization when rendering large, scrollable datasets.\nDoing 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;\nmeasuring via DOM is also a non-starter due to poor performance.\nAdditionally, font size, variable-width [kerning](https://www.canva.com/learn/kerning/), `letter-spacing`, explicit line breaks, and different `white-space` choices affect the wrapping locations.\n\nNotes:\n\n- Currently works most accurately with Latin charsets\n- Does not yet handle Windows-style `\\r\\n` explicit line breaks\n- Only `pre-line` wrapping strategy is implemented so far\n\n---\n### Performance\n\nuWrap outperforms [canvas-hypertxt](https://github.com/glideapps/canvas-hypertxt) by a wide margin in both CPU and memory usage while being significantly more accurate.\n\nThe benchmark below wraps 100,000 random sentences into boxes of random widths between 50px and 250px.\nYou can see this live in DevTools console of the [demo page](https://leeoniya.github.io/uWrap/demo/).\n\n\n \n | \n Chrome 135 | \n Firefox 137 | \n Safari 18.1 | \n
\n \n | uWrap | \n 82ms | \n 90ms | \n 185ms | \n
\n \n | canvas-hypertxt | \n 770ms | \n 1660ms | \n 1430ms | \n
\n
\n\n---\n### Installation\n\n```\nnpm i uwrap\n```\n\nor\n\n```html\n\n```\n\n---\n### API\n\nSee [uWrap.d.ts](https://github.com/leeoniya/uWrap/blob/main/dist/uWrap.d.ts) TypeScript def.\n\n---\n### Usage\n\n```js\n// import fn for wrapping variable-width fonts using pre-line strategy\nimport { varPreLine } from 'uwrap';\n\n// create a Canvas2D context with desired font settings\nlet ctx = document.createElement('canvas').getContext('2d');\nctx.font = \"14px Inter, sans-serif\";\nctx.letterSpacing = '0.15px';\n\n// init util fns\nconst { count, test, split } = varPreLine(ctx);\n\n// example text\nlet text = 'The quick brown fox jumps over the lazy dog.';\n\n// count lines\nlet numLines = count(text, width);\n\n// test if text will wrap\nlet willWrap = test(text, width);\n\n// split lines (with optional limit)\nlet lines = split(text, width, 3);\n```","readmeFilename":"README.md"}