pixi.js
    Preparing search index...

    Interface TextStyleOptions

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

    // 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'
    });

    TextStyle For the main style class

    interface TextStyleOptions {
        align?: TextStyleAlign;
        breakWords?: boolean;
        dropShadow?: boolean | Partial<TextDropShadow>;
        fill?: FillInput;
        filters?: Filter[];
        fontFamily?: string | string[];
        fontSize?: string | number;
        fontStyle?: TextStyleFontStyle;
        fontVariant?: TextStyleFontVariant;
        fontWeight?: TextStyleFontWeight;
        leading?: number;
        letterSpacing?: number;
        lineHeight?: number;
        padding?: number;
        stroke?: StrokeInput;
        textBaseline?: TextStyleTextBaseline;
        trim?: boolean;
        whiteSpace?: TextStyleWhiteSpace;
        wordWrap?: boolean;
        wordWrapWidth?: number;
    }
    Index

    Properties

    align? breakWords? dropShadow? fill? filters? fontFamily? fontSize? fontStyle? fontVariant? fontWeight? leading? letterSpacing? lineHeight? padding? stroke? textBaseline? trim? 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
    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'
    filters?: Filter[]

    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).

    undefined
    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'
    leading?: number

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

    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
    textBaseline?: TextStyleTextBaseline

    Vertical alignment baseline.

    'alphabetic'
    trim?: boolean

    Whether to trim transparent edges.

    Note

    This is an expensive operation and should only be used when necessary.

    false
    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