Tools like Pretext help you avoid DOM reflow by measuring texts without the DOM and returns the height.
Layoutmaster does that too, but it goes beyond a simple measurer and solves the full layout with a real layout engine that’s as fast and as capable as the browser itself. It then hands you the solved layout via “pieces” — fragments with exact coordinates, baselines, and paint metadata for you to easily and precisely recreate the layout in HTML, canvas, or WebGL.
The APIs are stateless and extremely simple, yet they answer all your layout questions. Enamored by the “animated dragon swimming through texts” demo from Pretext? You can easily create that with just a few lines of code instead of hundreds.
form()
Given a width, how does this lay out and how tall does it get? No DOM. No rendering. Just pieces.
fit()
Given a bounded box, what fits and what overflows? Every character accounted for. Nothing disappears quietly.
plan()
Parse once, never re-measure. The same plan drives form(), fit(), and flow() without repeating any work. The Book Masonry demo runs on this.
flow()
Content does not always fit in one box. flow() carries text through multiple regions — columns, panels, spreads.
pour()
Not every surface is a rectangle. Fill any shape — a circle, a polygon, an image silhouette, a video frame.
produce()
Hand it a document. Get back pages. Publishing-grade pagination.
Hi HN,
Author here.
Tools like Pretext help you avoid DOM reflow by measuring texts without the DOM and returns the height.
Layoutmaster does that too, but it goes beyond a simple measurer and solves the full layout with a real layout engine that’s as fast and as capable as the browser itself. It then hands you the solved layout via “pieces” — fragments with exact coordinates, baselines, and paint metadata for you to easily and precisely recreate the layout in HTML, canvas, or WebGL.
The APIs are stateless and extremely simple, yet they answer all your layout questions. Enamored by the “animated dragon swimming through texts” demo from Pretext? You can easily create that with just a few lines of code instead of hundreds.
form() Given a width, how does this lay out and how tall does it get? No DOM. No rendering. Just pieces.
fit() Given a bounded box, what fits and what overflows? Every character accounted for. Nothing disappears quietly.
plan() Parse once, never re-measure. The same plan drives form(), fit(), and flow() without repeating any work. The Book Masonry demo runs on this.
flow() Content does not always fit in one box. flow() carries text through multiple regions — columns, panels, spreads.
pour() Not every surface is a rectangle. Fill any shape — a circle, a polygon, an image silhouette, a video frame.
produce() Hand it a document. Get back pages. Publishing-grade pagination.
Does it support bidi?
Yes it does. There is a demo of it showing its bidi rendering side by side with the browser's. Almost identical in most cases: https://cosmiciron.github.io/layoutmaster/bidi.html
[dead]