Comprehensive text rendering system supporting canvas-based text, bitmap fonts, and HTML text with CSS styling. Includes font loading, text metrics, advanced text features, and multiple rendering approaches for different use cases.
Canvas-based text rendering with advanced styling and layout options.
/**
* Canvas-based text rendering
*/
class Text extends Container {
constructor(options?: TextOptions);
/** Text content */
text: string;
/** Text style configuration */
style: TextStyle;
/** Text resolution for crisp rendering */
resolution: number;
/** Text width */
readonly width: number;
/** Text height */
readonly height: number;
/**
* Get text metrics
* @returns Text measurement data
*/
getTextMetrics(): TextMetrics;
/**
* Update text and style
* @param text - New text content
* @param style - New text style
* @returns This text instance
*/
updateText(text?: string, style?: Partial<TextStyleOptions>): this;
}
interface TextOptions {
/** Text content */
text?: string;
/** Text style */
style?: Partial<TextStyleOptions>;
/** Text resolution */
resolution?: number;
}Comprehensive text styling system with support for fonts, colors, shadows, and layout.
/**
* Text style configuration
*/
class TextStyle {
constructor(style?: Partial<TextStyleOptions>);
/** Font family */
fontFamily: string | string[];
/** Font size in pixels */
fontSize: number;
/** Font style */
fontStyle: 'normal' | 'italic' | 'oblique';
/** Font variant */
fontVariant: 'normal' | 'small-caps';
/** Font weight */
fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | number;
/** Text color */
fill: FillInput;
/** Text stroke */
stroke: StrokeInput;
/** Stroke thickness */
strokeThickness: number;
/** Text alignment */
align: 'left' | 'center' | 'right' | 'justify';
/** Line height multiplier */
lineHeight: number;
/** Letter spacing in pixels */
letterSpacing: number;
/** Word wrap */
wordWrap: boolean;
/** Word wrap width */
wordWrapWidth: number;
/** Break words */
breakWords: boolean;
/** Text baseline */
textBaseline: 'alphabetic' | 'top' | 'hanging' | 'middle' | 'ideographic' | 'bottom';
/** Leading trim */
leading: number;
/** Drop shadow */
dropShadow: DropShadowOptions;
/** Padding */
padding: number;
/** Trim transparent pixels */
trim: boolean;
/**
* Clone style
* @returns Cloned text style
*/
clone(): TextStyle;
/**
* Reset style to defaults
*/
reset(): void;
/**
* Generate font string
* @returns CSS font string
*/
toFontString(): string;
}
interface TextStyleOptions {
fontFamily: string | string[];
fontSize: number;
fontStyle: 'normal' | 'italic' | 'oblique';
fontVariant: 'normal' | 'small-caps';
fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | number;
fill: FillInput;
stroke: StrokeInput;
strokeThickness: number;
align: 'left' | 'center' | 'right' | 'justify';
lineHeight: number;
letterSpacing: number;
wordWrap: boolean;
wordWrapWidth: number;
breakWords: boolean;
textBaseline: 'alphabetic' | 'top' | 'hanging' | 'middle' | 'ideographic' | 'bottom';
leading: number;
dropShadow: DropShadowOptions;
padding: number;
trim: boolean;
}
interface DropShadowOptions {
/** Enable drop shadow */
alpha: number;
/** Shadow angle in radians */
angle: number;
/** Shadow blur */
blur: number;
/** Shadow color */
color: ColorSource;
/** Shadow distance */
distance: number;
}Bitmap font text rendering for crisp, scalable text using pre-rendered character textures.
/**
* Bitmap font text rendering
*/
class BitmapText extends Container {
constructor(options?: BitmapTextOptions);
/** Text content */
text: string;
/** Bitmap font to use */
style: BitmapTextStyle;
/** Text width */
readonly textWidth: number;
/** Text height */
readonly textHeight: number;
/** Font size */
fontSize: number;
/** Text alignment */
align: 'left' | 'center' | 'right';
/** Tint color */
tint: ColorSource;
/** Letter spacing */
letterSpacing: number;
/** Max width for wrapping */
maxWidth: number;
/** Max height for clipping */
maxHeight: number;
/** Text anchor point */
anchor: ObservablePoint;
/** Enable rounding positions */
roundPixels: boolean;
/**
* Get local bounds
* @param rect - Rectangle to store bounds
* @returns Text bounds
*/
getLocalBounds(rect?: Rectangle): Rectangle;
/**
* Update text
* @param text - New text content
* @returns This bitmap text
*/
updateText(text?: string): this;
}
interface BitmapTextOptions {
/** Text content */
text?: string;
/** Bitmap text style */
style?: BitmapTextStyle;
}
interface BitmapTextStyle {
/** Font family/name */
fontFamily: string;
/** Font size */
fontSize: number;
/** Text alignment */
align: 'left' | 'center' | 'right';
/** Tint color */
tint: ColorSource;
/** Letter spacing */
letterSpacing: number;
/** Line height */
lineHeight: number;
}HTML-based text rendering with CSS styling support for rich text layouts.
/**
* HTML text rendering with CSS styling
*/
class HTMLText extends Container {
constructor(options?: HTMLTextOptions);
/** HTML text content */
text: string;
/** HTML text style */
style: HTMLTextStyle;
/** Text width */
readonly width: number;
/** Text height */
readonly height: number;
/** Text resolution */
resolution: number;
/**
* Update text content
* @param text - New HTML text
* @returns This HTML text
*/
updateText(text?: string): this;
}
interface HTMLTextOptions {
/** HTML text content */
text?: string;
/** HTML text style */
style?: Partial<HTMLTextStyleOptions>;
}
/**
* HTML text style with CSS properties
*/
class HTMLTextStyle {
constructor(style?: Partial<HTMLTextStyleOptions>);
/** Font family */
fontFamily: string;
/** Font size */
fontSize: number | string;
/** Font style */
fontStyle: string;
/** Font weight */
fontWeight: string;
/** Text color */
fill: ColorSource;
/** Text alignment */
align: string;
/** Vertical alignment */
valign: string;
/** Word wrap */
wordWrap: boolean;
/** Word wrap width */
wordWrapWidth: number;
/** Line height */
lineHeight: number;
/** Padding */
padding: number;
/**
* Clone style
* @returns Cloned HTML text style
*/
clone(): HTMLTextStyle;
}
interface HTMLTextStyleOptions {
fontFamily: string;
fontSize: number | string;
fontStyle: string;
fontWeight: string;
fill: ColorSource;
align: string;
valign: string;
wordWrap: boolean;
wordWrapWidth: number;
lineHeight: number;
padding: number;
}Bitmap font loading and management system.
/**
* Bitmap font resource
*/
class BitmapFont {
constructor(data: BitmapFontData, textures: Texture[]);
/** Font information */
info: BitmapFontInfo;
/** Common font properties */
common: BitmapFontCommon;
/** Font pages/textures */
pages: Texture[];
/** Character data */
chars: Record<number, BitmapFontChar>;
/** Kerning pairs */
kernings: Record<string, number>;
/** Distance field properties */
distanceField: BitmapFontDistanceField;
/**
* Get character data
* @param char - Character code
* @returns Character data
*/
getChar(char: number): BitmapFontChar;
/**
* Get kerning between characters
* @param first - First character
* @param second - Second character
* @returns Kerning amount
*/
getKerning(first: number, second: number): number;
}
/**
* Dynamic bitmap font for runtime text generation
*/
class DynamicBitmapFont extends BitmapFont {
constructor(name: string, style: TextStyle, options?: DynamicBitmapFontOptions);
/** Font name */
fontName: string;
/** Text style used */
style: TextStyle;
/** Resolution */
resolution: number;
/** Padding */
padding: number;
/**
* Update font with new characters
* @param chars - Characters to add
*/
updateChars(chars: string): void;
}
interface BitmapFontData {
info: BitmapFontInfo;
common: BitmapFontCommon;
pages: string[];
chars: BitmapFontChar[];
kernings?: BitmapFontKerning[];
distanceField?: BitmapFontDistanceField;
}
interface BitmapFontInfo {
face: string;
size: number;
bold: boolean;
italic: boolean;
charset: string;
unicode: boolean;
stretchH: number;
smooth: boolean;
aa: number;
padding: [number, number, number, number];
spacing: [number, number];
}
interface BitmapFontCommon {
lineHeight: number;
base: number;
scaleW: number;
scaleH: number;
pages: number;
packed: boolean;
}
interface BitmapFontChar {
id: number;
page: number;
x: number;
y: number;
width: number;
height: number;
xoffset: number;
yoffset: number;
xadvance: number;
chnl: number;
}Text measurement and layout utilities.
/**
* Text metrics for measuring text
*/
interface TextMetrics {
/** Text content */
text: string;
/** Text style */
style: TextStyle;
/** Text width */
width: number;
/** Text height */
height: number;
/** Text lines */
lines: string[];
/** Line widths */
lineWidths: number[];
/** Line height */
lineHeight: number;
/** Max line width */
maxLineWidth: number;
/** Font properties */
fontProperties: FontMetrics;
}
interface FontMetrics {
/** Ascent */
ascent: number;
/** Descent */
descent: number;
/** Font size */
fontSize: number;
}
/**
* Canvas text metrics utility
*/
class CanvasTextMetrics {
/**
* Measure text with given style
* @param text - Text to measure
* @param style - Text style
* @param wordWrap - Enable word wrapping
* @param canvas - Canvas to use for measurement
* @returns Text metrics
*/
static measureText(text: string, style: TextStyle, wordWrap?: boolean, canvas?: HTMLCanvasElement): TextMetrics;
/**
* Get font metrics
* @param font - Font string
* @returns Font metrics
*/
static measureFont(font: string): FontMetrics;
}Usage Examples:
import { Text, BitmapText, HTMLText, TextStyle, Assets } from 'pixi.js';
// Basic text
const text = new Text({
text: 'Hello PixiJS!',
style: {
fontSize: 32,
fill: 0xffffff,
fontFamily: 'Arial'
}
});
// Advanced text styling
const styledText = new Text({
text: 'Styled Text with\nMultiple Lines',
style: {
fontSize: 24,
fontFamily: ['Helvetica', 'Arial', 'sans-serif'],
fill: ['#ff0000', '#00ff00'], // Gradient fill
stroke: 0x000000,
strokeThickness: 2,
dropShadow: {
color: 0x000000,
blur: 4,
angle: Math.PI / 6,
distance: 6
},
wordWrap: true,
wordWrapWidth: 200,
align: 'center',
lineHeight: 1.2
}
});
// Bitmap text
await Assets.load('bitmap-font.fnt');
const bitmapText = new BitmapText({
text: 'Bitmap Text',
style: {
fontFamily: 'MyBitmapFont',
fontSize: 32,
tint: 0xff0000
}
});
// HTML text with rich formatting
const htmlText = new HTMLText({
text: '<b>Bold</b> and <i>italic</i> text with <span style="color: red;">colored</span> words',
style: {
fontSize: 18,
fontFamily: 'Arial',
fill: 0x000000,
wordWrap: true,
wordWrapWidth: 300
}
});
// Dynamic text updates
let counter = 0;
app.ticker.add(() => {
text.text = `Counter: ${counter++}`;
});
// Text with custom fonts
Assets.add({ alias: 'customFont', src: 'fonts/CustomFont.woff2' });
await Assets.load('customFont');
const customText = new Text({
text: 'Custom Font Text',
style: {
fontFamily: 'CustomFont',
fontSize: 28,
fill: 0x00ff00
}
});
// Text metrics and measurement
const metrics = text.getTextMetrics();
console.log(`Text size: ${metrics.width}x${metrics.height}`);
// Interactive text
text.interactive = true;
text.buttonMode = true;
text.on('pointerdown', () => {
text.style.fill = Math.random() * 0xffffff;
});
// Bitmap font with distance fields for crisp scaling
const sdfText = new BitmapText({
text: 'Scalable Text',
style: {
fontFamily: 'SDFFont',
fontSize: 64
}
});
sdfText.scale.set(0.5); // Scales cleanly with SDF fonts