Typography

Multi-line text rendering, OpenType feature toggles, variable font axes, text-on-path, inline editing, and CJK line breaking.

What It Is

Varve's typography system provides full text rendering with multi-line layout, text decoration, text overflow with ellipsis, list styles, per-glyph letter spacing, vertical alignment, and text case transforms. It supports OpenType feature toggles, variable font axis control, and text placed along arbitrary paths.

Key Capabilities

  • Text rendering: Multi-line with line height, paragraph spacing, text decoration (underline, strikethrough), text overflow (clip, ellipsis)
  • Inline editing: Positioned textarea overlay with IME and RTL support
  • OpenType features: 14 common feature toggles (liga, kern, salt, ss01-ss20) with per-font support detection
  • Variable fonts: Per-axis slider control with min/max/default from font metadata
  • Text on path: Place text along any shape path — circle, bezier, rectangle, polygon, star
  • CJK support: Line breaking via Intl.Segmenter for Chinese, Japanese, and Korean text
  • Font system: Google Fonts loading, @fontsource bundled fonts, CSS fallback chains
  • Typography inspector: Font family, weight, style, size, line height, letter spacing, alignment, OpenType features

Technical Depth

Text rendering uses cached offscreen canvas measurement for accurate metrics. The FontRegistry manages font loading, CSS fallback chains, and variable font axis discovery. Text-on-path uses adaptive Simpson integration for cubic bezier arc-length sampling. The engine IR carries all 15 typography properties through to the canvas replay.

SVG export includes multi-line and rich text support. Typography preflight checks font availability and CSS generation.

Limitations

Current limitations:

  • Complex script shaping (Arabic, Devanagari, Thai) not supported — Latin, CJK, and simple scripts work
  • BiDi (bidirectional) text layout not implemented
  • Text-to-outlines produces placeholder bounding boxes (real glyph path extraction deferred)
  • Rich text (per-span formatting) data model exists but UI editing is limited

Status

Built

Core text rendering, OpenType features, variable fonts, text-on-path, and inline editing are functional. Complex script shaping and rich text editing are deferred.

Ready to design with type?

Download Varve