Pixi’VNClass: TextStyle
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:691
A TextStyle Object contains information to decorate Text objects. An instance can be shared between multiple Text objects; then changing the style will update all text objects using it.
Example
// Create a basic text style
const style = new TextStyle({
fontFamily: ['Helvetica', 'Arial', 'sans-serif'],
fontSize: 36,
fill: 0xff1010,
align: 'center'
});
// Create a rich text style with multiple features
const richStyle = new TextStyle({
fontFamily: 'Arial',
fontSize: 32,
fill: 'white',
stroke: {
color: '#4a1850',
width: 5
},
dropShadow: {
color: '#000000',
blur: 4,
distance: 6,
angle: Math.PI / 6
},
wordWrap: true,
wordWrapWidth: 440,
lineHeight: 40,
align: 'center'
});
// Share style between multiple text objects
const text1 = new Text({
text: 'Hello',
style: richStyle
});
const text2 = new Text({
text: 'World',
style: richStyle
});
// Update style dynamically - affects all text objects
richStyle.fontSize = 48;
richStyle.fill = 0x00ff00;
Key Features:
- Shared styling between multiple text objects
- Rich text formatting options
- Gradient and pattern fills
- Drop shadows and strokes
- Word wrapping and alignment
- Dynamic updates
Standard
Extends
EventEmitter<{update:TextDropShadow; }>
Extended by
Constructors
Constructor
> new TextStyle(style?): TextStyle
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:775
Parameters
style?
Partial<TextStyleOptions>
Returns
TextStyle
Overrides
Properties
_fill
> _fill: ConvertedFillStyle
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:731
Internal
_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
_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
_stroke
> _stroke: ConvertedStrokeStyle
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:734
Internal
_tagStyles
> _tagStyles: Record<string, TextStyleOptions> | undefined
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:756
Internal
_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.
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.
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
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'];
prefixed
> static prefixed: string | boolean
Defined in: node_modules/eventemitter3/index.d.ts:9
Inherited from
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
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
Set Signature
> set align(value): void
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:781
Parameters
value
Returns
void
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
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
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
fill
Get Signature
> get fill(): FillInput
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:894
The fill style that will be used to color the text. This can be:
- A color string like 'red', '#00FF00', or 'rgba(255,0,0,0.5)'
- A hex number like 0xff0000 for red
- A FillStyle object with properties like { color: 0xff0000, alpha: 0.5 }
- A FillGradient for gradient fills
- A FillPattern for pattern/texture fills
When using a FillGradient, vertical gradients (angle of 90 degrees) are applied per line of text, while gradients at any other angle are spread across the entire text body as a whole.
Example
// Vertical gradient applied per line
const verticalGradient = new FillGradient(0, 0, 0, 1)
.addColorStop(0, 0xff0000)
.addColorStop(1, 0x0000ff);
const text = new Text({
text: 'Line 1\nLine 2',
style: { fill: verticalGradient }
});
To manage the gradient in a global scope, set the textureSpace property of the FillGradient to 'global'.
Returns
Set Signature
> set fill(value): void
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:895
Parameters
value
Returns
void
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
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
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
fontStyle
Get Signature
> get fontStyle(): TextStyleFontStyle
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:798
The font style.
Returns
Set Signature
> set fontStyle(value): void
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:799
Parameters
value
Returns
void
fontVariant
Get Signature
> get fontVariant(): TextStyleFontVariant
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:804
The font variant.
Returns
Set Signature
> set fontVariant(value): void
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:805
Parameters
value
Returns
void
fontWeight
Get Signature
> get fontWeight(): TextStyleFontWeight
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:810
The font weight.
Returns
Set Signature
> set fontWeight(value): void
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:811
Parameters
value
Returns
void
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
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
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
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
stroke
Get Signature
> get stroke(): StrokeInput
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:897
A fillstyle that will be used on the text stroke, e.g., 'blue', '#FCFF00'.
Returns
Set Signature
> set stroke(value): void
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:898
Parameters
value
Returns
void
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
tagStyles
Get Signature
> get tagStyles(): Record<string, TextStyleOptions> | undefined
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:919
Custom styles to apply to specific tags within the text.
Allows for rich text formatting using simple tag markup like <red>text</red>.
Tags are only parsed when this property has entries. If tagStyles is undefined,
< characters in text are treated as literal.
Example
const text = new Text({
text: '<red>Red</red>, <blue>Blue</blue>',
style: {
fill: 'white',
tagStyles: {
red: { fill: 'red' },
blue: { fill: 'blue' }
}
}
});
Returns
Record<string, TextStyleOptions> | undefined
Set Signature
> set tagStyles(value): void
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:920
Parameters
value
Record<string, TextStyleOptions> | undefined
Returns
void
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
Set Signature
> set textBaseline(value): void
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:849
Parameters
value
Returns
void
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
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
Set Signature
> set whiteSpace(value): void
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:862
Parameters
value
Returns
void
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
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
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.
_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 } }
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
EventEmitter.addListener
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
clone()
> clone(): TextStyle
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:963
Creates a new TextStyle object with the same values as this one.
Returns
TextStyle
New cloned TextStyle object
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);
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
EventEmitter.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
EventEmitter.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
EventEmitter.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
EventEmitter.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
EventEmitter.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
EventEmitter.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
EventEmitter.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
EventEmitter.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
EventEmitter.removeListener
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
update()
> update(): void
Defined in: node_modules/pixi.js/lib/scene/text/TextStyle.d.ts:921
Returns
void