Interface: HTMLTextStyleOptions

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

Options for HTML text style, extends standard text styling with HTML-specific capabilities. Omits certain base text properties that don't apply to HTML rendering.

Example

// Basic HTML text style
const text = new HTMLText({
    text: '<p>Hello World</p>',
    style: {
        fontSize: 24,
        fill: '#ff0000',
        fontFamily: 'Arial',
        align: 'center'
    }
});

// Custom tag styling
const taggedText = new HTMLText({
    text: '<custom>Custom Tag</custom>',
    style: {
        fontSize: 16,
        tagStyles: {
            custom: {
                fontSize: 32,
                fill: '#00ff00',
                fontStyle: 'italic'
            }
        }
    }
});

Standard

Extends

• Omit<TextStyleOptions, "leading" | "textBaseline" | "trim" | "filters">

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'

Inherited from

TextStyleOptions.align

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

Inherited from

TextStyleOptions.breakWords

cssOverrides?

> optional cssOverrides?: string[]

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

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

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

Inherited from

TextStyleOptions.dropShadow

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'

Inherited from

TextStyleOptions.fill

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'

Inherited from

TextStyleOptions.fontFamily

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

#### Inherited from

[`TextStyleOptions`](/jsdoc/pixi-vn/pixi-js/interfaces/TextStyleOptions).[`fontSize`](/jsdoc/pixi-vn/pixi-js/interfaces/TextStyleOptions#fontsize)

***

### 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'

Inherited from

TextStyleOptions.fontStyle

fontVariant?

optional fontVariant?: TextStyleFontVariant

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

Font variant (normal, small-caps).

Default

'normal'

Inherited from

TextStyleOptions.fontVariant

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'

Inherited from

TextStyleOptions.fontWeight

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

Inherited from

TextStyleOptions.letterSpacing

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

Inherited from

TextStyleOptions.lineHeight

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.

Inherited from

TextStyleOptions.padding

stroke?

optional stroke?: StrokeInput

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

Stroke style for text outline.

Default

null

Inherited from

TextStyleOptions.stroke

tagStyles?

optional tagStyles?: Record<string, HTMLTextStyleOptions>

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

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>Main Title</red>
        <grey>The subtitle</grey>
        <blue>Regular content text</blue>
    `,
    style: {
        tagStyles: {
            red: {
                fill: '#ff0000',
            },
            grey: {
                fill: '#666666',
            },
            blue: {
                fill: 'blue',
            }
        }
    }
});

Standard

Overrides

TextStyleOptions.tagStyles

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'

Inherited from

TextStyleOptions.whiteSpace

wordWrap?

> optional wordWrap?: boolean

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

Indicates if word wrap should be used

Inherited from

TextStyleOptions.wordWrap

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

Inherited from

TextStyleOptions.wordWrapWidth