Interface: TextStyleOptions

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

Constructor options used for TextStyle instances. Defines the visual appearance and layout of text.

Example

// Basic text style
const basicStyle = new TextStyle({
    fontSize: 24,
    fill: 'black',
    fontFamily: 'Arial'
});

// Rich text style with multiple features
const richStyle = new TextStyle({
    fontFamily: ['Arial', 'Helvetica', 'sans-serif'],
    fontSize: 36,
    fontWeight: 'bold',
    fill: 'red',
    stroke: { color: '#4a1850', width: 5 },
    align: 'center',
    dropShadow: {
        color: '#000000',
        blur: 4,
        distance: 6,
        angle: Math.PI / 6
    },
    wordWrap: true,
    wordWrapWidth: 440,
    lineHeight: 40,
    textBaseline: 'middle'
});

See

TextStyle For the main style class

Standard

Properties

align?

> optional align?: TextStyleAlign

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

Alignment for multiline text, does not affect single line text

Default

'left'

breakWords?

> optional breakWords?: boolean

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

Whether to allow line breaks within words. Requires wordWrap to be true.

Example

// Enable word breaking
const style = new TextStyle({
   breakWords: true,
   wordWrap: true,
   wordWrapWidth: 200
});

Default

false

dropShadow?

> optional dropShadow?: boolean | Partial<TextDropShadow>

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

Drop shadow configuration for the text. Can be boolean or a TextDropShadow object.

Default

null

fill?

> optional fill?: FillInput

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

Fill style for the text. Can be a color, gradient, or pattern.

Default

'black'

filters?

> optional filters?: readonly Filter[] | Filter[]

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

Array of filters to apply to the text.

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

undefined

fontFamily?

> optional fontFamily?: string | string[]

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

Font family or families to use. Can be single name or array of fallbacks.

Example

// Single font family
fontFamily: 'Arial'
// Multiple font families
fontFamily: ['Helvetica', 'Arial', 'sans-serif']

Default

'Arial'

fontSize?

> optional fontSize?: string | number

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

Font size in pixels or as string.

Equivalents are '26px','20pt','160%' or '1.6em')

Example

// Numeric size
fontSize: 26
// String size
fontSize: '26px'
// Percentage size
fontSize: '160%' // 1.6 times the parent element's font size
// Em size
fontSize: '1.6em' // 1.6 times the parent element's font size
@default 26

***

### fontStyle?

> `optional` **fontStyle?**: [`TextStyleFontStyle`](/jsdoc/pixi-vn/pixi-js/type-aliases/TextStyleFontStyle)

Defined in: node\_modules/pixi.js/lib/scene/text/TextStyle.d.ts:543

Font style (normal, italic, oblique).

#### Default

```ts
'normal'

fontVariant?

optional fontVariant?: TextStyleFontVariant

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

Font variant (normal, small-caps).

Default

'normal'

fontWeight?

optional fontWeight?: TextStyleFontWeight

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

Font weight (normal, bold, bolder, lighter, 100-900).

Default

'normal'

leading?

optional leading?: number

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

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

letterSpacing?

optional letterSpacing?: number

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

The amount of spacing between letters, default is 0

lineHeight?

optional lineHeight?: number

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

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

padding?

optional padding?: number

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

Padding around the text.

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

stroke?

optional stroke?: StrokeInput

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

Stroke style for text outline.

Default

null

tagStyles?

optional tagStyles?: Record<string, TextStyleOptions>

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

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 empty or undefined, < characters in text are treated as literal.

Nested tags are supported via a style stack - inner tags inherit from outer tags but can override specific properties.

Example

const text = new Text({
    text: '<red>Red</red>, <blue>Blue</blue>, <big>Big</big>',
    style: {
        fontFamily: 'Arial',
        fontSize: 24,
        fill: 'white',
        tagStyles: {
            red: { fill: 'red' },
            blue: { fill: 'blue' },
            big: { fontSize: 48 }
        }
    }
});

Default

undefined

textBaseline?

optional textBaseline?: TextStyleTextBaseline

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

Vertical alignment baseline.

Default

'alphabetic'

trim?

optional trim?: boolean

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

Whether to trim transparent edges.

[!NOTE] This is an expensive operation and should only be used when necessary.

Default

false

whiteSpace?

optional whiteSpace?: TextStyleWhiteSpace

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

How to handle whitespace.

It needs wordWrap to be set to true for this to have an effect.

Default

'pre'

wordWrap?

> optional wordWrap?: boolean

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

Indicates if word wrap should be used

wordWrapWidth?

> optional wordWrapWidth?: number

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

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