pixijs / html-text Goto Github PK

Multi-Style Text Rendering Plugin for PixiJS

Home Page: https://www.npmjs.com/package/@pixi/text-html

TypeScript 100.00%

html javascript pixijs rendering svg text

html-text's Introduction

Warning This repository is no longer maintained. HTMLText has been rolled into the main project and it now bundled by default in pixi.js or pixi.js-legacy packages.

PixiJS HTMLText

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 , 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 <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/

html-text's People

Contributors

Stargazers

Watchers

Forkers

forkkit isabella232 vkuka seleb touchrank-dev mhazy bcazur dmitrykolesnikovich carrotquest littleboarx chaslui

html-text's Issues

Sanitize the text or document the XSS vector

Since the text being added to the HTMLText object is HTML, that opens the door for XSS vulnerabilities if, for example, an application takes the formatted text from user input or an external resource.

Here is an example:

const unsafeString = `Hello <img onerror="console.log('XSS')" src="-"/> world!`;
const text = new HTMLText(unsafeString);

One option is to use an HTML sanitization library. Another option is to document clearly that when using HTMLText, the developer is responsible for sanitizing the text being passed in to prevent XSS vulnerabilities.

Can't install, npm ERR! ERESOLVE could not resolve, npm ERR! While resolving: @pixi/[email protected] Found: @pixi/[email protected]

Hi,
I have problem with npm install on Laravel 8 project

package.json:

"dependencies": {
    "@pixi-essentials/bounds": "^2.1.1",
    "@pixi/graphics-smooth": "^0.0.13",
    "@pixi/text-html": "^1.0.1",
    "cocoen": "^2.0.5",
    "d-path-parser": "^1.0.0",
    "event-dispatch": "^0.4.1",
    "geometric": "^2.2.8",
    "history": "^5.3.0",
    "perfect-scrollbar": "^1.5.5",
    "pixi-svg": "^2.3.1",
    "pixi-text-input": "^1.0.6",
    "pixi.js": "^6.0.4",
    "pixijs-grid": "^0.4.1",
    "qr-scanner": "^1.2.0",
    "select2": "^4.0.13",
    "slick-carousel": "^1.8.1",
    "x2js": "^3.4.1"
  },
  "devDependencies": {
    "browser-sync": "^2.26.14",
    "browser-sync-webpack-plugin": "^2.2.2",
    "cross-env": "^6.0.3",
    "eslint": "^6.8.0",
    "laravel-mix": "^5.0.5",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.35.1",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11",
    "xml2js": "^0.4.23"
  }

