Multi-Style Text Rendering Plugin for PixiJS
npm install @pixi/text-htmlAn alternative to PIXI.Text that works with both WebGL and Canvas, however, it has some advantages:
* Supports HTML tags for styling such as , or , as well as
* 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
``js
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._
Because rendering within a element does not have access to fonts available in the current document, therefore, you need to load the fonts explicitly.
`js
const text = new HTMLText("Hello World", { fontFamily: 'Custom' });
await text.style.loadFont('./path/to/custom-regular.ttf', { family: 'Custom' });
`
Multiple Weights
`js
const text = new HTMLText("Hello World", { 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' });
]);
`
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
*
*
*
*
*
* †align
* (also supports justify value)padding
*
*
* †whiteSpace
* (also supports nowrap, pre-wrap values)wordWrap
*
*
* ‡dropShadow
* ‡dropShadowAngle
*
*
* ‡dropShadowColor
*
*
*
† _Values may differ slightly from PIXI.Text rendering._
‡ _Appearance may differ slightly between different browsers._
Unsupported
* fillGradientStops
*
*
*
*
*
*