Ripl

Appearance

Text ​

A Text element renders a text string at a given position. Unlike other built-in elements, Text extends Element directly (not Shape) because it uses the context's text rendering API rather than a path. Text supports both filled and stroked rendering, and can follow arbitrary SVG paths via the pathData property — perfect for curved labels, circular badges, and decorative typography.

Example ​

Font Size

Text on Path ​

Text can be rendered along an arbitrary path by providing a pathData string (an SVG path d attribute). The text follows the curve of the path, with each character positioned and rotated to match the path direction. This works with both SVG and Canvas contexts.

Use startOffset (0–1) to control where along the path the text begins.

Usage ​

ts
import {
    createText,
} from '@ripl/web';

const text = createText({
    fill: '#333333',
    x: 100,
    y: 100,
    content: 'Hello, Ripl!',
    font: '24px sans-serif',
    textAlign: 'center',
    textBaseline: 'middle',
});

Properties ​

The text element is defined by x, y, and content. Optional properties include pathData (SVG path string for text-on-path) and startOffset (0–1 position along the path). Style properties like font, textAlign, textBaseline, fill, and stroke control appearance.

TIP

If stroke is set, the text is stroked (outlined). If fill is set, the text is filled. If both are set, stroke takes priority.

NOTE

For the full property list, see the Text API Reference.