new PIXI.HTMLTextStyle (style) overrides
| Name | Type | Attributes | Description |
|---|---|---|---|
style |
PIXI.ITextStyle | PIXI.IHTMLTextStyle |
<optional> |
Style to copy. |
- Since:
- 7.2.0
Extends
Members
PIXI.HTMLTextStyle.availableFonts Record<string, PIXI.IHTMLFont> static
The collection of installed fonts
PIXI.HTMLTextStyle.defaultOptions PIXI.IHTMLTextStyle staticreadonly
List of default options, these are largely the same as TextStyle, with the exception of whiteSpace, which is set to 'normal' by default.
Properties:
| Name | Type | Default | Description |
|---|---|---|---|
align |
string | "left" |
Align |
breakWords |
boolean | false |
Break words |
dropShadow |
boolean | false |
Drop shadow |
dropShadowAlpha |
number | 1 |
Drop shadow alpha |
dropShadowAngle |
number | Math.PI / 6 |
Drop shadow angle |
dropShadowBlur |
number | 0 |
Drop shadow blur |
dropShadowColor |
string | "black" |
Drop shadow color |
dropShadowDistance |
number | 5 |
Drop shadow distance |
fill |
string | "black" |
Fill |
fontFamily |
string | "Arial" |
Font family |
fontSize |
number | 26 |
Font size |
fontStyle |
string | "normal" |
Font style |
fontVariant |
string | "normal" |
Font variant |
fontWeight |
string | "normal" |
Font weight |
letterSpacing |
number | 0 |
Letter spacing |
lineHeight |
number | 0 |
Line height |
padding |
number | 0 |
Padding |
stroke |
string | "black" |
Stroke |
strokeThickness |
number | 0 |
Stroke thickness |
whiteSpace |
string | "normal" |
White space |
wordWrap |
boolean | false |
Word wrap |
wordWrapWidth |
number | 100 |
Word wrap width |
Internal stylesheet contents, useful for creating rules for rendering
Methods
PIXI.HTMLTextStyle.from (originalStyle) PIXI.HTMLTextStyle static
Convert a TextStyle to HTMLTextStyle
| Name | Type | Description |
|---|---|---|
originalStyle |
PIXI.TextStyle | PIXI.IHTMLTextStyle<Partial> |
Returns:
| Type | Description |
|---|---|
| PIXI.HTMLTextStyle |
Example
import {TextStyle } from 'pixi.js';
import {HTMLTextStyle} from '@pixi/text-html';
const style = new TextStyle();
const htmlStyle = HTMLTextStyle.from(style);Add a style override, this can be any CSS property
it will override any built-in style. This is the
property and the value as a string (e.g., color: red).
This will override any other internal style.
| Name | Type | Description |
|---|---|---|
value |
string |
CSS style(s) to add. |
Example
style.addOverride('background-color: red');Clear the current font
Because of how HTMLText renders, fonts need to be imported
| Name | Type | Description |
|---|---|---|
url |
string | |
options |
Partial<IHTMLTextFontOptions> |
Returns:
| Type | Description |
|---|---|
| Promise<void> |
Remove any overrides that match the value.
| Name | Type | Description |
|---|---|---|
value |
string |
CSS style to remove. |
Example
style.removeOverride('background-color: red');reset () void overrides
Resets all properties to the defaults specified in TextStyle.prototype._default
Internally converts all of the style properties into CSS equivalents.
| Name | Type | Description |
|---|---|---|
scale |
number |
Returns:
| Type | Description |
|---|---|
| string | The CSS style string, for setting style property of root HTMLElement. |
Get the font CSS styles from the loaded font, If available.
Returns:
| Type | Description |
|---|---|
| string |
Inherited Properties
From class PIXI.TextStyle
align 'left' | 'center' | 'right' | 'justify' inherited
Alignment for multiline text, does not affect single line text.
breakWords boolean inherited
Indicates if lines can be wrapped within words, it needs wordWrap to be set to true.
dropShadow boolean inherited
Set a drop shadow for the text.
dropShadowAlpha number inherited
Set alpha for the drop shadow.
dropShadowAngle number inherited
Set a angle of the drop shadow.
dropShadowBlur number inherited
Set a shadow blur radius.
dropShadowColor number | string inherited
A fill style to be used on the dropshadow e.g., 'red', '#00FF00'.
dropShadowDistance number inherited
Set a distance of the drop shadow.
fill string | Array<string> | number | Array<number> | CanvasGradient | CanvasPattern inherited
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
fillGradientStops number[] inherited
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 PIXI.TEXT_GRADIENT inherited
If fill is an array of colours to create a gradient, this can change the type/direction of the gradient.
fontFamily string | string[] inherited
The font family, can be a single font name, or a list of names where the first is the preferred font.
fontSize number | string inherited
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' inherited
The font style.
fontVariant 'normal' | 'small-caps' inherited
The font variant.
fontWeight 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' inherited
The font weight.
leading number inherited
The space between lines.
letterSpacing number inherited
The amount of spacing between letters, default is 0.
lineHeight number inherited
The line height, a number that represents the vertical space that a letter uses.
lineJoin 'miter' | 'round' | 'bevel' inherited
The lineJoin property sets the type of corner created, it can resolve spiked text issues. Default is 'miter' (creates a sharp corner).
miterLimit number inherited
The miter limit to use when using the 'miter' lineJoin mode.
This can reduce or increase the spikiness of rendered text.
padding number inherited
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 inherited
A canvas fillstyle that will be used on the text stroke, e.g., 'blue', '#FCFF00'
strokeThickness number inherited
A number that represents the thickness of the stroke.
- Default Value:
- 0
textBaseline 'alphabetic' | 'top' | 'hanging' | 'middle' | 'ideographic' | 'bottom' inherited
The baseline of the text that is rendered.
trim boolean inherited
Trim transparent borders.
whiteSpace 'normal' | 'pre' | 'pre-line' inherited
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 inherited
Indicates if word wrap should be used.
wordWrapWidth number inherited
The width at which text will wrap, it needs wordWrap to be set to true.
Inherited Methods
From class PIXI.TextStyle
clone () PIXI.TextStyle inherited
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 |
toFontString () string inherited
Generates a font style string to use for TextMetrics.measureFont().
Returns:
| Type | Description |
|---|---|
| string | Font style string, for passing to TextMetrics.measureFont() |