Text

A flow text block. Supports multi-line wrapping, font styling, and inline span children for mixed runs.

Attributes

Attribute	Type	Default	Description
font-size	token/pt	inherit	xs s m l xl xxl or 14pt
font	string	inherit	Font name declared in assets
color	color	#1a1a1a	Text color: #333333 or a named token. Not inherited: a color named text in tokens changes the default
align	string	left	left center right justify
width	token/pt	—	Constrain text block width
data-value	string	—	Dot-path — replaces text content with bound value
data-if	string	—	Render only when value is truthy
data-if-not	string	—	Render only when value is falsy

Basic

<text font-size="24pt">Heading</text>
<text font-size="m" color="#555555">Supporting paragraph text.</text>

Justified body copy

XML

<text font-size="m" align="justify">
  Long paragraphs of body copy look best with justify alignment.
  The engine handles line breaking automatically.
</text>

Node.js

L.text({ fontSize: 'm', align: 'justify' }, ['Long paragraphs of body copy look best with justify alignment. The engine handles line breaking automatically.'])

Python

L.text(TextAttr(font_size='m', align='justify'), ['Long paragraphs of body copy look best with justify alignment. The engine handles line breaking automatically.'])

PHP

L::text(new TextAttr(fontSize: 'm', align: 'justify'), ['Long paragraphs of body copy look best with justify alignment. The engine handles line breaking automatically.'])

.NET

L.Text(new() { FontSize = "m", Align = "justify" }, ["Long paragraphs of body copy look best with justify alignment. The engine handles line breaking automatically."])

Inline spans for mixed styling

Use span children to apply different styles within a single text block.

Span attribute	Description
font	Font name
color	Text color
href	Makes the span a hyperlink
underline	true / false
strike	true / false

XML

<text font-size="m">
  See the <span href="https://lpdf.io" color="#1a73e8" underline="true">documentation</span>
  for full details. Use <span font="Courier">monospace</span> for code.
</text>

Node.js

L.text({ fontSize: 'm' }, [
    'See the',
    L.span({ href: 'https://lpdf.io', color: '#1a73e8', underline: 'true' }, ['documentation']),
    'for full details. Use',
    L.span({ font: 'Courier' }, ['monospace']),
    'for code.',
])

Python

L.text(TextAttr(font_size='m'), [
    'See the',
    L.span(SpanAttr(href='https://lpdf.io', color='#1a73e8', underline='true'), ['documentation']),
    'for full details. Use',
    L.span(SpanAttr(font='Courier'), ['monospace']),
    'for code.'
])

PHP

L::text(new TextAttr(fontSize: 'm'), [
    'See the',
    L::span(new SpanAttr(href: 'https://lpdf.io', color: '#1a73e8', underline: 'true'), ['documentation']),
    'for full details. Use',
    L::span(new SpanAttr(font: 'Courier'), ['monospace']),
    'for code.',
])

.NET

L.Text(new() { FontSize = "m" }, [
    "See the",
    L.Span(new() { Href = "https://lpdf.io", Color = "#1a73e8", Underline = "true" }, ["documentation"]),
    "for full details. Use",
    L.Span(new() { Font = "Courier" }, ["monospace"]),
    "for code.",
])

Data binding

<text data-value="customer.name">Fallback name</text>

The content of the element is replaced by the bound value at render time. The literal content is what renders when no data is passed.