Making labels is harder than you might think.

By "labels" I mean titles or short phrases inside boxes or dots or stars in an org chart, edge graph, family tree, flow chart or other such diagram. It's easy enough to make rectangles or ellipses, and you can use the fit_to node to put a textpath into those shapes, but if you do that, each label textpath will be a different size. Looks unprofessional.

What you want is to have all the labels the same size in the same font, regardless of what different shapes they might be enclosed in. And you want each type of shape to be the same size. And you want the shapes to fit nicely around the labels with a little padding but not too much. And if you have multi-word labels, you want that text to break in the right places, even if the lengths of the labels vary quite a bit.

Over the years I've had to make charts with labels like this and it's always a bit of pain to balance all these conflicting constraints. I end up having to do a lot of manual adjustments - which makes it harder to play freely and try different fonts, sizes, color combinations, etc..

So I finally decided to make a node that would make this process more automatic: labelmaker.

Labelmaker places and renders a list of label strings inside a shared container shape so that all the labels are in the same font at the same size. It takes the following parameters:

• Container. A shape. The shape may scale to accommodate the labels, but each instance will be the same size and retain its coloring. When stretching shapes like rectangles or ovals, the exact width and height doesn't matter, just the ratio between the two.
• Labels. A list of one or more strings.
• Font Name. The font you want for your labels.
• Font Size. The font size you want. This size will determine the final size of the container shape and the overall diagram.
• Align. Left, Center, or Right. You will normally want Center, but may use Left for multi-line labels inside certain shapes like flags.
• Adjust Text Width. The default of 0 uses the automatically assigned text width. Adjust this value up or down to change where the words break (more info below).
• Label Color. The color of your label text. Background color of the shape is defined by colorizing the container.

You may notice that, unlike textpath, you do not have to enter a text width to control line breaks. Labelmaker attempts to do this automatically. It is not always possible to do this perfectly; designers may differ on how best to balance the competing needs for adequate negative space around the text in a given shape and the overall look and feel of how different line break patterns compare in neighboring labels with different lengths. Sometimes there is a word so long that leaving it unbroken would force many other labels to appear like fine print swimming inside too much space. Layout issues like this can be tricky,

My solution was to automatically choose a text width that's good enough or at least pretty close. You can then quickly and easily adjust this value by simply changing the "Adjust text width" setting from 0 up to accommodate longer words or down to squish labels into more compact profiles. Usually you don't have to change this value very far to get everything just right.

I also put in a fair amount of work to make this node as efficient as possible so that you can handle a large number of labels (a thousand or more at a time). It will run faster for some common container shapes that are symmetrical with a similar width/height ratio to text: rectangles, rounded rectangles, pills (severely rounded rectangles), and ellipses. Odder shapes like flags, triangles, pentagons, stars, etc will take just a little longer, but should fit nicely (using my inscribe node). Lists of a few hundred labels should update almost instantly.

All of this allows you to play with sizing, fonts, and colors fluidly and effortlessly. The attached demo shows a simple node graph that I threw together and polished in just a few minutes.

The graph uses a scatter node and my mesh node to create a random graph. For labels I used noun phrases from Lewis Carroll's Jabberwocky. I quickly stepped through dozens of possible color combinations for the label text and container background using my sanzo_color node (with the sort_colors node added so I could reverse colors with a single click).

That just left the container shape and the font size. I started with circles - which labelmazer was happy to fill - but on seeing it I realized the text would look better if I widened the ovals a bit. As I changed the width of the ellipse node the entire diagram updated automatically, so I could just drag until I got the look I wanted.

I used Nodebox's default font Vendana (Bold) so that everyone could see it; feel free to change this to other fonts in your system. Changing the font size caused the entire diagram to grow or shrink, so I set it to make the diagram fit into my usual demo canvas. The final step was to bump up the text width adjustment to prevent one or two labels from breaking in the wrong place. All of this was so quick and fluid that is was fun to play with.

I've been futzing with this node for days now. I think it's finally ready to share, but I reserve the right to keep tinkering with as I gain more experience using it in different situations. As always I would love to see what you all might do with this, and would welcome any suggestions for further improvement.

Go out and make some labels!