Pixi.js TextStyle Properties Guide

This article provides a comprehensive overview of the styling properties available within the TextStyle object in Pixi.js. By understanding these properties, you can precisely control the appearance of text in your HTML5 games and applications, including typography, colors, gradients, strokes, shadows, and multi-line alignment.

Font and Typography Properties

These properties define the typeface and general appearance of the text characters.

• fontFamily: (String | String[]) The font family or a list of font families to use (e.g., 'Arial', 'Helvetica', or custom web fonts).
• fontSize: (Number | String) The size of the font. Can be a number (representing pixels) or a string (e.g., '24px', '2pt').
• fontStyle: (String) The style of the font. Acceptable values are 'normal', 'italic', or 'oblique'.
• fontVariant: (String) The variant of the font, such as 'normal' or 'small-caps'.
• fontWeight: (String) The weight of the font. Examples include 'normal', 'bold', 'bolder', 'lighter', or numeric strings like '100', '400', '700'.

Fill and Gradient Properties

These properties control the color and interior styling of the text characters.

• fill: (String | String[] | CanvasGradient | CanvasPattern) The color used to fill the text. Can be a hex color string (e.g., '#ffffff' or 'white'), an array of colors to create a gradient, or a canvas gradient/pattern.
• fillGradientType: (Number) Defines the direction of the gradient if an array of colors is used for fill. Use PIXI.TEXT_GRADIENT.VERTICAL (0) or PIXI.TEXT_GRADIENT.HORIZONTAL (1).
• fillGradientStops: (Number[]) An array of numbers between 0 and 1 defining where the gradient color transitions occur.

Stroke (Outline) Properties

These properties apply an outline around each text character.

• stroke: (String | Number) The color of the outline around the text, specified as a hex color or string.
• strokeThickness: (Number) The width of the stroke in pixels. Set to 0 for no stroke.
• lineJoin: (String) The shape of the corners where two lines meet. Options are 'miter', 'round', or 'bevel'.
• miterLimit: (Number) The miter limit ratio, used to prevent spikes when lineJoin is set to 'miter'.

Drop Shadow Properties

These properties add a customizable drop shadow effect behind the text.

• dropShadow: (Boolean) Set to true to enable the drop shadow effect.
• dropShadowColor: (String | Number) The color of the shadow.
• dropShadowAlpha: (Number) The opacity of the shadow, ranging from 0 (transparent) to 1 (opaque).
• dropShadowAngle: (Number) The angle of the shadow in radians.
• dropShadowDistance: (Number) The distance of the shadow from the text in pixels.
• dropShadowBlur: (Number) The blur strength of the shadow. Higher numbers produce softer shadow edges.

Layout and Multi-line Properties

These properties govern how text is aligned, spaced, and wrapped when dealing with multiple words or lines.

• align: (String) Alignment for multi-line text. Options are 'left', 'center', or 'right'.
• wordWrap: (Boolean) Enables automatic line wrapping when the text exceeds a specified width.
• wordWrapWidth: (Number) The maximum width in pixels a line of text can reach before wrapping to a new line.
• breakWords: (Boolean) When wordWrap is enabled, setting this to true allows words longer than wordWrapWidth to be split across lines.
• letterSpacing: (Number) Additional spacing between individual characters in pixels.
• lineHeight: (Number) The height of each line of text. If not specified, it defaults to the font size.
• leading: (Number) Additional spacing between paragraphs or lines of text.

Performance and Rendering Adjustments

• padding: (Number) Adds extra space around the edges of the text texture. This prevents clipping issues that can occur with italic fonts, thick strokes, or heavy drop shadows.
• trim: (Boolean) Trims excess empty space from the edges of the generated text texture.
• textBaseline: (String) The baseline alignment for the text (e.g., 'alphabetic', 'top', 'middle', 'bottom').