PIXI.TextStyle

class TextStyle implements ITextStyle

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.

A tool can be used to generate a text style here.

Constructor

new PIXI.TextStyle(style: object) → {}

Parameters:
Name	Type	Attributes	Default	Description
style	object	<optional>		The style parameters
style.align	string	<optional>	'left'	Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
style.breakWords	boolean	<optional>	false	Indicates if lines can be wrapped within words, it needs wordWrap to be set to true
style.dropShadow	boolean	<optional>	false	Set a drop shadow for the text
style.dropShadowAlpha	number	<optional>	1	Set alpha for the drop shadow
style.dropShadowAngle	number	<optional>	Math.PI/6	Set a angle of the drop shadow
style.dropShadowBlur	number	<optional>	0	Set a shadow blur radius
style.dropShadowColor	string \| number	<optional>	'black'	A fill style to be used on the dropshadow e.g 'red', '#00FF00'
style.dropShadowDistance	number	<optional>	5	Set a distance of the drop shadow
style.fill	string \| Array<string> \| number \| Array<number> \| CanvasGradient \| CanvasPattern	<optional>	'black'	A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient eg ['#000000','#FFFFFF'] MDN
style.fillGradientType	number	<optional>	PIXI.TEXT_GRADIENT.LINEAR_VERTICAL	If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. See PIXI.TEXT_GRADIENT
style.fillGradientStops	Array<number>	<optional>		If fill is an array of colours to create a gradient, this array can set the stop points (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them.
style.fontFamily	string \| Array<string>	<optional>	'Arial'	The font family
style.fontSize	number \| string	<optional>	26	The font size (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em')
style.fontStyle	string	<optional>	'normal'	The font style ('normal', 'italic' or 'oblique')
style.fontVariant	string	<optional>	'normal'	The font variant ('normal' or 'small-caps')
style.fontWeight	string	<optional>	'normal'	The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', '800' or '900')
style.leading	number	<optional>	0	The space between lines
style.letterSpacing	number	<optional>	0	The amount of spacing between letters, default is 0
style.lineHeight	number	<optional>		The line height, a number that represents the vertical space that a letter uses
style.lineJoin	string	<optional>	'miter'	The lineJoin property sets the type of corner created, it can resolve spiked text issues. Possible values "miter" (creates a sharp corner), "round" (creates a round corner) or "bevel" (creates a squared corner).
style.miterLimit	number	<optional>	10	The miter limit to use when using the 'miter' lineJoin mode. This can reduce or increase the spikiness of rendered text.
style.padding	number	<optional>	0	Occasionally some fonts are cropped. Adding some padding will prevent this from happening by adding padding to all sides of the text.
style.stroke	string \| number	<optional>	'black'	A canvas fillstyle that will be used on the text stroke e.g 'blue', '#FCFF00'
style.strokeThickness	number	<optional>	0	A number that represents the thickness of the stroke. Default is 0 (no stroke)
style.trim	boolean	<optional>	false	Trim transparent borders
style.textBaseline	string	<optional>	'alphabetic'	The baseline of the text that is rendered.
style.whiteSpace	string	<optional>	'pre'	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
style.wordWrap	boolean	<optional>	false	Indicates if word wrap should be used
style.wordWrapWidth	number	<optional>	100	The width at which text will wrap, it needs wordWrap to be set to true

Summary

Properties from TextStyle

string	align Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
boolean	breakWords Indicates if lines can be wrapped within words, it needs wordWrap to be set to true.
boolean	dropShadow Set a drop shadow for the text.
number	dropShadowAlpha Set alpha for the drop shadow.
number	dropShadowAngle Set a angle of the drop shadow.
number	dropShadowBlur Set a shadow blur radius.
number \| string	dropShadowColor A fill style to be used on the dropshadow e.g 'red', '#00FF00'.
number	dropShadowDistance Set a distance of the drop shadow.
string \| Array<string> \| number \| Array<number> \| CanvasGradient \| CanvasPattern	fill A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'.
number[]	fillGradientStops
PIXI.TEXT_GRADIENT	fillGradientType If fill is an array of colours to create a gradient, this can change the type/direction of the gradient.
string \| string[]	fontFamily The font family.
number \| string	fontSize
string	fontStyle
string	fontVariant
string	fontWeight
number	leading The space between lines.
number	letterSpacing The amount of spacing between letters, default is 0.
number	lineHeight The line height, a number that represents the vertical space that a letter uses.
string	lineJoin
number	miterLimit The miter limit to use when using the 'miter' lineJoin mode.
number	padding
string \| number	stroke
number	strokeThickness = 0 A number that represents the thickness of the stroke.
string	textBaseline The baseline of the text that is rendered.
boolean	trim Trim transparent borders.
string	whiteSpace
boolean	wordWrap Indicates if word wrap should be used.
number	wordWrapWidth The width at which text will wrap, it needs wordWrap to be set to true.

Methods from TextStyle

PIXI.TextStyle

clone()

void

reset()

Resets all properties to the defaults specified in TextStyle.prototype._default

string

toFontString()

Generates a font style string to use for TextMetrics.measureFont().

Public Properties

align TextStyle.ts:210

align: string

Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text

breakWords TextStyle.ts:228

breakWords: boolean

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

dropShadow TextStyle.ts:242

dropShadow: boolean

Set a drop shadow for the text.

dropShadowAlpha TextStyle.ts:256

dropShadowAlpha: number

Set alpha for the drop shadow.

dropShadowAngle TextStyle.ts:270

dropShadowAngle: number

Set a angle of the drop shadow.

dropShadowBlur TextStyle.ts:284

dropShadowBlur: number

Set a shadow blur radius.

dropShadowColor TextStyle.ts:298

dropShadowColor: number | string

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

dropShadowDistance TextStyle.ts:313

dropShadowDistance: number

Set a distance of the drop shadow.

fill TextStyle.ts:327

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 eg ['#000000','#FFFFFF'] MDN

fillGradientStops TextStyle.ts:372

fillGradientStops: number[]

If fill is an array of colours to create a gradient, this array can set the stop points (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them.

fillGradientType TextStyle.ts:354

fillGradientType: PIXI.TEXT_GRADIENT

If fill is an array of colours to create a gradient, this can change the type/direction of the gradient.

See: PIXI.TEXT_GRADIENT

fontFamily TextStyle.ts:389

fontFamily: string | string[]

The font family.

fontSize TextStyle.ts:403

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 TextStyle.ts:420

fontStyle: string

The font style ('normal', 'italic' or 'oblique')

fontVariant TextStyle.ts:439

fontVariant: string

The font variant ('normal' or 'small-caps')

fontWeight TextStyle.ts:458

fontWeight: string

The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900')

leading TextStyle.ts:505

leading: number

The space between lines.

letterSpacing TextStyle.ts:477

letterSpacing: number

The amount of spacing between letters, default is 0.

lineHeight TextStyle.ts:491

lineHeight: number

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

lineJoin TextStyle.ts:519

lineJoin: string

The lineJoin property sets the type of corner created, it can resolve spiked text issues. Default is 'miter' (creates a sharp corner).

miterLimit TextStyle.ts:538

miterLimit: number

The miter limit to use when using the 'miter' lineJoin mode.

This can reduce or increase the spikiness of rendered text.

padding TextStyle.ts:556

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 TextStyle.ts:573

stroke: string | number

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

strokeThickness TextStyle.ts:594

strokeThickness: number = 0

A number that represents the thickness of the stroke.

textBaseline TextStyle.ts:612

textBaseline: string

The baseline of the text that is rendered.

trim TextStyle.ts:630

trim: boolean

Trim transparent borders.

whiteSpace TextStyle.ts:644

whiteSpace: string

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 TextStyle.ts:669

wordWrap: boolean

Indicates if word wrap should be used.

wordWrapWidth TextStyle.ts:683

wordWrapWidth: number

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

Public Methods

clone TextStyle.ts:189

clone() → {PIXI.TextStyle}

Creates a new TextStyle object with the same values as this one. Note that the only the properties of the object are cloned.

Returns:
Type	Description
PIXI.TextStyle	New cloned TextStyle object

reset TextStyle.ts:204

reset() → {void}

Resets all properties to the defaults specified in TextStyle.prototype._default

Returns:
Type	Description
void

toFontString TextStyle.ts:697

toFontString() → {string}

Generates a font style string to use for TextMetrics.measureFont().

Returns:
Type	Description
string	Font style string, for passing to `TextMetrics.measureFont()`