How to calculate the best width of a text element

Question

I am developing a visual editor where the nodes in the editor can contain text. The size of the text can vary, and can contain any character. Since it is important for me to minimize the size of the model, I want to calculate the best possible way to display the text inside the model.

For example, say you have a node with the text Send data to external provider. The simple way to show this would be to have a wide and short node with all of the text in one line, like this:

But IMHO, a better way to display the node is something like this:

So the question is, what should be the best ratio (width:height) of the text being displayed? Is there a "good" ration at all?

Answer 1

As @kontur has already pointed out, there are many considerations when doing this. But if you are looking for a rough but generally workable solution I would consider something like the following.

Set the width based on a function of the number of characters in the string, and use a standard word wrap to determine the layout. As a rough example:

1. Devise a simple algorithm array to determine your layout where the first element contains a tuple of two elements. The first representing the max number of characters to spread over one line, and the second containing, the width (in whatever units you are using) of the area. The second element would be a tuple containing the max number of characters to spread over three lines, and the width that you would want to use for that area. And continue on as long as you like. An example (using em's as my units) may be:
   [(30, 15), (48, 14), (62, 13),...]
2. Count the number of characters in the string.
3. Check the elements of the algorithm array to find the first one for which the first element of the tuple is higher than the number of characters, and set the width equal to the value in the second element.

This will not look as good as an advanced layout algorithm, but will get the job done quickly. Some further examples to help clarify this (using the algorithm array given above):

Characters = 49, width = 14
Characters = 28, width = 12
Characters = 63, width = 13

You will need to play with the choice of numbers for the algorithm array to get it to what you want, but it should be better than a fixed max width, and easier to implement than any advanced algorithm.

Answer 2

Generally speaking, the way you set your text follows the demands of your application. Without the context you provided, your first example is very much more pleasant to read. However, as you said it is within a UI that contains nodes I can imagine that what you are after is a general space conserving way of presenting text in those nodes.

Supposedly, for your situation you could divise an algorithm that breaks the text in a reasonable way to accomodate your nodes in the desired space. Text setting in general is a bit of a art in itself and there is many, many, many things on fine tuning level that are hard to implement in an algorithm, but some things you could consider:

• words / line or characters / line
• grow the number of words or characters / line in respect to the overall length of the string
• distribute evenly accross lines, i.e., avoid single words on one line (so-called "orphans") - in other words, break the string in a way that creates equal amount of words or characters / line

Things that are a bit more hard to implement:

• don't break coined two or three word terms (like "external provider" in your example)
• take punctuation marks as break indicators
• hyphenate
• break after connector words like and, or, etc
• take overall consistency into account, e.g., if you have three nodes with a couple of short lines there should not be a forth node with one overly long line

Implementation of these things listed is a whole different case, but devising a good algorithm for this problem enforces consistency.