Class: HTMLTextStyle

Defined in: node_modules/pixi.js/lib/scene/text-html/HTMLTextStyle.d.ts:79

A TextStyle object rendered by the HTMLTextSystem.

Extends

• TextStyle

Constructors

Constructor

> new HTMLTextStyle(options?): HTMLTextStyle

Defined in: node_modules/pixi.js/lib/scene/text-html/HTMLTextStyle.d.ts:108

Parameters

options?

HTMLTextStyleOptions

Returns

HTMLTextStyle

Overrides

TextStyle.constructor

Properties

_fill

> _fill: ConvertedFillStyle

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:731

Internal

Inherited from

TextStyle._fill

_gradientBounds?

> optional _gradientBounds?: object

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:762

Internal

When set, gradient fills use these bounds instead of the text's own measured dimensions. Used by SplitText to make character gradients span the full text width.

height

> height: number

width

> width: number

Inherited from

TextStyle._gradientBounds

_gradientOffset?

> optional _gradientOffset?: object

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:771

Internal

When set, gradient fills are offset by this amount within the gradient bounds. Used by SplitText to position each character's gradient correctly.

x

> x: number

y

> y: number

Inherited from

TextStyle._gradientOffset

_stroke

> _stroke: ConvertedStrokeStyle

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:734

Internal

Inherited from

TextStyle._stroke

_tagStyles

> _tagStyles: Record<string, HTMLTextStyleOptions>

Defined in: node_modules/pixi.js/lib/scene/text-html/HTMLTextStyle.d.ts:107

Custom styles to apply to specific HTML tags. Allows for consistent styling of custom elements without CSS overrides.

Example

