What is it?
Artisanal boxes is a javascript library that carefully crafts
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
artbox
and nest with
hbox
and
vbox
's. Let's see an example with a little piece of HAML:
.artbox
.hbox
.vbox
.node BOXES
.node are sized
.node to match width
.hbox
.vbox
.node but they
.node can be
.node (as nested)
.vbox
.node as you
.node want them
We get the following artbox, rendered on the fly
BOXES
are sized
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
BigText,
will play with variations of line-height and font-size to get a
reasonable fit. The spiritual successor to artisanal boxes,
make-it-work.js,
used text-transforms, but only for a single vertical column.
Once we realized that
any arbitrarily nested structure had a unique solution, it was time to learn javascript. So yes, it's new.
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?
Yes.