Text on a Path (or Text Warping)

A Work in Progress

This is a quick study of the different ways that Inkscape can be used to distort text.

Motivation

SVG allows text to be placed along a path. Normally the glyphs are just placed along the path with no distortion to the glyphs themselves. The <textPath> method attribute can be set to "stretch" in which case "the glyph outlines will be converted into paths, and then all end points and control points will be adjusted to be along the perpendicular vectors from the path, thereby stretching and possibly warping the glyphs. With this approach, connected glyphs, such as in cursive scripts, will maintain their connections." See SVG 1.1 2nd Edition. Few SVG renders actually implement this feature, Opera being one.

SVG	PNG (as rendered by Opera)

Examples of <textPath>. For each figure: left: method="align", right: method="stretch".

While in some cases using "stretch" can lead to better results, Opera's implementation is still not optimal when one has wide glyphs as seen below.

SVG	PNG (as rendered by Opera)

Examples of <textPath>. For each figure: left: method="align", right: method="stretch".

It has been noted in an email from Israel Eisenberg that the SVG Spec doesn't define exactly how to implement "stretch". He suggests that the best option would be to distort glyphs so that "all points will be adjusted to be along the perpendicular vectors from the path, preserving vertical distance from the path." He has some examples that are quite compelling in this regard:

• Circle Text
• Circle Text, variation
• "B"

As a practical matter, these demonstrations seem to be done by adding hundreds of nodes to each glyph (in one case a B has 481 nodes).

Israel has also proposed allowing text to stretch between a lower path and an upper path. He has created a number of examples.

Inkscape Extensions and Live Path Effects

Generic distortion or warping of shapes is an often asked for feature of Inkscape (as is a perspective transform) and Inkscape provides a number of ways of accomplishing that. Distorting text can be as a subclacss of this. In the following study, two problems specific to text can be noted:

1. Text must be converted to a path before warping.
2. The distortions are based on the bounding box of the path rather than on the text properties like baseline.

Inkscape methods to distort shapes can be divided into two groups: Extensions (typically written in Python) which modify a path permanently, and Live Path Effects (written in C++) which non-destructively change a path (the original path is stored in the Inkscape namespace).

Extensions

In general, extensions work by moving nodes and control points. Straight lines remain straight.

• Pattern Along Path: puts a pattern along a skeleton path. The pattern can be a group of objects. Shape objects (e.g. <rect>) are automatically converted to paths (but text is not). The pattern is deformed to follow the skeleton path. In practice, the skeleton path is broken into many straight segments which is used to calculate lengths along the path.

  "Snake" option.

  "Ribbon" option.

  Examples of Pattern Along Path extension. For each figure: top: text converted to path, bottom: with extra nodes added.

  Note: Both nodes and control points are moved but control points are only moved the same amount as the nodes they are attached to. Straight lines remain straight lines.

• Envelope: transforms a path so that the original path bounding box maps to a quadrilateral. Not the same behavior as LPE with same name. Similar to Perspective extension.

• Perspective: transforms a path so that the original path bounding box maps to a quadrilateral but also applies a perspective effect.

  

  Example of Perspective extension.

• Rubber Stretch: deforms a path as if squeezed horizontally. Not as versatile as other extensions.

Live Path Effects

In general, a path is converted to an SBasis (Symmetric power basis) polynomial representation, transformed, and then converted back to Bezier curves. This is done using the lib2geom library package. (SBasis curves are described by functions defined over the interval t in [0, 1] with terms in the form P_i,j(t) = tⁱ(1-t)^j.)

• Bend Path: Use a control path to bend another path.

  

  Example of Bend LPE.

  Note: The effect does not allow the normal offset of the text to be controlled.

• Envelope Deformation: Use four bend paths (top, bottom, left, right) to deform a path. In all the following examples, the left and right bend paths have been toggled off. This extension can handle groups of paths, allowing glyphs with multiple colors.

  Top and bottom control paths have same shape.

  Bottom control path is straight.

  Examples of the Envelope Distortion LPE.

  The examples reveal two possible weaknesses in using Inkscape's Envelope Deformation LPE. The first is that vertical lines are not preserved as either vertical lines or as straight lines. The second is that the deformation is relative to the bounding box and not the text baseline.

  More examples of the Envelope Distortion LPE.

  My versions of Israel's circle texts.

  Examples of the Envelope Distortion LPE where the bend paths are circles.

• Pattern Along Path: similar to Effect with the same name. The pattern must be one path.

  

  Example of Pattern Along Path LPE. Top: default positioning, bottom: pattern shifted normal to path.

Additional References

• Original email that started this thread.
• Use cases.