For those who did not attend 360|Flex, Paul Taylor and I collaborated on an organic text TinyTLF demo. We are used to thinking about organic text in terms of path deforming, that is, arranging the letters in the text along a general curve or path. While I’ve illustrated that process for a single spline, the next step is to extend the method to a general path, which may be discontinuous both spatially and in first derivative. That work is in progress.

Another way to think about organic text is for one of the bounds (top, bottom, left, right) to be nonlinear. Instead of having text flow inside strict rectangular bounds, consider text flowing around a left or right spline boundary. Our 360|Flex demo used TinyTLF to render text inside a container whose left boundary was a quadratic Bezier spline. The right boundary could be a spline as well, but the demo was simplified to have only one nonlinear boundary. Paul also got a version of the demo running after his presentation where the spline was animated.

This particular quadratic spline is G-1 continuous and non-interpolative. The spline is only guaranteed to pass through the first and last knots in the sequence. The first and last quad. Beziers are degenerate; they are actually lines, so the quadratic coefficient is zero. This causes the spline to be closer to the beginning and ending boundaries than a typical quad. There is also a tension parameter, which works best for values in the 0.2 – 0.6 range. I personally like about 0.3. I don’t know the original attribution for this spline, so the best I can do is credit my computational geometry professor, Dr. R. Tennyson. The algorithm goes back to at least the late 1970s so the only possible contribution I might be able to claim is addition of tension 🙂

The spline uses instances of a custom quadratic Bezier class for its constituent segments under the assumption that the y coordinates are non-decreasing from segment to segment. This allows a single value to returned from the x-at-y method. A horizontal sweep-line is moved from the top to the bottom of a container. If the sweep line is outside the range of one spline, the x-value at either the minimum or maximum y is used to bound the container, allowing virtual bounds to extend infinitely in either direction. This is illustrated in the screen shot below.

If the sweep line falls within either spline boundary, then the y-coordinate is already known. The Quadratic Bezier x-at-y algorithm returns a single x-coordinate that completes identification of the boundary. You can imagine the red line as a proxy for text lines that are laid out by TinyTLF.

I’ll post again whenever Paul gets the presentation and demos online so you can see it in practice. In the mean time, you can view the current demo from which Paul developed the spline layout. It’s only been moderately tested, but should be far enough along to deconstruct how the algorithm works.

View demo.

View source.