Class TextMetrics

The TextMetrics object represents the measurement of a block of text with a specified style.

Example

import { TextMetrics, TextStyle } from 'pixi.js';

const style = new TextStyle({
    fontFamily: 'Arial',
    fontSize: 24,
    fill: 0xff1010,
    align: 'center',
});
const textMetrics = TextMetrics.measureText('Your text', style);

Memberof

PIXI

Constructors

constructor

Properties

fontProperties height lineHeight lineWidths lines maxLineWidth style text width BASELINE_MULTIPLIER BASELINE_SYMBOL HEIGHT_MULTIPLIER METRICS_STRING _experimentalLetterSpacingSupported? experimentalLetterSpacing graphemeSegmenter

Accessors

experimentalLetterSpacingSupported

Methods

canBreakChars canBreakWords clearMetrics isBreakingSpace measureFont measureText wordWrapSplit

Constructors

constructor

  • new TextMetrics(text, style, width, height, lines, lineWidths, lineHeight, maxLineWidth, fontProperties): TextMetrics

  • Parameters

    • text: string

      the text that was measured

    • style: Pixi.TextStyle

      the style that was measured

    • width: number

      the measured width of the text

    • height: number

      the measured height of the text

    • lines: string[]

      an array of the lines of text broken by new lines and wrapping if specified in style

    • lineWidths: number[]

      an array of the line widths for each line matched to lines

    • lineHeight: number

      the measured line height for this style

    • maxLineWidth: number

      the maximum line width for all measured lines

    • fontProperties: IFontMetrics

      the font properties object from TextMetrics.measureFont

    Returns TextMetrics

Properties

fontProperties

fontProperties: IFontMetrics

The font properties object from TextMetrics.measureFont.

height

height: number

The measured height of the text.

lineHeight

lineHeight: number

The measured line height for this style.

lineWidths

lineWidths: number[]

An array of the line widths for each line matched to lines.

lines

lines: string[]

An array of lines of the text broken by new lines and wrapping is specified in style.

maxLineWidth

maxLineWidth: number

The maximum line width for all measured lines.

style

style: Pixi.TextStyle

The style that was measured.

text

text: string

The text that was measured.

width

width: number

The measured width of the text.

Static BASELINE_MULTIPLIER

BASELINE_MULTIPLIER: number

Baseline multiplier for calculate font metrics.

Static BASELINE_SYMBOL

BASELINE_SYMBOL: string

Baseline symbol for calculate font metrics.

Static HEIGHT_MULTIPLIER

HEIGHT_MULTIPLIER: number

Height multiplier for setting height of canvas to calculate font metrics.

Static METRICS_STRING

METRICS_STRING: string

String used for calculate font metrics. These characters are all tall to help calculate the height required for text.

Static Optional _experimentalLetterSpacingSupported

_experimentalLetterSpacingSupported?: boolean

Static experimentalLetterSpacing

experimentalLetterSpacing: boolean

New rendering behavior for letter-spacing which uses Chrome's new native API. This will lead to more accurate letter-spacing results because it does not try to manually draw each character. However, this Chrome API is experimental and may not serve all cases yet.

See

PIXI.TextMetrics.experimentalLetterSpacingSupported

Static graphemeSegmenter

graphemeSegmenter: ((s) => string[])

A Unicode "character", or "grapheme cluster", can be composed of multiple Unicode code points, such as letters with diacritical marks (e.g. '\u0065\u0301', letter e with acute) or emojis with modifiers (e.g. '\uD83E\uDDD1\u200D\uD83D\uDCBB', technologist). The new Intl.Segmenter API in ES2022 can split the string into grapheme clusters correctly. If it is not available, PixiJS will fallback to use the iterator of String, which can only spilt the string into code points. If you want to get full functionality in environments that don't support Intl.Segmenter (such as Firefox), you can use other libraries such as [grapheme-splitter]https://www.npmjs.com/package/grapheme-splitter or [graphemer]https://www.npmjs.com/package/graphemer to create a polyfill. Since these libraries can be relatively large in size to handle various Unicode grapheme clusters properly, PixiJS won't use them directly.

Type declaration

    • (s): string[]

    • Parameters

      • s: string

      Returns string[]

Accessors

Static experimentalLetterSpacingSupported

Methods

Static canBreakChars

  • canBreakChars(_char, _nextChar, _token, _index, _breakWords): boolean

  • Overridable helper method used internally by TextMetrics, exposed to allow customizing the class's behavior.

    It allows one to determine whether a pair of characters should be broken by newlines For example certain characters in CJK langs or numbers. It must return a boolean.

    Parameters

    • _char: string

      The character

    • _nextChar: string

      The next character

    • _token: string

      The token/word the characters are from

    • _index: number

      The index in the token of the char

    • _breakWords: boolean

      The style attr break words

    Returns boolean

    whether to break word or not

Static canBreakWords

  • canBreakWords(_token, breakWords): boolean

  • Overridable helper method used internally by TextMetrics, exposed to allow customizing the class's behavior.

    It allows one to customise which words should break Examples are if the token is CJK or numbers. It must return a boolean.

    Parameters

    • _token: string

      The token

    • breakWords: boolean

      The style attr break words

    Returns boolean

    Whether to break word or not

Static clearMetrics

  • clearMetrics(font?): void

  • Clear font metrics in metrics cache.

    Parameters

    • Optional font: string

      font name. If font name not set then clear cache for all fonts.

    Returns void

Static isBreakingSpace

  • isBreakingSpace(char, _nextChar?): boolean

  • Determines if char is a breaking whitespace.

    It allows one to determine whether char should be a breaking whitespace For example certain characters in CJK langs or numbers. It must return a boolean.

    Parameters

    • char: string

      The character

    • Optional _nextChar: string

      The next character

    Returns boolean

    True if whitespace, False otherwise.

Static measureFont

  • measureFont(font): IFontMetrics

  • Calculates the ascent, descent and fontSize of a given font-style

    Parameters

    • font: string

      String representing the style of the font

    Returns IFontMetrics

    Font properties object

Static measureText

  • measureText(text, style, wordWrap?, canvas?): TextMetrics

  • Measures the supplied string of text and returns a Rectangle.

    Parameters

    • text: string

      The text to measure.

    • style: Pixi.TextStyle

      The text style to use for measuring

    • Optional wordWrap: boolean

      Override for if word-wrap should be applied to the text.

    • Optional canvas: ICanvas

      optional specification of the canvas to use for measuring.

    Returns TextMetrics

    Measured width and height of the text.

Static wordWrapSplit

  • wordWrapSplit(token): string[]

  • Overridable helper method used internally by TextMetrics, exposed to allow customizing the class's behavior.

    It is called when a token (usually a word) has to be split into separate pieces in order to determine the point to break a word. It must return an array of characters.

    Parameters

    • token: string

      The token to split

    Returns string[]

    The characters of the token

    See

    TextMetrics.graphemeSegmenter

Settings

Member Visibility

Theme

On This Page

constructorfontPropertiesheightlineHeightlineWidthslinesmaxLineWidthstyletextwidthBASELINE_MULTIPLIERBASELINE_SYMBOLHEIGHT_MULTIPLIERMETRICS_STRING_experimentalLetterSpacingSupportedexperimentalLetterSpacinggraphemeSegmenterexperimentalLetterSpacingSupportedcanBreakCharscanBreakWordsclearMetricsisBreakingSpacemeasureFontmeasureTextwordWrapSplit

Generated using TypeDoc