Multi-Style Text for pixi.js

pixi, pixi.js, text, multistyle, multi style, style, canvas, webgl, graphics, render, 2d
npm install pixi-multistyle-text-esnext@1.0.1



This project ports pixi-multistyle-text to ESNext, making it possible to use it via webpack or SystemJS. The motivation for this project was that the old ES5 version heavily relied on globals and a sloppy this context, which made it impossible to use it in ES5 strict or ES2015+ environments.



Since the main use case was the ability to use this from ES2015+ strict without globals, the setup looks like this:

import injector from "pixi-multistyle-text-esnext";
/* Now, `PIXI.MultiStyleText` is available! */

Default styles

In contrast to the ES5 version, this version keeps the "default" style under the name default instead of def, since unlike def, default is actually a word and everyone should immediately understands what it means.


In the example below, we are defining 4 text styles. default is the default style for the text, and the others match the tags inside the text.

const text = new PIXI.MultiStyleText("<pixi>PIXI.js</pixi> can have <multiline>multiline</multiline>\nand <multistyle>multi-style</multistyle> text!", {
    default: {
        font: "35px Snippet",
        fill: "white"
    multiline: {
        font: "35px Snippet",
        fill: "blue"
    pixi: {
        font: "35px Snippet",
        fill: "#D90057"
    multistyle: {
        font: "35px Snippet",
        fill: "red"


text = new PIXI.MultiStyleText(text, textStyles [,lineStyle])

Creates a new Multi-Styles Text with the given options


Type: [string:object] Each key of this object should match with a tag in the text. Use the key default for the default style. The style object can have these properties:

  • font {string} The style and size of the font. Default bold 20pt Arial.
  • fill {object} A canvas fillstyle that will be used on the text. Can be a color, a gradient, or a pattern. Default black.
  • stroke {object} A canvas fillstyle that will be used on the text stroke. Can be a color, a gradient, or a pattern. Default black.
  • strokeThickness {number} A number that represents the thickness of the stroke. Default 0.
  • dropShadow {boolean} Set a drop shadow for the text. Default false.
  • dropShadowColor {object} A fill style to be used on the dropshadow. Can be a color, a gradient, or a pattern. Default black.
  • dropShadowAngle {number} Set a angle of the drop shadow. Default Math.PI/4.
  • dropShadowDistance {number} Set a distance of the drop shadow. Default 5.
  • valign {string} Vertical alignment for multi font-size text ('top', 'middle', 'bottom'). Default 'top'.


Type: [object]

  • align {string} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text. Default left.
  • wordWrap {boolean} Indicates if word wrap should be used. Default false.
  • wordWrapWidth {Number} The width at which text will wrap. Default 100.