Node / Text Rendering · guide
Wrapping, line breaks & spacing
Current Apexify.js 6.0.0 documentation for Wrapping, line breaks & spacing.
Branching inside EnhancedTextRenderer.renderText:
- If
textOnCurveis set → curved renderer (auto word-wrap is skipped — use\\nonly for stacked arcs). - Else if
layout.maxWidth(or legacymaxWidth) is set →computeWrappedTextLines+renderWrappedText. - Else
renderSingleLine— still splits on\\nfor 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
\\nintextstarts a new paragraph segment; empty segments between newlines can yield blank lines when multiple\\ngroups exist (same trimming rules ascomputeWrappedTextLinesintext-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
| Field | Canvas mapping |
|---|---|
layout.letterSpacing | ctx.letterSpacing = '${n}px' |
layout.wordSpacing | ctx.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)
Auto wrap + tall box clamp