Skip to content
Apexify.jsDocs
Apexify.js version v5.4.5

Node / Text Rendering · guide

Wrapping, line breaks & spacing

Current Apexify.js 6.0.0 documentation for Wrapping, line breaks & spacing.

apexify.jsRuntime: nodeCURRENTSince 6.0.0

Branching inside EnhancedTextRenderer.renderText:

  1. If textOnCurve is set → curved renderer (auto word-wrap is skipped — use \\n only for stacked arcs).
  2. Else if layout.maxWidth (or legacy maxWidth) is set → computeWrappedTextLines + renderWrappedText.
  3. Else renderSingleLine — still splits on \\n for manual multi-line blocks.

Prefer layout; nested keys override flat lineHeight, letterSpacing, wordSpacing, maxWidth, maxHeight (resolveTextLayout).


Word wrap (layout.maxWidth)

  • Words come from explicitLine.split(' '); ctx.measureText(testLine) decides overflow.
  • Hard \\n in text starts a new paragraph segment; empty segments between newlines can yield blank lines when multiple \\n groups exist (same trimming rules as computeWrappedTextLines in text-layout.ts).
  • When adding the next word would exceed maxWidth, the current line commits and the word starts a new line.

Height cap (layout.maxHeight)

maxLines = floor(maxHeight / lineHeightPx) where lineHeightPx = (layout.lineHeight || 1.4) * fontSize.

When maxLines is exceeded mid-wrap, the remainder collapses to '...' on that line (computeWrappedTextLines).


Line height multiplier (layout.lineHeight)

Unitless multiplier × font.size for vertical stride between wrapped lines and explicit \\n rows (defaults 1.4 when omitted).


Letter & word spacing

FieldCanvas mapping
layout.letterSpacingctx.letterSpacing = '${n}px'
layout.wordSpacingctx.wordSpacing = '${n}px'

Spacing participates in measureText — including arc layout (grapheme centres use cumulative widths with the same context settings).


Examples

Manual lines (no auto wrap)

SOURCEtypescript
typescript
Studio
await painter.createText(  {    text: 'Line one\nLine two',    x: 40,    y: 60,    font: { size: 28, family: 'Arial' },    layout: { lineHeight: 1.35 },  },  buffer);

Auto wrap + tall box clamp

SOURCEtypescript
typescript
Studio
await painter.createText(  {    text: longParagraph,    x: 40,    y: 80,    layout: {      maxWidth: 520,      maxHeight: 220,      lineHeight: 1.45,      letterSpacing: 0.5,      wordSpacing: 2,    },  },  buffer);

Next steps