Skip to main content

Paragraphs

A <x:textbox> whose children are <x:p> elements flows them as separate paragraphs, stacked top-down inside the box with vertical gaps — the multi-paragraph body real documents need, instead of one endless run. Each paragraph wraps to the content width and carries its own alignment, indent, style, and spacing. It lowers to one live <text> per paragraph, so the output stays selectable plain SVG.

Compiling…
Paragraphs in a textboxOpen in viewer ↗Edit in Playground →
A heading, a first-line-indented body paragraph, and a justified one — plus a vertically centered pull-quote column.

Syntax​

<x:textbox x="40" y="60" width="384" height="360" font-size="14" paragraph-spacing="14">
  <x:p font-size="22" font-weight="800" space-after="6">A heading paragraph</x:p>
  <x:p text-indent="22">A body paragraph, led in by a first-line indent…</x:p>
  <x:p align="justify">…and a justified one, keeping the paragraph gap above it.</x:p>
</x:textbox>

How paragraphs stack​

Each <x:p> is wrapped independently to the box's content width, then the paragraphs are stacked from the top. The gap between two paragraphs is the space-after of the first plus the space-before of the second. space-after defaults to the box's paragraph-spacing, so setting that once on the <x:textbox> gives every paragraph a consistent gap; space-before/space-after on an individual <x:p> add to it where you want more air (a heading, a byline).

Once the whole block is stacked, it is placed by the box's valign (top / middle / bottom). Lines whose baseline leaves the box are clipped.

Per-paragraph style​

Any <x:p> overrides the box defaults for its own run: align (including justify), text-indent for a first-line indent (see Justification and the spacing model), and font-* / fill for size, weight, and color. This is how one textbox holds a large bold heading, an indented body paragraph, and a small colored label without three separate elements.

Attributes​

AttributeOnValuesDefaultDescription
paragraph-spacing<x:textbox>length0Default gap after each paragraph (each paragraph's space-after default).
space-before<x:p>length0Extra gap above this paragraph.
space-after<x:p>lengthparagraph-spacingExtra gap below this paragraph.
align<x:p>start / middle / end / justifybox's alignPer-paragraph alignment.
text-indent<x:p>length0First-line indent for this paragraph.
font-*, fill<x:p>as textbox's valuePer-paragraph style over the box defaults.

How it lowers​

Each <x:p> compiles to its own <text> element carrying the source range of that paragraph, so a viewer's inspector resolves a click to the individual paragraph. There is no runtime — the output is positioned live <text>.

v0 limits​

Paragraph mode is live text: no create-outlines, no <tspan> runs inside a single paragraph, and it applies to the rectangular box only. A curved in="#shape" region ignores <x:p> and flows as one block.

See also​