new HTMLText({
  text:'<red>Red</red>,<blue>Blue</blue>,<green>Green</green>',
  style:{
      fontFamily: 'DM Sans',
      fill: 'white',
      fontSize:100,
      tagStyles:{
          red:{
              fill:'red',
          },
          blue:{
              fill:'blue',
          },
          green:{
              fill:'green',
          }
      }
  }
);

Standard

Overrides

TextStyle._tagStyles

_tick

> _tick: number

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:717

Internal

Internal tick counter used to track updates and changes. This is incremented whenever the style is modified, allowing for efficient change detection.

Inherited from

TextStyle._tick

uid

> uid: number

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:711

Internal

Unique identifier for the TextStyle class. This is used to track instances and ensure uniqueness.

Inherited from

TextStyle.uid

defaultDropShadow

> static defaultDropShadow: TextDropShadow

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:705

Default drop shadow settings used when enabling drop shadows on text. These values are used as the base configuration when drop shadows are enabled without specific settings.

Example

// Customize default settings globally
TextStyle.defaultDropShadow.alpha = 0.5;    // 50% opacity for all shadows
TextStyle.defaultDropShadow.blur = 2;       // 2px blur for all shadows
TextStyle.defaultDropShadow.color = 'blue'; // Blue shadows by default

Inherited from

TextStyle.defaultDropShadow

defaultTextStyle

> static defaultTextStyle: TextStyleOptions

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:729

Default text style settings used when creating new text objects. These values serve as the base configuration and can be customized globally.

Example

// Customize default text style globally
TextStyle.defaultTextStyle.fontSize = 16;
TextStyle.defaultTextStyle.fill = 0x333333;
TextStyle.defaultTextStyle.fontFamily = ['Arial', 'Helvetica', 'sans-serif'];

Inherited from

TextStyle.defaultTextStyle

prefixed

> static prefixed: string | boolean

Defined in: node_modules/eventemitter3/index.d.ts:9

Inherited from

TextStyle.prefixed

Accessors

_fontString

Get Signature

> get _fontString(): string

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:942

Internal

Returns the CSS font string for this style, cached for performance.

Returns

string

CSS font string

Inherited from

TextStyle._fontString

align

Get Signature

> get align(): TextStyleAlign

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:780

Alignment for multiline text, does not affect single line text.

Returns

TextStyleAlign

Set Signature

> set align(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:781

Parameters

value

TextStyleAlign

Returns

void

Inherited from

TextStyle.align

breakWords

Get Signature

> get breakWords(): boolean

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:783

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

Returns

boolean

Set Signature

> set breakWords(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:784

Parameters

value

boolean

Returns

void

Inherited from

TextStyle.breakWords

cssOverrides

Get Signature

> get cssOverrides(): string[]

Defined in: node_modules/pixi.js/lib/scene/text-html/HTMLTextStyle.d.ts:137

Advanced

Returns

string[]

Set Signature

> set cssOverrides(value): void

Defined in: node_modules/pixi.js/lib/scene/text-html/HTMLTextStyle.d.ts:135

List of CSS style overrides to apply to the HTML text. These styles are added after the built-in styles and can override any default styling.

Advanced

Parameters

value

string | string[]

Returns

void

cssStyle

Get Signature

> get cssStyle(): string

Defined in: node_modules/pixi.js/lib/scene/text-html/HTMLTextStyle.d.ts:204

The CSS style string that will be applied to the HTML text.

Advanced

Returns

string

dropShadow

Get Signature

> get dropShadow(): TextDropShadow

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:786

Set a drop shadow for the text.

Returns

TextDropShadow

Set Signature

> set dropShadow(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:787

Parameters

value

boolean | TextDropShadow

Returns

void

Inherited from

TextStyle.dropShadow

fill

Set Signature

> set fill(value): void

Defined in: node_modules/pixi.js/lib/scene/text-html/HTMLTextStyle.d.ts:254

Sets the fill style for the text. HTML text only supports color fills (string or number values). Texture fills are not supported and will trigger a warning in debug mode.

Example

// Using hex colors
const text = new HTMLText({
    text: 'Colored Text',
    style: {
        fill: 0xff0000 // Red color
    }
});

// Using CSS color strings
text.style.fill = '#00ff00';     // Hex string (Green)
text.style.fill = 'blue';        // Named color
text.style.fill = 'rgb(255,0,0)' // RGB
text.style.fill = '#f0f';        // Short hex

// Invalid usage (will trigger warning in debug)
text.style.fill = {
    type: 'pattern',
    texture: Texture.from('pattern.png')
}; // Not supported, falls back to default

Throws

In debug mode when attempting to use unsupported fill types

See

TextStyle#fill For full fill options in canvas text

Standard

Parameters

value

FillInput

The fill color to use. Must be a string or number.

Returns

void

Overrides

TextStyle.fill

filters

Get Signature

> get filters(): readonly Filter[]

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:834

An optional filter or array of filters to apply to the text, allowing for advanced visual effects. These filters will be applied to the text as it is created, resulting in faster rendering for static text compared to applying the filter directly to the text object (which would be applied at run time).

Default

null

Returns

readonly Filter[]

Set Signature

> set filters(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:835

Parameters

value

Filter[]

Returns

void

Inherited from

TextStyle.filters

fontFamily

Get Signature

> get fontFamily(): string | string[]

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:789

The font family, can be a single font name, or a list of names where the first is the preferred font.

Returns

string | string[]

Set Signature

> set fontFamily(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:790

Parameters

value

string | string[]

Returns

void

Inherited from

TextStyle.fontFamily

fontSize

Get Signature

> get fontSize(): number

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:792

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

Returns

number

Set Signature

> set fontSize(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:793

Parameters

value

string | number

Returns

void

Inherited from

TextStyle.fontSize

fontStyle

Get Signature

> get fontStyle(): TextStyleFontStyle

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:798

The font style.

Returns

TextStyleFontStyle

Set Signature

> set fontStyle(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:799

Parameters

value

TextStyleFontStyle

Returns

void

Inherited from

TextStyle.fontStyle

fontVariant

Get Signature

> get fontVariant(): TextStyleFontVariant

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:804

The font variant.

Returns

TextStyleFontVariant

Set Signature

> set fontVariant(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:805

Parameters

value

TextStyleFontVariant

Returns

void

Inherited from

TextStyle.fontVariant

fontWeight

Get Signature

> get fontWeight(): TextStyleFontWeight

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:810

The font weight.

Returns

TextStyleFontWeight

Set Signature

> set fontWeight(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:811

Parameters

value

TextStyleFontWeight

Returns

void

Inherited from

TextStyle.fontWeight

leading

Get Signature

> get leading(): number

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:813

The space between lines.

Returns

number

Set Signature

> set leading(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:814

Parameters

value

number

Returns

void

Inherited from

TextStyle.leading

letterSpacing

Get Signature

> get letterSpacing(): number

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:816

The amount of spacing between letters, default is 0.

Returns

number

Set Signature

> set letterSpacing(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:817

Parameters

value

number

Returns

void

Inherited from

TextStyle.letterSpacing

lineHeight

Get Signature

> get lineHeight(): number

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:819

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

Returns

number

Set Signature

> set lineHeight(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:820

Parameters

value

number

Returns

void

Inherited from

TextStyle.lineHeight

padding

Get Signature

> get padding(): number

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:826

Occasionally some fonts are cropped. Adding some padding will prevent this from happening by adding padding to all sides of the text. > [!NOTE] This will NOT affect the positioning or bounds of the text.

Returns

number

Set Signature

> set padding(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:827

Parameters

value

number

Returns

void

Inherited from

TextStyle.padding

stroke

Set Signature

> set stroke(value): void

Defined in: node_modules/pixi.js/lib/scene/text-html/HTMLTextStyle.d.ts:296

Sets the stroke style for the text. HTML text only supports color strokes (string or number values). Texture strokes are not supported and will trigger a warning in debug mode.

Example

// Using hex colors
const text = new HTMLText({
    text: 'Outlined Text',
    style: {
        stroke: 0xff0000 // Red outline
    }
});

// Using CSS color strings
text.style.stroke = '#00ff00';     // Hex string (Green)
text.style.stroke = 'blue';        // Named color
text.style.stroke = 'rgb(255,0,0)' // RGB
text.style.stroke = '#f0f';        // Short hex

// Using stroke width
text.style = {
    stroke: {
        color: '#ff0000',
        width: 2
    }
};

// Remove stroke
text.style.stroke = null;

// Invalid usage (will trigger warning in debug)
text.style.stroke = {
    type: 'pattern',
    texture: Texture.from('pattern.png')
}; // Not supported, falls back to default

Throws

In debug mode when attempting to use unsupported stroke types

See

TextStyle#stroke For full stroke options in canvas text

Standard

Parameters

value

StrokeInput

The stroke style to use. Must be a string, number, or stroke configuration object

Returns

void

Overrides

TextStyle.stroke

styleKey

Get Signature

> get styleKey(): string

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:936

Returns a unique key for this instance. This key is used for caching.

Returns

string

Unique key for the instance

Inherited from

TextStyle.styleKey

tagStyles

Get Signature

> get tagStyles(): Record<string, HTMLTextStyleOptions> | undefined

Defined in: node_modules/pixi.js/lib/scene/text-html/HTMLTextStyle.d.ts:127

Custom styles to apply to specific HTML tags. Allows for consistent styling of custom elements without CSS overrides.

Example

const text = new HTMLText({
    text: '<red>Red</red>, <blue>Blue</blue>, <green>Green</green>',
    style: {
        tagStyles: {
            red: { fill: 'red' },
            blue: { fill: 'blue' },
            green: { fill: 'green' },
        }
    }
});

Standard

Returns

Record<string, HTMLTextStyleOptions> | undefined

Set Signature

> set tagStyles(value): void

Defined in: node_modules/pixi.js/lib/scene/text-html/HTMLTextStyle.d.ts:129

Standard

Parameters

value

Record<string, HTMLTextStyleOptions> | undefined

Returns

void

Overrides

TextStyle.tagStyles

textBaseline

Get Signature

> get textBaseline(): TextStyleTextBaseline

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:848

The baseline of the text that is rendered.

Returns

TextStyleTextBaseline

Set Signature

> set textBaseline(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:849

Parameters

value

TextStyleTextBaseline

Returns

void

Inherited from

TextStyle.textBaseline

trim

Get Signature

> get trim(): boolean

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:842

Trim transparent borders from the text texture. > [!IMPORTANT] PERFORMANCE WARNING: > This is a costly operation as it requires scanning pixel alpha values. > Avoid using trim: true for dynamic text, as it could significantly impact performance.

Returns

boolean

Set Signature

> set trim(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:843

Parameters

value

boolean

Returns

void

Inherited from

TextStyle.trim

whiteSpace

Get Signature

> get whiteSpace(): TextStyleWhiteSpace

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:861

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

Returns

TextStyleWhiteSpace

Set Signature

> set whiteSpace(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:862

Parameters

value

TextStyleWhiteSpace

Returns

void

Inherited from

TextStyle.whiteSpace

wordWrap

Get Signature

> get wordWrap(): boolean

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:864

Indicates if word wrap should be used.

Returns

boolean

Set Signature

> set wordWrap(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:865

Parameters

value

boolean

Returns

void

Inherited from

TextStyle.wordWrap

wordWrapWidth

Get Signature

> get wordWrapWidth(): number

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:867

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

Returns

number

Set Signature

> set wordWrapWidth(value): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:868

Parameters

value

number

Returns

void

Inherited from

TextStyle.wordWrapWidth

Methods

_getFinalPadding()

> _getFinalPadding(): number

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:970

Internal

Returns the final padding for the text style, taking into account any filters applied. Used internally for correct measurements

Returns

number

The final padding for the text style.

Inherited from

TextStyle._getFinalPadding

_toObject()

> protected _toObject(): Required<TextStyleOptions>

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:958

Returns an object with the same values as this TextStyle instance.

Returns

Required<TextStyleOptions>

Object with the same values as this TextStyle instance

Example

const style = new TextStyle({
    fontSize: 24,
    fill: 0xff0000,
    stroke: { color: 0x0000ff, width: 2 }
});
const object = style.toObject();
console.log(object);
// { fontSize: 24, fill: 0xff0000, stroke: { color: 0x0000ff, width: 2 } }

Inherited from

TextStyle._toObject

addListener()

> addListener<T>(event, fn, context?): this

Defined in: node_modules/eventemitter3/index.d.ts:45

Type Parameters

T

T extends "update"

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

TextStyle.addListener

addOverride()

> addOverride(...value): void

Defined in: node_modules/pixi.js/lib/scene/text-html/HTMLTextStyle.d.ts:215

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.

Parameters

value

...string[]

CSS style(s) to add.

Returns

void

Example

style.addOverride('background-color: red');

Advanced

assign()

> assign(values): this

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:930

Assigns partial style options to this TextStyle instance. Uses public setters to ensure proper value transformation.

Parameters

values

Partial<TextStyleOptions>

Partial style options to assign

Returns

this

This TextStyle instance for chaining

Inherited from

TextStyle.assign

clone()

> clone(): HTMLTextStyle

Defined in: node_modules/pixi.js/lib/scene/text-html/HTMLTextStyle.d.ts:199

Creates a new HTMLTextStyle object with the same values as this one. This creates a deep copy of all style properties, including dropShadow and tag styles.

Returns

HTMLTextStyle

A new HTMLTextStyle instance with the same properties

Example

// Create original style
const originalStyle = new HTMLTextStyle({
    fontSize: 24,
    fill: '#ff0000',
    tagStyles: {
        header: { fontSize: 32, fill: '#00ff00' }
    }
});

// Clone the style
const clonedStyle = originalStyle.clone();

// Modify cloned style independently
clonedStyle.fontSize = 36;
clonedStyle.fill = '#0000ff';

// Original style remains unchanged
console.log(originalStyle.fontSize); // Still 24
console.log(originalStyle.fill); // Still '#ff0000'

Properties that are cloned:

• Basic text properties (fontSize, fontFamily, etc.)
• Fill and stroke styles
• Drop shadow configuration
• CSS overrides
• Tag styles (deep copied)
• Word wrap settings
• Alignment and spacing

See

• HTMLTextStyle For available style properties
• HTMLTextStyle#cssOverrides For CSS override handling
• HTMLTextStyle#tagStyles For tag style configuration

Standard

Overrides

TextStyle.clone

destroy()

> destroy(options?): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:980

Destroys this text style.

Parameters

options?

TypeOrBool<TextureDestroyOptions>

Options parameter. A boolean will act as if all options have been set to that value

Returns

void

Example

// Destroy the text style and its textures
textStyle.destroy({ texture: true, textureSource: true });
textStyle.destroy(true);

Inherited from

TextStyle.destroy

emit()

> emit<T>(event, ...args): boolean

Defined in: node_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

Type Parameters

T

T extends "update"

Parameters

event

T

args

...ArgumentMap<{ update: TextDropShadow; }>[Extract<T, "update">]

Returns

boolean

Inherited from

TextStyle.emit

eventNames()

> eventNames(): "update"[]

Defined in: node_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered listeners.

Returns

"update"[]

Inherited from

TextStyle.eventNames

listenerCount()

> listenerCount(event): number

Defined in: node_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

Parameters

event

"update"

Returns

number

Inherited from

TextStyle.listenerCount

listeners()

> listeners<T>(event): (...args) => void[]

Defined in: node_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

Type Parameters

T

T extends "update"

Parameters

event

T

Returns

(...args) => void[]

Inherited from

TextStyle.listeners

off()

> off<T>(event, fn?, context?, once?): this

Defined in: node_modules/eventemitter3/index.d.ts:69

Type Parameters

T

T extends "update"

Parameters

event

T

fn?

(...args) => void

context?

any

once?

boolean

Returns

this

Inherited from

TextStyle.off

on()

> on<T>(event, fn, context?): this

Defined in: node_modules/eventemitter3/index.d.ts:40

Add a listener for a given event.

Type Parameters

T

T extends "update"

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

TextStyle.on

once()

> once<T>(event, fn, context?): this

Defined in: node_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

Type Parameters

T

T extends "update"

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

TextStyle.once

removeAllListeners()

> removeAllListeners(event?): this

Defined in: node_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

Parameters

event?

"update"

Returns

this

Inherited from

TextStyle.removeAllListeners

removeListener()

> removeListener<T>(event, fn?, context?, once?): this

Defined in: node_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

Type Parameters

T

T extends "update"

Parameters

event

T

fn?

(...args) => void

context?

any

once?

boolean

Returns

this

Inherited from

TextStyle.removeListener

removeOverride()

> removeOverride(...value): void

Defined in: node_modules/pixi.js/lib/scene/text-html/HTMLTextStyle.d.ts:223

Remove any overrides that match the value.

Parameters

value

...string[]

CSS style to remove.

Returns

void

Example

style.removeOverride('background-color: red');

Advanced

reset()

> reset(): void

Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:923

Resets all properties to the default values

Returns

void

Inherited from

TextStyle.reset

update()

> update(): void

Defined in: node_modules/pixi.js/lib/scene/text-html/HTMLTextStyle.d.ts:158

Updates the text style and triggers a refresh of the CSS style cache. This method is called automatically when style properties are changed.

Returns

void

Example

// Update after multiple changes
const text = new HTMLText({
    text: 'Hello World',
    style
});

style.fontSize = 32;
style.fill = '#00ff00';
style.fontFamily = 'Arial';
style.update(); // Apply all changes at once

Advanced

See

• HTMLTextStyle#cssStyle For accessing the generated CSS
• HTMLTextStyle#cssOverrides For managing CSS overrides

Overrides

TextStyle.update