Typography

Creating Text

Press T to select the Text tool. Click anywhere on the canvas to create a text node at that position. Start typing immediately — the text appears on canvas as you type. Press Escape or click elsewhere to finish editing.

Varve automatically sizes the text box based on your content using measureText() from the canvas API. The box expands as you type, or you can create a fixed-width text area by clicking and dragging to define a bounding box.

Editing Text

There are two ways to edit existing text:

• Double-click the text node with the Select tool to enter inline editing. A positioned <textarea> overlay appears at the text's location on canvas, supporting IME input, RTL text, and keyboard navigation.
• Edit in Inspector — Select a text node and find the text content field in the Typography section of the Inspector. This is useful for longer text passages.

Press Escape or click away to exit edit mode.

Text Properties

The Typography section in the Inspector provides controls for every text property:

Font Selection

Varve's Font Registry manages font loading and fallback chains. You can use:

• System fonts — Fonts installed on your operating system
• Bundled fonts — Open-source fonts included with Varve via @fontsource packages
• Google Fonts — Load any Google Font by URL via FontFace API

The font family selector shows available fonts with their CSS fallback chain. Missing fonts trigger a visible warning in the Typography section.

Size and Weight

• Font Size — Numeric input with drag-to-scrub
• Font Weight — Numeric value (100-900) or named weight selector (Thin through Black)
• Font Style — Normal, Italic, or Oblique

Alignment and Spacing

• Text Align — Left, Center, Right, Justify
• Text Align Vertical — Top, Middle, Bottom
• Line Height — Multiplier (e.g., 1.5) or absolute value
• Letter Spacing — Per-glyph spacing in pixels
• Paragraph Spacing — Additional space between paragraphs

Case and Decoration

• Text Case — Uppercase, Lowercase, Capitalize (Title Case), or Normal
• Text Decoration — Underline, Line-through, or None
• Text Overflow — Clip (hide overflow) or Ellipsis (show "...")

Lists

Text nodes can render as lists with List Style options: Disc, Decimal, Circle, or Square. Varve handles list item numbering and bullet rendering automatically.

OpenType Features

For fonts that support them, Varve exposes OpenType feature toggles in a collapsible section:

• liga — Standard ligatures
• kern — Kerning
• salt — Stylistic alternates
• ss01 through ss20 — Stylistic sets
• And other common features (calt, dlig, frac, sups, subs, onum, lnum, pnum, tnum, zero)

Variable Fonts

Varve supports variable fonts with full axis control. When a variable font is selected, the Typography section shows a Variable Axes panel with range sliders for each registered axis (e.g., weight, width, optical size, slant). The available axes are determined by the font's fvar table.

Text on Path

Text can be placed along any vector path. This feature uses adaptive Simpson integration to compute accurate arc-length parameters for cubic bezier curves. To use text on path:

1. Create a path using the Pen or Pencil tool
2. Create a text node
3. In the Typography section, select the path node as the Path Shape reference
4. The text renders along the path with per-glyph positioning and rotation

Text Measurement

Varve uses real canvas measureText() for accurate text metrics, falling back to content-length estimation only in non-DOM environments. The measurement system powers:

• Auto-sizing text boxes
• Multi-line text wrapping with line height and paragraph spacing
• Ellipsis overflow detection
• Vertical alignment calculations
• CJK line breaking via Intl.Segmenter for word-boundary-aware wrapping