Class: TextStyle

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

new Tiny.TextStyle(style)

tiny/core/text/TextStyle.js, line 53

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

alignstring

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

breakWordsboolean

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

dropShadowboolean

Set a drop shadow for the text

dropShadowAlphanumber

Set alpha for the drop shadow

Version:

1.2.0

dropShadowAnglenumber

Set a angle of the drop shadow

dropShadowBlurnumber

Set a shadow blur radius

dropShadowColorstring number

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

dropShadowDistancenumber

Set a distance of the drop shadow

fillstring 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

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

fillGradientTypenumber

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

fontFamilystring Array.<string>

The font family

fontSizenumber string

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

fontStylestring

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

fontVariantstring

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

fontWeightstring

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

leadingnumber

The space between lines

Version:

1.2.0

letterSpacingnumber

The amount of spacing between letters, default is 0

lineHeightnumber

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

lineJoinstring

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

miterLimitnumber

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

paddingnumber

Occasionally some fonts are cropped. Adding some padding will prevent this from happening by adding padding to all sides of the text.

strokestring number

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

strokeThicknessnumber

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

textBaselinestring

The baseline of the text that is rendered.

trimboolean

Trim transparent borders

whiteSpacestring

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

Version:

1.2.0

wordWrapboolean

Indicates if word wrap should be used

wordWrapWidthnumber

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

Methods

clone() ❯ {Tiny.TextStyle} tiny/core/text/TextStyle.js, line 100

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
Tiny.TextStyle	New cloned TextStyle object

reset() tiny/core/text/TextStyle.js, line 111

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

toFontString() ❯ {string} tiny/core/text/TextStyle.js, line 575

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

Returns:

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