Text & typography

A PDF is mostly words, so <text> is the element you will use most. It is a wrapping, styled paragraph: give it room and it lays out lines, breaking between words to fit the width it is offered.

A paragraph and its attributes

<text font="serif" size="14" color="#1b1a17">
  This is a paragraph. It wraps across as many lines as it needs, filling the
  width it is given and breaking neatly between words.
</text>

The attributes you will reach for:

• font — sans (the default), serif, or any family you registered.
• size — a length; size="14" means 14pt.
• bold / italic — true or false.
• color — a hex value (#1b1a17, #c4341f, #0a0) or a CSS colour name (black, red, navy…).
• align — left (default), center, right, or justify.

Alignment

Justified text spreads words to both margins, like a newspaper column. Try switching align below:

<text align="justify" size="13">
  Justified text stretches the spaces between words so both edges line up. It
  reads well in narrow columns and gives a page a tidy, typeset feel — exactly
  what you would set <i>text-align: justify</i> for on the web.
</text>

Inline markup: styling inside a paragraph

Inside <text> you mark up runs of words with inline tags — the print cousins of <strong>, <em>, and <a>. They nest freely.

<text size="14">
  Styled runs nest: <b>bold</b>, <i>italic</i>, <b><i>both</i></b>,
  <u>underline</u>, <s>strike</s>, a <font color="#c4341f">coloured span</font>,
  and a real <a href="https://example.com">hyperlink</a> you can click in the PDF.
</text>

The inline vocabulary:

• <b> bold, <i> italic, <u> underline, <s> strike-through.
• <font> overrides color and/or size for a run: <font size="20" color="#c4341f">big and red</font>.
• <a href> a hyperlink — clickable in the rendered PDF, drawn blue and underlined by default.
• <br/> a forced line break.

<text size="14">
  Line one is here<br/>
  and a forced break dropped us to line two.<br/>
  <font size="18" color="#9a2615">A bigger, redder closing line.</font>
</text>

Inline blocks: a box in the flow

The tags above only restyle words. <inline> does something different — it drops a whole block into the running text, the way display: inline-block does on the web. Put any element inside (a <rect>, a <circle>, an <image>, even a <vertical>), and it flows as one unbreakable unit between the words, growing its line to fit and wrapping like any other word.

Its size and look come from the same style: attributes you use everywhere; the one inline-specific attribute is valign — middle (centered on the line, the default), baseline, or top. Wrapping bare text instead makes a styled chip.

<document version="2.0">
  <config><page size="A6" margin="20px" /></config>
  <pages>
    <page>
      <text size="14">
        A status <inline style:background="#1a7f3c" style:padding="1px 6px"
          style:border-radius="4px" color="#ffffff" bold="true">LIVE</inline>
        chip, a swatch <inline valign="middle"><rect width="12px" height="12px"
          fill="#c4341f" /></inline>, and a baseline badge
        <inline valign="baseline"><circle radius="6px" fill="#1b66c9" /></inline>
        all ride inside the paragraph, and the text keeps wrapping around them.
      </text>
    </page>
  </pages>
</document>

Paragraphs and spacing

A single <text> can hold several paragraphs. Wrap each in <p>…</p> and pdg opens a gap — set by paragraph-spacing — before each one:

<text size="13" paragraph-spacing="8px">
  <p>This is the first paragraph. It says its piece and then ends.</p>
  <p>This second paragraph opens below a paragraph-spacing gap, so the two read
  as distinct blocks rather than one run-on wall of text.</p>
</text>

For space between separate <text> elements, you have two clean options we will use throughout: a <spacer> of fixed height, or a <vertical> container with a gap — both in the next two chapters.

Fonts beyond the built-ins

sans and serif are always available and embedded, so output looks identical everywhere. To use another face, register it in <config> and refer to it by name. The quickest route is a Google font:

<document version="2.0">
  <config>
    <page size="A6" margin="20px" />
    <google-font name="Lobster" />
  </config>
  <pages>
    <page>
      <text font="lobster" size="30" color="#c4341f">Lobster, from Google Fonts</text>
      <text size="12">Registered once, used by lowercased name.</text>
    </page>
  </pages>
</document>

You can also point a family at a local .ttf with <font-face>. Both routes, plus how <defaults> and font subsetting interact, are documented in the Configuration guide.

Words placed. Now let's give them boxes to live in.