Text on path

Text on a path is a single line of text laid along the outline of another shape:

• Host: a geometry shape, a path, a polyline, or a freehand shape gives it the line to follow.
• Attached: move, resize, rotate, or edit the host, and the text follows.
• Position: the text slides along the host to wherever you place it.

Creating text on a path

Attaches a line of text to the outline of a vector shape.

• Operation:
  1. Pick Text on path in the text multi-button of the Tools panel.
  2. Move over the shape to host the text. It highlights while the pointer is over it.
  3. Click the outline where the text should start, type the text, and click on empty board to finish.
• Needs: a vector shape as host: geometry, path, polyline, or freehand.
• Result: the text starts at the point you clicked, on the outer side of the outline, using the outline as drawn even when the host has a freehand stroke. A text left empty is removed.
• Tip: one shape can host several texts, each with its own position and style.

Editing

Changes the words of the text.

• Operation:
  1. Start editing. How depends on whether the text is already selected:
     • If the text is selected, click it again, or click Enter edit mode in the Actions panel.
     • If the text is not selected, double-click it.
  2. Type. The text stays on one line.
  3. Click on empty board to finish.
• Result: the text keeps what you typed. Trailing spaces are trimmed, and a text emptied completely is removed.

Evaluating math expressions

While editing, type an expression and then = to write its result after it: 12*3 = 36. See Math expressions for how the expression is found and what you can write.

Moving the text along the host

Changes where along the outline the text sits.

• Drag the text to slide it along the outline. On a closed shape it can go around more than once.
• Anchor fields in Selection info set the place exactly, as a distance along the outline or a percentage of its length.

Sizing

The size of the letters is the Font size in Text Style, scaled with the host. Resizing the text and its host together scales the letters, their spacing, and their distance from the outline, and the text keeps its place on the outline.

Attributes

A selected text on a path shows these sections of the Attributes panel.

Selection info

The attributes that affect the shape as a whole. Instead of position and size it shows where the text is anchored and how far it sits from the outline.

• Anchor distance along the path: the point along the outline the text is anchored to, measured from the start of the outline.
• Anchor position as a percentage of the path length: the same place, as a share of the outline's length.
• Distance from path: how far the letters sit from the outline. 0 is the normal gap; positive values move the letters away and negative values bring them closer, onto the outline or across it.
• Opacity: the transparency of the whole text.

Text Style

The typeface, size, spacing, and which side of the path the text sits on.

• Letter spacing: space between characters along the path. 0 is the font's normal spacing; positive values spread the letters apart and negative values bring them closer.

Font style and family

• Font style: the family of typefaces to choose from.
  • Sans Serif: plain letterforms without finishing strokes.
  • Serif: letterforms with finishing strokes, as in print.
  • Handwriting: letterforms that look written by hand.
  • Mono: every character takes the same width, as in code.
  • Display: decorative typefaces for titles.
• Font family: the typeface, within the chosen style.

Font variant

• Font variant: the weight or slant of that typeface.

Font size

• Font size: the size of the text.

Letter spacing

• Letter spacing: for text on a path, the extra space between characters along the path.
• Flip text: moves the text to the other side of the path.

Text Fill

The color of the letters and its opacity.

• Text fill style: whether the characters are filled. The style decides which of the controls below appear.
  • No fill: the characters are hollow.
  • Solid fill: the characters are filled with one flat color.

Text fill color

Shown with solid text fill.

• Text fill color: the color of the characters.

Text fill opacity

Shown with solid text fill.

• Text fill opacity: the transparency of that color.

Text Outline

The outline drawn around the letters.

• Text stroke style: whether the characters have an outline. The style decides which of the controls below appear.
  • No stroke: no outline.
  • Solid stroke: a continuous outline.
• For solid strokes only:
  • Text stroke color: the color of the outline.
  • Text stroke opacity: the transparency of the outline.
  • Text stroke width: the thickness of the outline.
  • Over Fill: draws the outline over the fill instead of behind it, so it covers part of each character. Texts, arrows, and geometry shapes have it, while the text has a fill.

Filter

A chain of SVG filter primitives applied to how the shape is drawn. See Filters.

Mask

Text on a path can be masked. To use text as a mask, use a Text shape. See Masks.

Actions

Besides the actions every shape has, covered in What every shape shares, text on a path offers this in the Actions panel.

Convert to Image

Replaces the text with an image that looks the same but draws faster, to keep a board with many shapes light.

• Operation: click Convert to Image. If the text has a text or Path Crawl animation, a dialog warns that it will be lost, and you confirm with Convert.
• Result: an SVG image in place of the text that looks the same, fill and outline included, and stays sharp at any zoom. The image no longer follows the host, and the words can no longer be edited. Move, rotate, scale, resize, and fade animations move to the image, and text and Path Crawl animations are removed.
• Tip: to get the letters as editable shapes, convert the image to shapes. That gives one text shape per visible letter, which you can then convert to paths or freehand shapes.

Following the host

What happens to the text when its host changes.

• Editing the host's points, size, corners, or geometry reflows the text along the new outline.
• Moving the host into or out of a frame or a group takes the text along.
• Deleting the host, or converting it into another kind of shape, turns the text into a plain text shape at its last place and angle. The words are kept; letter spacing returns to the font's normal spacing, and the distance from the outline is lost.
• Duplicating, pasting, or importing a text on a path without its host also gives you a plain text shape.

Animating text on a path

Five animation blocks work with text on a path:

• Opacity Animation fades the text in or out.
• Text Animation reveals the text as if typed.
• Text Sequence shows a timed series of texts in the same shape.
• Path Crawl slides the text along its host between a start and an end offset.
• Attributes Animation changes the letter spacing and the distance from the path over time, and can flip the text to the other side.

All are set up in the Timeline panel.

In Opacity and Path Crawl blocks, Stagger text animates one character or word at a time. With Path Crawl, each character follows the curve at its own delayed time.