npm install:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @pixi/[email protected]
npm ERR! Found: @pixi/[email protected]
npm ERR! node_modules/@pixi/core
npm ERR!   peer @pixi/core@"6.1.1" from @pixi/[email protected]
npm ERR!   node_modules/@pixi/accessibility
npm ERR!     @pixi/accessibility@"6.1.1" from [email protected]
npm ERR!     node_modules/pixi.js
npm ERR!       pixi.js@"^6.0.4" from the root project
npm ERR!   peer @pixi/core@"6.1.1" from @pixi/[email protected]
npm ERR!   node_modules/@pixi/app
npm ERR!     @pixi/app@"6.1.1" from [email protected]
npm ERR!     node_modules/pixi.js
npm ERR!       pixi.js@"^6.0.4" from the root project
npm ERR!   25 more (@pixi/compressed-textures, @pixi/extract, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @pixi/core@"^5.0.0" from @pixi/[email protected]
npm ERR! node_modules/@pixi/text-html
npm ERR!   @pixi/text-html@"^1.0.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @pixi/[email protected]
npm ERR! node_modules/@pixi/core
npm ERR!   peer @pixi/core@"^5.0.0" from @pixi/[email protected]
npm ERR!   node_modules/@pixi/text-html
npm ERR!     @pixi/text-html@"^1.0.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Windows 11
Node: 16-lastest
npm: 8-latest

Regards!

About input space

Only one space is displayed when multiple spaces are entered, and the width is not increased if the last character is a space.
Is there any way to enter more than one space?

Peer dependencies

Please, use ">=" instead "^" for module version. It cause to update to latest version of pixi.js modules.
As example after lock pixi.js to 6.3.2 version i will receive type error, because modules in @pixi which needed for html-text are updated to 6.4.2 version.

White screen appears when updating text

Currently I use the rich text editor quill.js to generate the html, and then update it to the text part of the HTMLText.
But now I have the problem that when the text is updated the whole HTMLText object will be white screened and then updated to the new content.
The expectation is to update the text without a white screen even if the update is slower.

New HTMLText is added to the top-left corner of the webpage, is visible and can be interacted with

Using PixiJS 7, recently updated the text-html package from NPM, ran into this issue. Any HTMLText that gets created is put onto the webpage, is visible, and can be interacted with. I can highlight it and copy it, for example.

Multiple HTMLText on the stage will add them all to the top-left corner of the website. This gets very weird.

A minimum reproduction example (this generated the result in the first image):

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

const canvasElement = document.getElementById("pixi-canvas") as HTMLCanvasElement;

const options = {
	view: canvasElement,
	resolution: window.devicePixelRatio || 1,
	autoDensity: true,
	backgroundColor: "skyblue",
	width: 1280,
	height: 720,
};

const app = new Application(options);

app.stage.addChild(new HTMLText("HTMLText gets added to the DOM, is visible, can be interacted with", {
	fill: "white",
}))

The fill being white isn't necessary. Black HTMLText will still get added to the top left corner, even if I can't see it.

This issue arose on Chrome and Firefox on both Windows and Android.

Resolution with this.stage.scale

We have custom logic to detect both browser zoom (window.devicePixelRatio) and tool bar that controls (this.stage.scale).

When scale event change, we apply resolution as (scale * devicePixelRatio), which looks fine with regular Pixi Text, however, this plugin's resolution is not rendered correctly.

incorrect layout compute in safari

in safari, the uses floored width instead of using decimals, which may cause some layout problems.

to avoid it I recommend ceil the computed width and height.

Pixi 6 not supported

"pixi.js": "^6.0.4"

npm install @pixi/text-html gives the following error:

Looks like @pixi/math@"^5.0.0" dependency needs to be updated to @pixi/[email protected]? Possibly other deps too?

Thanks. By the way, I just realised that Pixi v6 is in pre-release, so I tried downgrading to that v5 and that just caused other dependencies to fail.

Display flashing

when I use "setInterval" to update text
demo: https://jsfiddle.net/Le7kv0o1/

Detached HTMLElement

If I use "setInterval" to update text, The DOM Nodes has been increasing.

Performance Profile Slow-down in Chrome

Did some benchmarking of PIXI.HTMLText vs PIXI.Text and found some interesting things:

🐢 HTMLText is about 2-4 times slow in Chrome than Text

⚖️ HTMLText is about equal in Safari with Text

🐇 HTMLText is about 50% faster in Firefox than Text

I'm going to profile Chrome to see if we can improve performance. The goal is that this is a non-brainer replacement for Text with no or few concessions.

Example:
https://jsfiddle.net/bigtimebuddy/ntusg3ak/

writing-mode is not supported

Import not working

I've tried implementing this, but for some reason it says PIXI is not defined when I import text-html

ReferenceError: PIXI is not defined
./node_modules/@pixi/text-html/dist/html-text.js
node_modules/@pixi/text-html/dist/html-text.js:8
   5 |  * @pixi/text-html is licensed under the MIT License.
   6 |  * http://www.opensource.org/licenses/mit-license
   7 |  */
>  8 | var _pixi_htmltext=function(t,e,i,o,s,r,n){"use strict";var h=function(t){function e(e,r,n){if(void 0===e&&(e=""),void 0===r&&(r=

Here's my import code:

import * as PIXI from "pixi.js";
import { HTMLText } from "@pixi/text-html";

When loading the library manually, window.PIXI.HTMLText is available as intended:

import("pixi.js")
   .then((pixi) => {
      window.PIXI = pixi
      import("@pixi/text-html")
   })
.catch((error) => console.error("Couldn't load PIXI", error));

Non Breaking space seems to break the render

Looks like when i have the presence of a non breaking space in the html string passed in to render it goes blank on me
An example of the string to reproduce this is eeee hello abul atta

Many thanks as you look into it

Custom fonts not working

I'm not able to show custom fonts with HTML Text. If I replace PIXI.HTMLText with PIXI.Text my custom font is showing properly.

const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  resolution: window.devicePixelRatio,
  autoDensity: true,
  transparent: true,
  resizeTo: window,
});

const textStyle = new PIXI.TextStyle({
  fontFamily: ["Work Sans", "Courier New", "sans-serif"],
  fontSize: 16 * 4,
  wordWrapWidth: window.innerWidth / 2,
  wordWrap: true,
  fontWeight: 350,
  fill: 0xffffff,
});

const title = new PIXI.HTMLText(
  "<strong>Custom</strong> font family",
  textStyle
);
title.x = 100;
title.y = 100;
app.stage.addChild(title);

Shows the fallback font:

If I replace new PIXI.HTMLText with new PIXI.Text my fonts are showing properly:

Is there a way to make CSS transitions work?

I tried the obvious solution of simply adding transition: all 0.2s to the style, but that doesn't seem to work.
I feel like it's not compatible with the way the text is rendered, but is there a workaround or any other way to add an animated scale-in effect for example?

Typings don't work with Pixi v6

Typings use the deprecated global PIXI namespace, which was removed in Pixi v6.

Support for measuring HTMLText output dimensions

For regular Text objects we have PIXI.TextMetrics.measureText, which doesn't require creating the DisplayObject to know the dimensions of the text. However, that won't work correctly for HTMLText because markup is counted as extra characters.

It would be very useful to have something like measureText for HTMLText so we can have a lightweight way of measuring the size the text would have before rendering the object.

For my particular case, as a workaround I could create a div element, add my text as innerHTML and then get the innerText to pass it to PIXI.TextMetrics.measureText. It wouldn't be completely accurate, since markup can make the font slightly larger, or add extra space, but I don't have these issues. However, for the general case, having an accurate helper in the library would be really nice.