Skip to content

Latest commit

 

History

History
105 lines (75 loc) · 3 KB

README.md

File metadata and controls

105 lines (75 loc) · 3 KB
Raw

PixiJS HTMLText

Node.js CI

An alternative to PIXI.Text that works with PixiJS v5 (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>.

Install

npm install @pixi/text-html
yarn add @pixi/text-html

Usage

import { HTMLText } from '@pixi/text-html';

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

Example

https://pixijs.io/html-text/demo/

Documentation

https://pixijs.io/html-text/docs/