Namespace: text

Classes

AbstractBitmapFont

BitmapFont

BitmapFontManager

CanvasTextMetrics

HTMLTextStyle

TextStyle

Interface Definitions

BitmapFontData

The raw data of a bitmap font.

Properties:

Name	Type	Description
baseLineOffset	number	The offset of the font face from the baseline.
chars	Record<string, RawCharData>	The map of characters by character code.
distanceField	{    type: "sdf" | "msdf" | "none",    range: number }	The range and type of the distance field for this font.
fontFamily	string	The name of the font face.
fontSize	number	The size of the font face in pixels.
lineHeight	number	The line-height of the font face in pixels.
pages	{ id : number, file : string }[]	The map of base page textures (i.e., sheets of glyphs).

BitmapFontInstallOptions

The options for installing a new BitmapFont. Once installed the font will be available for use in the BitmapText. It can be accessed by the fontFamily property of the TextStyle.

Install a new BitmapFont will create the characters provided for the font and store them in the cache. But don't worry, if a character is requested that hasn't been generated yet, it will be created on the fly.

Properties:

Name	Type	Default	Description
chars	string | (string | string[])[]	BitmapFont.ALPHANUMERIC	Characters included in the font set. You can also use ranges. For example, [['a', 'z'], ['A', 'Z'], "!@#$%^&*()~{}[] "]. Don't forget to include spaces ' ' in your character set!
name	string		the name of the font, this will be the name you use in the fontFamily of text style to access this font
padding	number	4	Padding between glyphs on texture atlas. Lower values could mean more visual artifacts and bleeding from other glyphs, larger values increase the space required on the texture.
resolution	number	1	Render resolution for glyphs.
skipKerning	boolean	false	Skip generation of kerning information for the BitmapFont. If true, this could potentially increase the performance, but may impact the rendered text appearance.
style	TextStyle | TextStyleOptions		Style options to render with BitmapFont.

BitmapFontOptions

Options for creating a BitmapFont.

CharData

Properties:

Name	Type	Description
id	number	Unique id of character
kerning	Record<string, number>	The kerning values for this character.
texture	Texture	The texture of the character.
xAdvance	number	Advancement to apply to next character.
xOffset	number	x-offset to apply when rendering character
yOffset	number	y-offset to apply when rendering character.

HTMLTextStyleOptions

Options for HTML text style, extends TextStyle.

Properties:

Name	Type	Attributes	Description
cssOverrides	Array<string>	<optional>	CSS style(s) to add.
tagStyles	Record<string, HTMLTextStyleOptions>	<optional>	Tag styles.

RawCharData

The raw data of a character in a bitmap font.

Properties:

Name	Type	Description
height	number	The height of the character in the page.
letter	string	The letter of the character.
page	number	The page of the font texture that the character is on.
width	number	The width of the character in the page.
x	number	The x position of the character in the page.
y	number	The y position of the character in the page.

TextOptions

Options for the Text class.

Properties:

Name	Type	Description
anchor	PointData | number	The anchor point of the text.
resolution	number	The resolution of the text.
roundPixels	boolean	Whether or not to round the x/y position.
style	TextStyle | TextStyle<Partial> | TextStyleOptions | HTMLTextStyle | Partial<HTMLTextStyle> | HTMLTextStyleOptions	The text style
text	TextString	The copy for the text object. To split a line you can use '\n'.

Example

const text = new Text({
   text: 'Hello Pixi!',
   style: {
      fontFamily: 'Arial',
      fontSize: 24,
   fill: 0xff1010,
   align: 'center',
 }
});

TextStyleOptions

Constructor options used for TextStyle instances.

const textStyle = new TextStyle({
   fontSize: 12,
   fill: 'black',
});

Properties:

Name	Type	Description
align	'left' | 'center' | 'right' | 'justify'	Alignment for multiline text, does not affect single line text
breakWords	boolean	Indicates if lines can be wrapped within words, it needs wordWrap to be set to true
dropShadow	boolean | Partial<TextDropShadow>	Set a drop shadow for the text
fill	string | Array<string> | number | Array<number> | CanvasGradient | CanvasPattern	A canvas fillstyle that will be used on the text e.g., 'red', '#00FF00'. Can be an array to create a gradient, e.g., ['#000000','#FFFFFF'] MDN
fontFamily	string | string[]	The font family, can be a single font name, or a list of names where the first is the preferred font.
fontSize	number | string	The font size (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em')
fontStyle	'normal' | 'italic' | 'oblique'	The font style.
fontVariant	'normal' | 'small-caps'	The font variant.
fontWeight	'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'	The font weight.
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	Occasionally some fonts are cropped. Adding some padding will prevent this from happening by adding padding to all sides of the text.
stroke	StrokeInput	A canvas fillstyle that will be used on the text stroke, e.g., 'blue', '#FCFF00'
textBaseline	'alphabetic' | 'top' | 'hanging' | 'middle' | 'ideographic' | 'bottom'	The baseline of the text that is rendered.
whiteSpace	'normal' | 'pre' | 'pre-line'	Determines whether newlines & spaces are collapsed or preserved "normal" (collapse, collapse), "pre" (preserve, preserve) | "pre-line" (preserve, collapse). It needs wordWrap to be set to true.
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

See:

• TextStyle

Type Definitions