Multi-Style Text for pixi.js
Last updated 4 years ago by kdex. .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install pixi-multistyle-text-esnext 
SYNC missed versions from official npm registry.


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.

Current Tags

  • 1.0.1                                ...           latest (4 years ago)

2 Versions

  • 1.0.1                                ...           4 years ago
  • 1.0.0                                ...           4 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
Dev Dependencies (11)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |