PixiJS

Class: TextStyle

PIXI.TextStyle

A TextStyle Object decorates a Text Object. It can be shared between multiple Text objects. Changing the style will update all text objects using it. It can be generated here.

new PIXI.TextStyle (style)

TextStyle.js:58
Name Type Description
style object optional

The style parameters

Name Type Default Description
align string 'left' optional

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

Indicates if lines can be wrapped within words, it needs wordWrap to be set to true
dropShadow boolean false optional

Set a drop shadow for the text
dropShadowAlpha number 1 optional

Set alpha for the drop shadow
dropShadowAngle number Math.PI/6 optional

Set a angle of the drop shadow
dropShadowBlur number 0 optional

Set a shadow blur radius
dropShadowColor string | number 'black' optional

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

Set a distance of the drop shadow
fill string | Array.<string> | number | Array.<number> | CanvasGradient | CanvasPattern 'black' optional

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
fillGradientType number PIXI.TEXT_GRADIENT.LINEAR_VERTICAL optional

If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. See PIXI.TEXT_GRADIENT
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.
fontFamily string | Array.<string> 'Arial' optional

The font family
fontSize number | string 26 optional

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

The font style ('normal', 'italic' or 'oblique')
fontVariant string 'normal' optional

The font variant ('normal' or 'small-caps')
fontWeight string 'normal' optional

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

The space between lines
letterSpacing number 0 optional

The amount of spacing between letters, default is 0
lineHeight number optional

The line height, a number that represents the vertical space that a letter uses
lineJoin string 'miter' optional

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).
miterLimit number 10 optional

The miter limit to use when using the 'miter' lineJoin mode. This can reduce or increase the spikiness of rendered text.
padding number 0 optional

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 'black' optional

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

A number that represents the thickness of the stroke. Default is 0 (no stroke)
trim boolean false optional

Trim transparent borders
textBaseline string 'alphabetic' optional

The baseline of the text that is rendered.
whiteSpace boolean 'pre' optional

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 false optional

Indicates if word wrap should be used
wordWrapWidth number 100 optional

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

Members

align string

Alignment for multiline text ('left', 'center' or 'right'), 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

Set a drop shadow for the text

dropShadowAlpha number

Set alpha for the drop shadow

dropShadowAngle number

Set a angle of the drop shadow

dropShadowBlur number

Set a shadow blur radius

dropShadowColor string | number

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

dropShadowDistance number

Set a distance of the drop shadow

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 Array.<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 number

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

font Deprecated : since version 4.0.0

Set all properties of a font as a single string

fontFamily string | Array.<string>

The font family

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 string

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

fontVariant string

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

fontWeight string

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

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

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 number

The miter limit to use when using the 'miter' lineJoin mode This can reduce or increase the spikiness of rendered text.

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

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

strokeThickness number

A number that represents the thickness of the stroke. Default is 0 (no stroke)

textBaseline string

The baseline of the text that is rendered.

trim boolean

Trim transparent borders

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 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 ()PIXI.TextStyle

TextStyle.js:123

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.js:135

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

toFontString ()string

TextStyle.js:690

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

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