Skip to main content

Text

A component for rendering text.

Text​

type Text = {
  id?: string;
  text: string;
  width?: f32;
  height?: f32;
  max_width?: f32;
  max_height?: f32;
  font_size: f32;
  line_height?: f32;
  color_rgba?: string;
  background_color_rgba?: string;
  font_family?: string;
  style?: "normal" | "italic" | "oblique";
  align?: "left" | "right" | "justified" | "center";
  wrap?: "none" | "glyph" | "word";
  weight?: 
    | "thin"
    | "extra_light"
    | "light"
    | "normal"
    | "medium"
    | "semi_bold"
    | "bold"
    | "extra_bold"
    | "black";
}

Properties​

  • id - Id of a component.
  • text - Text that will be rendered.
  • width - Width of a texture that text will be rendered on. If not provided, the resulting texture will be sized based on the defined text but limited to max_width value.
  • height - Height of a texture that text will be rendered on. If not provided, the resulting texture will be sized based on the defined text but limited to max_height value. It's an error to provide height if width is not defined.
  • max_width - (default=7682) Maximal width. Limits the width of the texture that the text will be rendered on. Value is ignored if width is defined.
  • max_height - (default=4320) Maximal height. Limits the height of the texture that the text will be rendered on. Value is ignored if height is defined.
  • font_size - Font size in pixels.
  • line_height - Distance between lines in pixels. Defaults to the value of the font_size property.
  • color_rgba - (default="#FFFFFFFF") Font color in #RRGGBBAA format.
  • background_color_rgba - (default="#00000000") Background color in #RRGGBBAA format.
  • font_family - (default="Verdana") Font family. Provide family-name for a specific font. "generic-family" values like e.g. "sans-serif" will not work.
  • style - (default="normal") Font style. The selected font needs to support the specified style.
  • align - (default="left") Text align.
  • wrap - (default="none") Text wrapping options.
    • "none" - Disable text wrapping. Text that does not fit inside the texture will be cut off.
    • "glyph" - Wraps at a glyph level.
    • "word" - Wraps at a word level. Prevent splitting words when wrapping.
  • weight - (default="normal") Font weight. The selected font needs to support the specified weight. Font weight, based on the OpenType specification.
    • "thin" - Weight 100.
    • "extra_light" - Weight 200.
    • "light" - Weight 300.
    • "normal" - Weight 400.
    • "medium" - Weight 500.
    • "semi_bold" - Weight 600.
    • "bold" - Weight 700.
    • "extra_bold" - Weight 800.
    • "black" - Weight 900.