PixiJS HTMLText

npm (scoped)

An alternative to PIXI.Text that works with both WebGL and Canvas, however, it has some advantages:

Supports HTML tags for styling such as <strong>, or <em>, as well as <span style="">
Better support for emojis and other HTML layout features, better compatibility with CSS line-height and letter-spacing.

Disadvantages:

Unlike PIXI.Text, HTMLText rendering will vary slightly between platforms and browsers. HTMLText uses SVG/DOM to render text and not Context2D's fillText like PIXI.Text.
Performance and memory usage is on-par with PIXI.Text (that is to say, slow and heavy)
Only works with browsers that support <foreignObject>.

Usage

import { HTMLText } from 'pixi.js';

const text = new HTMLText("Hello World", { fontSize: 20 });

Important: Because the HTMLText object takes a raw HTML string, it's represents a potential vector for XSS, it's strongly encourage you santize input especially if you're accepting user-strings.

Custom Fonts

Because rendering within a <foreignObject> element does not have access to fonts available in the current document, therefore, you need to load the fonts explicitly.

const text = new HTMLText("Hello World", { fontFamily: 'Custom' });

await text.style.loadFont('./path/to/custom-regular.ttf', { family: 'Custom' });

Multiple Weights

const text = new HTMLText("Hello <b>World</b>", { fontFamily: 'Custom' });

await Promise.all([
    text.style.loadFont('./path/to/custom-regular.ttf', { family: 'Custom' }),
    text.style.loadFont('./path/to/custom-bold.ttf', { family: 'Custom', weight: 'bold' });
]);

Styles

Not all styles and values are compatible between PIXI.Text, mainly because Text is rendered using a DOM element instead of Context2D's fillText API.

Supported

fill
fontFamily
fontSize
fontWeight
fontStyle
fontVariant
letterSpacing †
align (also supports justify value)
padding
breakWords
lineHeight †
whiteSpace (also supports nowrap, pre-wrap values)
wordWrap
wordWrapWidth
strokeThickness ‡
dropShadow ‡
dropShadowAngle
dropShadowDistance
dropShadowBlur ‡
dropShadowColor
stroke
strokeThickness

† Values may differ slightly from PIXI.Text rendering. ‡ Appearance may differ slightly between different browsers.

Unsupported

fillGradientStops
fillGradientType
lineJoin
miterLimit
textBaseline
trim
leading

Current Tags

7.4.3 ... latest (a year ago)
2.1.3 ... latest-2.x (3 years ago)
7.4.3 ... latest-7.x (a year ago)
7.3.0-rc.2 ... prerelease (3 years ago)

41 Versions

7.4.3 ... a year ago
7.4.2 ... 2 years ago
7.4.0 ... 2 years ago
7.3.3 ... 2 years ago
7.3.2 ... 2 years ago
7.3.1 ... 3 years ago
7.3.0 ... 3 years ago
7.3.0-rc.2 ... 3 years ago
7.3.0-rc ... 3 years ago
7.2.4 ... 3 years ago
7.2.3 ... 3 years ago
7.2.2 ... 3 years ago
7.2.1 ... 3 years ago
7.2.0 ... 3 years ago
7.2.0-rc.3 ... 3 years ago
7.2.0-rc.2 ... 3 years ago
7.2.0-rc ... 3 years ago
7.2.0-beta.4 ... 3 years ago
7.2.0-beta.3 ... 3 years ago
7.2.0-beta.2 ... 3 years ago
3.3.1 ... 3 years ago
7.2.0-beta ... 3 years ago
3.3.0 ... 3 years ago
3.2.1 ... 3 years ago
3.2.0 ... 3 years ago
3.1.1 ... 3 years ago
3.1.0 ... 3 years ago
2.1.3 ... 3 years ago
3.0.3 ... 3 years ago
2.1.2 ... 4 years ago
3.0.2 ... 4 years ago
3.0.1 ... 4 years ago
3.0.0 ... 4 years ago
2.1.1 ... 4 years ago
2.1.0 ... 4 years ago
2.0.3 ... 4 years ago
2.0.2 ... 4 years ago
2.0.1 ... 4 years ago
2.0.0 ... 5 years ago
1.0.1 ... 5 years ago
1.0.0 ... 6 years ago