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

defaultDropShadow TextDropShadow static

The default drop shadow settings

Properties:
Name Type Default Description
alpha number 1

Set alpha for the drop shadow
angle

Set a angle of the drop shadow
blur number 0

Set a shadow blur radius
color string "black"

A fill style to be used on the e.g., 'red', '#00FF00'
distance number 5

Set a distance of the drop shadow

defaultTextStyle TextStyleOptions static

The default text style settings

Properties:
Name Type Default Description
align 'left' | 'center' | 'right' | 'justify' "left"

See TextStyle.align
breakWords boolean false

See TextStyle.breakWords
dropShadow undefined

See TextStyle.dropShadow
fill string | Array<string> | number | Array<number> | CanvasGradient | CanvasPattern "black"

See TextStyle.fill
fontFamily string | Array<string> "Arial"

See TextStyle.fontFamily
fontSize number | string 26

See TextStyle.fontSize
fontStyle 'normal' | 'italic' | 'oblique' "normal"

See TextStyle.fontStyle
fontVariant 'normal' | 'small-caps' "normal"

See TextStyle.fontVariant
fontWeight 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' "normal"

See TextStyle.fontWeight
leading number 0

See TextStyle.leading
letterSpacing number 0

See TextStyle.letterSpacing
lineHeight number 0

See TextStyle.lineHeight
padding number 0

See TextStyle.padding
stroke string | number undefined

See TextStyle.stroke
textBaseline 'alphabetic' | 'top' | 'hanging' | 'middle' | 'ideographic' | 'bottom' "alphabetic"

See TextStyle.textBaseline
trim boolean false

See TextStyle.trim
whiteSpace 'normal' | 'pre' | 'pre-line' "pre"

See TextStyle.whiteSpace
wordWrap boolean false

See TextStyle.wordWrap
wordWrapWidth number 100

See TextStyle.wordWrapWidth

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

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

breakWords boolean

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

dropShadow TextDropShadow

Set a drop shadow for the text.

fill FillInput

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

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

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'

The font style.

fontVariant 'normal' | 'small-caps'

The font variant.

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

The font weight.

leading number

The space between lines.

letterSpacing number

The amount of spacing between letters, default is 0.

lineHeight number

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

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 StrokeInput

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

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

The baseline of the text that is rendered.

trim boolean

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

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

Indicates if word wrap should be used.

wordWrapWidth number

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

Methods

clone () TextStyle

ts:477

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

Returns:
Type Description
TextStyle New cloned TextStyle object

destroy (options)

ts:505

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

reset ()

ts:461

Resets all properties to the default values