Text

Text basics

Create text with Text(content, properties).

import { Color, Slide, Text } from "presenter";
const text = Text("Hello, world!", {  x: 200,  y: 200,  fontSize: 200,  color: Color.WHITE,});
const slide = Slide({  objects: [text],});

Common text properties include:

• color: Color object describing the color of the text.
• fontFamily: String describing the font to use to render the text. Can be a single font, or a comma-separated list of fonts to indicate alternatives if the first is not available on the system.
• fontSize: Number describing the size of the font in pixels.
• fontStyle: FontStyle enum value describing the style of the font (e.g. FontStyle.NORMAL, FontStyle.ITALIC, FontStyle.OBLIQUE).
• fontWeight: FontWeight enum value describing the weight of the font (e.g. FontWeight.NORMAL, FontWeight.BOLD, FontWeight.LIGHT). Alternatively, a number can be used to specify the weight directly (e.g. 400 for normal, 700 for bold).
• lineSpacing: Number indicating space between lines. Defaults to 1.

Length and write-on text

The length property limits the number of characters rendered. Its default is null, which displays all text.

import { Text } from "presenter";

const message = Text("Only part of this message is visible.", {
  length: 25,
});

The length property can be animated to create a "write-on" effect. Alternatively, the Text.writeOn function can generate a write-on animation for you.

import { Anchor, Animate, Color, Slide, Text } from "presenter";
const content = "Hello, world!";const text = Text(content, {  length: 0,  /* ... additional properties ... */});
const slide = Slide({  objects: [text],  animations: [Animate(text, { length: content.length })],});

Multi-line and rich text

A plain string creates one line. For multiple lines, pass an array of rows. Each row is an array containing strings, TextUnits, or both:

import { Color, FontWeight Text, TextUnit } from "presenter";

Text([
  ["First line"],
  [
    "This word is ",
    TextUnit("important", {
      color: Color("#fbbf24"),
      fontWeight: FontWeight.BOLD,
    }),
  ],
]);

Each TextUnit can override the parent text style for only its own content, as by customizing color, fontFamily, fontSize, fontStyle, or fontWeight. The parent Text still controls positioning, alignment, line spacing, opacity, and length.

import { FontStyle, FontWeight, Slide, Text, TextUnit } from "presenter";
const message = Text(  [    [      "Presenter.js supports ",      TextUnit("rich text", { color: Color("#60a5fa"), fontWeight: FontWeight.BOLD }),    ],    [      TextUnit("across multiple lines", { fontStyle: FontStyle.ITALIC, fontFamily: "serif" }),    ],  ],  {    length: 31,    /* ... additional properties ... */  },);
const slide = Slide({  objects: [message],  animations: [Text.writeOn(message)],});

Alignment

Use alignment to align lines inside a text block:

import { Alignment, Text } from "presenter";

Text([["Short"], ["A much longer line"]], {
  alignment: Alignment.CENTER,
});

Alignment.LEFT is the default. Alignment.CENTER and Alignment.RIGHT position shorter lines relative to the widest line in the block. This differs from anchor, which positions the entire text block relative to its x and y coordinates.

import { Alignment, Slide, Text } from "presenter";
const alignments = [  { alignment: Alignment.LEFT, y: 350, label: "LEFT" },  { alignment: Alignment.CENTER, y: 950, label: "CENTER" },  { alignment: Alignment.RIGHT, y: 1550, label: "RIGHT" },];
const textBlocks = alignments.map(({ alignment, label, y }) =>  Text([[label], ["A longer second line"]], {    alignment,    y,    /* ... additional properties ... */  }),);
const slide = Slide({  objects: [guide, ...textBlocks],});