pixi.js
    Preparing search index...

    Interface HTMLTextStyleOptions

    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.

    // 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'
                }
            }
        }
    });
    interface HTMLTextStyleOptions {
        align?: TextStyleAlign;
        breakWords?: boolean;
        cssOverrides?: string[];
        dropShadow?: boolean | Partial<TextDropShadow>;
        fill?: FillInput;
        fontFamily?: string | string[];
        fontSize?: string | number;
        fontStyle?: TextStyleFontStyle;
        fontVariant?: TextStyleFontVariant;
        fontWeight?: TextStyleFontWeight;
        letterSpacing?: number;
        lineHeight?: number;
        padding?: number;
        stroke?: StrokeInput;
        tagStyles?: Record<string, HTMLTextStyleOptions>;
        whiteSpace?: TextStyleWhiteSpace;
        wordWrap?: boolean;
        wordWrapWidth?: number;
    }

    Hierarchy

    Index

    Properties

    align? breakWords? cssOverrides? dropShadow? fill? fontFamily? fontSize? fontStyle? fontVariant? fontWeight? letterSpacing? lineHeight? padding? stroke? tagStyles? whiteSpace? wordWrap? wordWrapWidth?

    Properties

    align?: TextStyleAlign

    Alignment for multiline text, does not affect single line text

    'left'
    breakWords?: boolean

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

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

    false
    cssOverrides?: string[]

    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.

    dropShadow?: boolean | Partial<TextDropShadow>

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

    null
    fill?: FillInput

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

    'black'
    fontFamily?: string | string[]

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

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

    'Arial'
    fontSize?: string | number

    Font size in pixels or as string.

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

    // 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
    fontStyle?: TextStyleFontStyle

    Font style (normal, italic, oblique).

    'normal'
    fontVariant?: TextStyleFontVariant

    Font variant (normal, small-caps).

    'normal'
    fontWeight?: TextStyleFontWeight

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

    'normal'
    letterSpacing?: number

    The amount of spacing between letters, default is 0

    lineHeight?: number

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

    padding?: number

    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?: StrokeInput

    Stroke style for text outline.

    null
    tagStyles?: Record<string, HTMLTextStyleOptions>

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

    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',
                }
            }
        }
    });
    whiteSpace?: TextStyleWhiteSpace

    How to handle whitespace.

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

    'pre'
    wordWrap?: boolean

    Indicates if word wrap should be used

    wordWrapWidth?: number

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

    Settings

    Member Visibility

    On This Page

    Properties