What is it?
a series of nested divs into a tightly knit arrangement.
These boxes are completely organic and fluidly respond to window resizes.
They begin with class of
and nest with
's. Let's see an example with a little piece of HAML:
.node are sized
.node to match width
.node but they
.node can be
.node (as nested)
.node as you
.node want them
We get the following artbox, rendered on the fly
to match width
Hate HAML? That's OK, just check out the source
of this page to see how it's done with pure HTML.
How does it work?
First we measure the aspect ratio for each end node of the nested structure. The boxes respect the bounding box of the font, hence changing line-height will give a tighter fit at the expense of overlapping descenders. Once the aspect ratio of the text (and any images) have been measured the unique layout is calculated and applied using transform-scale.
Is it new?
Some libraries like FitText
resize the font to match a specific width. Others, like
will play with variations of line-height and font-size to get a
reasonable fit. The spiritual successor to artisanal boxes,
used text-transforms, but only for a single vertical column.
Once we realized that any
Is it fast?
In time you'll realize that good things are worth the wait.
The calculations to fit the boxes requires solving a linear system whose
size is proportional to each box and
parent box. The calculation
is all done client-side and must be redone for any window resize. In practice,
this may add tenths of microseconds onto load times.
Is it beautiful?