PixiJS

Interface: TextStyleOptions

TextStyleOptions

Constructor options used for TextStyle instances.

const textStyle = new TextStyle({
   fontSize: 12,
   fill: 'black',
});
Properties:
Name Type Description
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 boolean | Partial<TextDropShadow>

Set a drop shadow for the text
fill string | Array<string> | number | Array<number> | CanvasGradient | CanvasPattern

A canvas fillstyle that will be used on the text e.g., 'red', '#00FF00'. Can be an array to create a gradient, e.g., ['#000000','#FFFFFF'] MDN
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

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 height of the line, a number that represents the vertical space that a letter uses.
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 canvas 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.
whiteSpace 'normal' | 'pre' | 'pre-line'

Determines whether newlines & spaces are collapsed or preserved "normal" (collapse, collapse), "pre" (preserve, preserve) | "pre-line" (preserve, collapse). It needs wordWrap to be set to true.
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
See:

Members

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 boolean | Partial<TextDropShadow>

Set a drop shadow for the text

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

A canvas fillstyle that will be used on the text e.g., 'red', '#00FF00'. Can be an array to create a gradient, e.g., ['#000000','#FFFFFF'] MDN

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

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 height of the line, a number that represents the vertical space that a letter uses.

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 canvas 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.

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

Determines whether newlines & spaces are collapsed or preserved "normal" (collapse, collapse), "pre" (preserve, preserve) | "pre-line" (preserve, collapse). It needs wordWrap to be set to true.

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