<text>

<text> draws a line or block of text.

src/chat.ts2

<text x={0} y={0} w="fill" h={LINE_H} text="Welcome to Rift." font={Fonts.SMALL}
      align="center" valign="middle" shadow color={Colors.DIM} />

Reference

<text>

Props

<text> accepts all common props, plus:

• text: A string. What is displayed. Use a template literal to include values: text={`${coins} gp`}.
• font: A font reference. Required — see the caveat below.
• color: A number, as 0xRRGGBB.
• align: "left", "center" or "right". Horizontal alignment within the component’s own width.
• valign: "top", "middle", "bottom" or "even". Vertical alignment within its height. "even" shares the leftover height into equal gaps above, between and below the lines — on a single line it is "middle".
• shadow: A boolean. Draws a drop shadow.
• lineHeight: A number. Spacing between lines when the text wraps.
• transparency: A number from 0 to 255, where 0 is opaque.
• altText: A string. Shown in place of text in the client’s alternate display state.
• deferred: A boolean. Leave the definition’s value for this label’s state-reading props until the state first moves — see common props.

Caveats

• A <text> needs a font (TS2E219).
• align positions the text inside the component’s own box, so it only does anything if the component is wider than its text. A w="fill" label with align="center" centres in the parent; a tightly-sized one has nowhere to go.
• Text is a prop, not content. <text>Confirm</text> is not valid.
• text is written, never read. What a label shows cannot be read back through a ref (TS2E003). Keep the value in a cell and draw the cell.

refused/text.ts2

<text w="fill" h={16} text="Confirm" color={Colors.AMBER} />

Usage

Displaying a value

src/inventory.ts2

<text x={68} y="center" w={100} h={16} text={`${coins} gp`} font={Fonts.SMALL}
      valign="middle" shadow color={Colors.AMBER} />

Centring a label in its parent

src/chat.ts2

<text x={0} y={0} w="fill" h={LINE_H} text="Welcome to Rift." font={Fonts.SMALL}
      align="center" valign="middle" shadow color={Colors.DIM} />

Right-aligning a number in a column

src/shop.ts2

<text x="right" y="center" w={60} h={16} text={`${price} gp`} font={Fonts.PLAIN}
      align="right" valign="middle" shadow color={Colors.AMBER} />

x="right" puts the element against the parent’s right edge; align="right" puts the text against the element’s.

Colouring by condition

src/skills.ts2

<text x={32} y={4} w={15} h={12} text={`${level}`} font={Fonts.SMALL}
      align="center" shadow
      color={level > base ? Colors.GREEN : Colors.YELLOW} />

Wrapping a block

src/chat.ts2

<text x={2} y={LINE_H * 5} w={{ fill: 4 }} h={LINE_H * 2} font={Fonts.SMALL}
      text="Trades are final. Check the second screen before accepting."
      shadow color={Colors.DIM} lineHeight={14} />

Fading a label in

src/boost.ts2

<text x={28} y={4} w={120} h={14} text="Strength boost" font={Fonts.PLAIN}
      valign="middle" shadow color={Colors.WHITE}
      transparency={(FADE_STEPS - step) * 10}

Troubleshooting

My text does not appear

Check font is set. If it is, check the colour is not the same as what is behind it, and check the component has a height — a <text> with h={0} has nowhere to draw.

My text is not centred

align centres within the component. Make sure the component is as wide as the area you want to centre in — usually w="fill".

My text is cut off

The component is too small, or its parent is clipping it. Text does not shrink to fit.

A character vanished

The game’s fonts carry the characters the game uses, and a curly quote is not one of them: Pirate’s Treasure renders as Pirates Treasure, silently. Write plain ASCII punctuation — ', ", -.