PixiJS

Class: TextStyle

TextStyle

A TextStyle Object contains information to decorate a Text objects.

An instance can be shared between multiple Text objects; then changing the style will update all text objects using it.

Example

import { TextStyle } from 'pixi.js';
const style = new TextStyle({
  fontFamily: ['Helvetica', 'Arial', 'sans-serif'],
  fontSize: 36,
});

Members

_fill ConvertedFillStyle

_stroke ConvertedStrokeStyle

align 'left' | 'center' | 'right' | 'justify'

See TextStyle.align

Default Value:
  • "left"

align 'left' | 'center' | 'right' | 'justify'

Alignment for multiline text, does not affect single line text.

breakWords boolean

See TextStyle.breakWords

Default Value:
  • false

breakWords boolean

Indicates if lines can be wrapped within words, it needs wordWrap to be set to true.

dropShadow

See TextStyle.dropShadow

Default Value:
  • undefined

dropShadow TextDropShadow

Set a drop shadow for the text.

fill string | Array<string> | number | Array<number> | CanvasGradient | CanvasPattern

See TextStyle.fill

Default Value:
  • "black"

fill FillStyleInputs

A fillstyle that will be used on the text e.g., 'red', '#00FF00'.

fontFamily string | Array<string>

See TextStyle.fontFamily

Default Value:
  • "Arial"

fontFamily string | string[]

The font family, can be a single font name, or a list of names where the first is the preferred font.

fontSize number | string

See TextStyle.fontSize

Default Value:
  • 26

fontSize number

The font size (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em')

fontStyle 'normal' | 'italic' | 'oblique'

See TextStyle.fontStyle

Default Value:
  • "normal"

fontStyle 'normal' | 'italic' | 'oblique'

The font style.

fontVariant 'normal' | 'small-caps'

See TextStyle.fontVariant

Default Value:
  • "normal"

fontVariant 'normal' | 'small-caps'

The font variant.

fontWeight 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'

See TextStyle.fontWeight

Default Value:
  • "normal"

fontWeight 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'

The font weight.

leading number

See TextStyle.leading

Default Value:
  • 0

leading number

The space between lines.

letterSpacing number

See TextStyle.letterSpacing

Default Value:
  • 0

letterSpacing number

The amount of spacing between letters, default is 0.

lineHeight number

See TextStyle.lineHeight

Default Value:
  • 0

lineHeight number

The line height, a number that represents the vertical space that a letter uses.

padding number

See TextStyle.padding

Default Value:
  • 0

padding number

Occasionally some fonts are cropped. Adding some padding will prevent this from happening by adding padding to all sides of the text.

stroke string | number

See TextStyle.stroke

Default Value:
  • undefined

stroke FillStyleInputs

A fillstyle that will be used on the text stroke, e.g., 'blue', '#FCFF00'.

textBaseline 'alphabetic' | 'top' | 'hanging' | 'middle' | 'ideographic' | 'bottom'

See TextStyle.textBaseline

Default Value:
  • "alphabetic"

textBaseline 'alphabetic' | 'top' | 'hanging' | 'middle' | 'ideographic' | 'bottom'

The baseline of the text that is rendered.

trim boolean

See TextStyle.trim

Default Value:
  • false

trim boolean

Trim transparent borders. This is an expensive operation so only use this if you have to!

whiteSpace 'normal' | 'pre' | 'pre-line'

See TextStyle.whiteSpace

Default Value:
  • "pre"

whiteSpace 'normal' | 'pre' | 'pre-line'

How newlines and spaces should be handled. Default is 'pre' (preserve, preserve).

value New lines Spaces
'normal' Collapse Collapse
'pre' Preserve Preserve
'pre-line' Preserve Collapse

wordWrap boolean

See TextStyle.wordWrap

Default Value:
  • false

wordWrap boolean

Indicates if word wrap should be used.

wordWrapWidth number

See TextStyle.wordWrapWidth

Default Value:
  • 100

wordWrapWidth number

The width at which text will wrap, it needs wordWrap to be set to true.

Methods

clone () TextStyle

ts:442

Creates a new TextStyle object with the same values as this one.

Returns:
Type Description
TextStyle New cloned TextStyle object

destroy (options)

ts:470

Destroys this text style.

Name Type Attributes Default Description
options TypeOrBool<TextureDestroyOptions> false

Options parameter. A boolean will act as if all options have been set to that value
options.texture boolean <optional>
 false

Should it destroy the texture of the this style
options.textureSource boolean <optional>
 false

Should it destroy the textureSource of the this style