Class: TextStyle

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

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

new PIXI.TextStyle (style)

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 | number | Array | 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'] https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|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 <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 <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

Implements

  • ITextStyle

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 | number | Array | 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'] https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN

fillGradientStops Array

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

fontFamily string | Array

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

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 () void

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

toFontString () string

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

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