@pixi/text-html - npm Package Compare versions

Comparing version 3.0.3 to 3.1.0

dist/html-text.cjs.js

 "use strict";/*!
- * @pixi/text-html - v3.0.3
- * Compiled Fri, 04 Nov 2022 11:21:34 UTC
+ * @pixi/text-html - v3.1.0
+ * Compiled Thu, 15 Dec 2022 21:37:38 UTC
  *
  * @pixi/text-html is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
- */Object.defineProperty(exports,"__esModule",{value:!0});var b=require("@pixi/sprite"),n=require("@pixi/core"),p=require("@pixi/text");class S extends b.Sprite{constructor(e="",t={},h){h=h||document.createElement("canvas"),h.width=3,h.height=3;const o=n.Texture.from(h,{scaleMode:n.settings.SCALE_MODE});o.orig=new n.Rectangle,o.trim=new n.Rectangle,super(o),this._text=null,this._style=null,this._autoResolution=!0,this._loading=!1,this.localStyleID=-1,this.dirty=!1;const a="http://www.w3.org/2000/svg",i=document.createElementNS(a,"svg"),r=document.createElementNS(a,"foreignObject"),l=document.createElementNS("http://www.w3.org/1999/xhtml","div");r.setAttribute("height","100%"),r.setAttribute("width","100%"),i.appendChild(r),this._domElement=l,this._svgRoot=i,this._foreignObject=r,this._image=new Image,this.canvas=h,this.context=h.getContext("2d"),this._resolution=n.settings.RESOLUTION,this.text=e,this.style=t}updateText(e=!0){const{style:t,resolution:h}=this,o=this.canvas,a=this.context;if(this.localStyleID!==t.styleID&&(this.dirty=!0,this.localStyleID=t.styleID),!this.dirty&&e)return;let i=`
-            display:inline-block;
-            color:${t.fill};
-            font-size: ${t.fontSize}px;
-            font-family:${t.fontFamily};
-            font-weight:${t.fontWeight};
-            font-style:${t.fontStyle};
-            font-variant:${t.fontVariant};
-            letter-spacing:${t.letterSpacing}px;
-            text-align:${t.align};
-            padding:${t.padding}px;
-        `;if(t.lineHeight&&(i+=`line-height:${t.lineHeight}px;`),t.wordWrap&&(i+=`word-wrap:${t.breakWords?"break-all":"break-word"};`,i+=`max-width:${t.wordWrapWidth}px;`),t.strokeThickness){let{stroke:s}=t;typeof s=="number"&&(s=n.utils.hex2string(s)),i+=`-webkit-text-stroke-width: ${t.strokeThickness}px;`,i+=`-webkit-text-stroke-color: ${s};`,i+=`text-stroke-width: ${t.strokeThickness}px;`,i+=`text-stroke-color: ${s};`,i+="paint-order: stroke;"}if(t.dropShadow){const{dropShadowAngle:s,dropShadowDistance:c,dropShadowBlur:x,dropShadowColor:_,dropShadowAlpha:g}=t,w=Math.round(Math.cos(s)*c),m=Math.round(Math.sin(s)*c);let d=_;if(typeof d=="number"&&(d=n.utils.hex2string(d)),d.charAt(0)==="#"&&g<1){const[y,f,v]=n.utils.hex2rgb(parseInt(d.replace("#",""),16));d=`rgba(${y*255|0}, ${f*255|0}, ${v*255|0}, ${g})`}i+=`text-shadow: ${w}px ${m}px ${x}px ${d};`}const r=this._domElement;Object.assign(r,{innerHTML:this._text,style:i}),document.body.appendChild(r);const{width:l,height:u}=r.getBoundingClientRect();if(document.body.removeChild(r),this._foreignObject.appendChild(r),this._svgRoot.setAttribute("width",l.toString()),this._svgRoot.setAttribute("height",u.toString()),o.width=Math.ceil((Math.max(1,l)+t.padding*2)*h),o.height=Math.ceil((Math.max(1,u)+t.padding*2)*h),!this._loading){const s=this._image,c=new XMLSerializer().serializeToString(this._svgRoot);this._loading=!0,s.src=`data:image/svg+xml;charset=utf8,${encodeURIComponent(c)}`,s.onload=()=>{a.scale(h,h),a.clearRect(0,0,o.width,o.height),a.drawImage(s,0,0,l,u,0,0,l,u),s.src="",s.onload=null,this._loading=!1,this.updateTexture()}}}updateTexture(){const{style:e,texture:t,resolution:h}=this,o=this.canvas,a=this.context;if(e.trim){const{width:l,height:u,data:s}=n.utils.trimCanvas(o);s&&(o.width=l,o.height=u,a.putImageData(s,0,0))}const i=e.trim?0:e.padding,r=t.baseTexture;t.trim.width=t._frame.width=o.width/h,t.trim.height=t._frame.height=o.height/h,t.trim.x=-i,t.trim.y=-i,t.orig.width=t._frame.width-i*2,t.orig.height=t._frame.height-i*2,this._onTextureUpdate(),r.setRealSize(o.width,o.height,h),this.dirty=!1}_render(e){this._autoResolution&&this._resolution!==e.resolution&&(this._resolution=e.resolution,this.dirty=!0),this.updateText(!0),super._render(e)}_renderCanvas(e){this._autoResolution&&this._resolution!==e.resolution&&(this._resolution=e.resolution,this.dirty=!0),this.updateText(!0),super._renderCanvas(e)}getLocalBounds(e){return this.updateText(!0),super.getLocalBounds(e)}_calculateBounds(){this.updateText(!0),this.calculateVertices(),this._bounds.addQuad(this.vertexData)}_onStyleChange(){this.dirty=!0}destroy(e){super.destroy(e);const t=null;this.context=null,this.canvas&&(this.canvas.width=this.canvas.height=0),this.canvas=t,this._style=t,this._svgRoot=t,this._domElement=t,this._foreignObject=t,this._image.onload=null,this._image.src="",this._image=t}get width(){return this.updateText(!0),Math.abs(this.scale.x)*this.canvas.width/this.resolution}set width(e){this.updateText(!0);const t=n.utils.sign(this.scale.x)||1;this.scale.x=t*e/this.canvas.width/this.resolution,this._width=e}get height(){return this.updateText(!0),Math.abs(this.scale.y)*this.canvas.height/this.resolution}set height(e){this.updateText(!0);const t=n.utils.sign(this.scale.y)||1;this.scale.y=t*e/this.canvas.height/this.resolution,this._height=e}get style(){return this._style}set style(e){e=e||{},e instanceof p.TextStyle?this._style=e:this._style=new p.TextStyle(e),this.localStyleID=-1,this.dirty=!0}get text(){return this._text}set text(e){e=String(e===""||e===null||e===void 0?" ":e),e=this.sanitiseText(e),this._text!==e&&(this._text=e,this.dirty=!0)}get resolution(){return this._resolution}set resolution(e){this._autoResolution=!1,this._resolution!==e&&(this._resolution=e,this.dirty=!0)}sanitiseText(e){return e.replace(/<br>/gi,"<br/>").replace(/<hr>/gi,"<hr/>").replace(/&nbsp;/gi,"&#160;")}}exports.HTMLText=S;
+ */Object.defineProperty(exports,"__esModule",{value:!0});var w=require("@pixi/sprite"),a=require("@pixi/core"),x=require("@pixi/text"),S=Object.defineProperty,b=Object.defineProperties,v=Object.getOwnPropertyDescriptors,f=Object.getOwnPropertySymbols,T=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable,_=(t,e,s)=>e in t?S(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,O=(t,e)=>{for(var s in e||(e={}))T.call(e,s)&&_(t,s,e[s]);if(f)for(var s of f(e))M.call(e,s)&&_(t,s,e[s]);return t},R=(t,e)=>b(t,v(e));const u=class extends x.TextStyle{constructor(){super(...arguments),this._fonts=[],this._overrides=[],this._stylesheet=""}static from(t){return new u(Object.keys(u.defaultOptions).reduce((e,s)=>R(O({},e),{[s]:t[s]}),{}))}cleanFonts(){this._fonts.length>0&&(this._fonts.forEach(t=>{URL.revokeObjectURL(t.src),t.refs--,t.refs===0&&(t.fontFace&&document.fonts.delete(t.fontFace),delete u.availableFonts[t.originalUrl])}),this.fontFamily="Arial",this._fonts.length=0,this.styleID++)}loadFont(t,e={}){const{availableFonts:s}=u;if(s[t]){const i=s[t];return this._fonts.push(i),i.refs++,this.styleID++,Promise.resolve()}return a.settings.ADAPTER.fetch(t).then(i=>i.blob()).then(async i=>new Promise((n,o)=>{const h=URL.createObjectURL(i),r=new FileReader;r.onload=()=>n([h,r.result]),r.onerror=o,r.readAsDataURL(i)})).then(async([i,n])=>{const o=Object.assign({family:a.utils.path.basename(t,a.utils.path.extname(t)),weight:"normal",style:"normal",src:i,dataSrc:n,refs:1,originalUrl:t,fontFace:null},e);s[t]=o,this._fonts.push(o),this.styleID++;const h=new FontFace(o.family,`url(${o.src})`,{weight:o.weight,style:o.style});o.fontFace=h,await h.load(),document.fonts.add(h),await document.fonts.ready,this.styleID++})}addOverride(...t){const e=t.filter(s=>!this._overrides.includes(s));e.length>0&&(this._overrides.push(...e),this.styleID++)}removeOverride(...t){const e=t.filter(s=>this._overrides.includes(s));e.length>0&&(this._overrides=this._overrides.filter(s=>!e.includes(s)),this.styleID++)}toCSS(t){return["display: inline-block",`color: ${this.normalizeColor(this.fill)}`,`font-size: ${this.fontSize*t}px`,`font-family: ${this.fontFamily}`,`font-weight: ${this.fontWeight}`,`font-style: ${this.fontStyle}`,`font-variant: ${this.fontVariant}`,`letter-spacing: ${this.letterSpacing*t}px`,`text-align: ${this.align}`,`padding: ${this.padding*t}px`,`white-space: ${this.whiteSpace}`,...this.lineHeight?[`line-height: ${this.lineHeight*t}px`]:[],...this.wordWrap?[`word-wrap: ${this.breakWords?"break-all":"break-word"}`,`max-width: ${this.wordWrapWidth*t}px`]:[],...this.strokeThickness?[`-webkit-text-stroke-width: ${this.strokeThickness*t}px`,`-webkit-text-stroke-color: ${this.normalizeColor(this.stroke)}`,`text-stroke-width: ${this.strokeThickness*t}px`,`text-stroke-color: ${this.normalizeColor(this.stroke)}`,"paint-order: stroke"]:[],...this.dropShadow?[this.dropShadowToCSS(t)]:[],...this._overrides].join(";")}toGlobalCSS(){return this._fonts.reduce((t,e)=>`${t}
+            @font-face {
+                font-family: "${e.family}";
+                src: url('${e.dataSrc}');
+                font-weight: ${e.weight};
+                font-style: ${e.style}; 
+            }`,this._stylesheet)}get stylesheet(){return this._stylesheet}set stylesheet(t){this._stylesheet!==t&&(this._stylesheet=t,this.styleID++)}normalizeColor(t){return Array.isArray(t)&&(t=a.utils.rgb2hex(t)),typeof t=="number"?a.utils.hex2string(t):t}dropShadowToCSS(t){let e=this.normalizeColor(this.dropShadowColor);const s=this.dropShadowAlpha,i=Math.round(Math.cos(this.dropShadowAngle)*this.dropShadowDistance);let n=Math.round(Math.sin(this.dropShadowAngle)*this.dropShadowDistance);e.startsWith("#")&&s<1&&(e+=(s*255|0).toString(16).padStart(2,"0")),this.isSafari&&(n*=-1);const o=`${i*t}px ${n*t}px`;return this.dropShadowBlur>0?`text-shadow: ${o} ${this.dropShadowBlur}px ${e}`:`text-shadow: ${o} ${e}`}reset(){Object.assign(this,u.defaultOptions)}get isSafari(){const{userAgent:t}=a.settings.ADAPTER.getNavigator();return/^((?!chrome|android).)*safari/i.test(t)}set fillGradientStops(t){console.warn("[HTMLTextStyle] fillGradientStops is not supported by HTMLText")}get fillGradientStops(){return super.fillGradientStops}set fillGradientType(t){console.warn("[HTMLTextStyle] fillGradientType is not supported by HTMLText")}get fillGradientType(){return super.fillGradientType}set miterLimit(t){console.warn("[HTMLTextStyle] miterLimit is not supported by HTMLText")}get miterLimit(){return super.miterLimit}set textBaseline(t){console.warn("[HTMLTextStyle] textBaseline is not supported by HTMLText")}get textBaseline(){return super.textBaseline}};let c=u;c.availableFonts={},c.defaultOptions={align:"left",breakWords:!1,dropShadow:!1,dropShadowAlpha:1,dropShadowAngle:Math.PI/6,dropShadowBlur:0,dropShadowColor:"black",dropShadowDistance:5,fill:"black",fontFamily:"Arial",fontSize:26,fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",letterSpacing:0,lineHeight:0,lineJoin:"miter",padding:0,stroke:"black",strokeThickness:0,trim:!1,whiteSpace:"normal",wordWrap:!1,wordWrapWidth:100,leading:0};const g=class extends w.Sprite{constructor(t="",e={},s){var i;s=s||a.settings.ADAPTER.createCanvas(3,3);const n=a.Texture.from(s,{scaleMode:a.settings.SCALE_MODE});n.orig=new a.Rectangle,n.trim=new a.Rectangle,super(n),this._text=null,this._style=null,this._autoResolution=!0,this._loading=!1,this.localStyleID=-1,this.dirty=!1,this.ownsStyle=!1;const o="http://www.w3.org/2000/svg",h="http://www.w3.org/1999/xhtml",r=document.createElement("div"),l=document.createElementNS(o,"svg"),d=document.createElementNS(o,"foreignObject"),y=document.createElementNS(h,"div"),m=document.createElementNS(h,"style");d.setAttribute("width","10000"),d.setAttribute("height","10000"),d.style.overflow="hidden",l.appendChild(d),this.maxWidth=g.defaultMaxWidth,this.maxHeight=g.defaultMaxHeight,this._shadow=r,this._domElement=y,this._styleElement=m,this._svgRoot=l,this._foreignObject=d,this._foreignObject.appendChild(m),this._foreignObject.appendChild(y),this._image=new Image,this._autoResolution=g.defaultAutoResolution,this._shadowRoot=r.attachShadow({mode:"open"}),this._shadowRoot.appendChild(l),r.setAttribute("data-pixi-html-text","1"),Object.assign(r.style,{position:"absolute",top:"0",left:"-1px",width:"1px",height:"1px"}),document.body.appendChild(r),this.canvas=s,this.context=s.getContext("2d"),this._resolution=(i=g.defaultResolution)!=null?i:a.settings.RESOLUTION,this.text=t,this.style=e}measureText(t){var e,s;const{text:i,style:n,resolution:o}=Object.assign({text:this._text,style:this._style,resolution:this._resolution},t);Object.assign(this._domElement,{innerHTML:i,style:n.toCSS(o)}),this._styleElement.textContent=n.toGlobalCSS();const h=this._domElement.getBoundingClientRect(),r=Math.min(this.maxWidth,Math.ceil(h.width)),l=Math.min(this.maxHeight,Math.ceil(h.height));return this._svgRoot.setAttribute("width",r.toString()),this._svgRoot.setAttribute("height",l.toString()),i!==this._text&&(this._domElement.innerHTML=this._text),n!==this._style&&(Object.assign(this._domElement,{style:(e=this._style)==null?void 0:e.toCSS(o)}),this._styleElement.textContent=(s=this._style)==null?void 0:s.toGlobalCSS()),{width:r+n.padding*2,height:l+n.padding*2}}updateText(t=!0){const{style:e,canvas:s,context:i}=this;if(this.localStyleID!==e.styleID&&(this.dirty=!0,this.localStyleID=e.styleID),!this.dirty&&t)return;const{width:n,height:o}=this.measureText();if(s.width=Math.ceil(Math.max(1,n)),s.height=Math.ceil(Math.max(1,o)),!this._loading){const h=this._image,r=new XMLSerializer().serializeToString(this._svgRoot);this._loading=!0,h.src=`data:image/svg+xml;charset=utf8,${encodeURIComponent(r)}`,h.onload=()=>{i.clearRect(0,0,s.width,s.height),i.drawImage(h,0,0,n,o,0,0,n,o),h.src="",h.onload=null,this._loading=!1,this.updateTexture()}}}updateTexture(){const{style:t,texture:e,resolution:s}=this,i=this.canvas,n=this.context;if(t.trim){const{width:r,height:l,data:d}=a.utils.trimCanvas(i);d&&(i.width=r,i.height=l,n.putImageData(d,0,0))}const o=t.trim?0:t.padding,h=e.baseTexture;e.trim.width=e._frame.width=i.width/s,e.trim.height=e._frame.height=i.height/s,e.trim.x=-o,e.trim.y=-o,e.orig.width=e._frame.width-o*2,e.orig.height=e._frame.height-o*2,this._onTextureUpdate(),h.setRealSize(i.width,i.height,s),this.dirty=!1}_render(t){this._autoResolution&&this._resolution!==t.resolution&&(this._resolution=t.resolution,this.dirty=!0),this.updateText(!0),super._render(t)}_renderCanvas(t){this._autoResolution&&this._resolution!==t.resolution&&(this._resolution=t.resolution,this.dirty=!0),this.updateText(!0),super._renderCanvas(t)}getLocalBounds(t){return this.updateText(!0),super.getLocalBounds(t)}_calculateBounds(){this.updateText(!0),this.calculateVertices(),this._bounds.addQuad(this.vertexData)}_onStyleChange(){this.dirty=!0}destroy(t){var e,s,i,n,o,h;typeof t=="boolean"&&(t={children:t}),t=Object.assign({},g.defaultDestroyOptions,t),super.destroy(t);const r=null;this.context=null,this.canvas&&(this.canvas.width=this.canvas.height=0),this.ownsStyle&&((e=this._style)==null||e.cleanFonts()),this.canvas=r,this._style=r,(s=this._svgRoot)==null||s.remove(),this._svgRoot=r,(i=this._domElement)==null||i.remove(),this._domElement=r,(n=this._foreignObject)==null||n.remove(),this._foreignObject=r,(o=this._styleElement)==null||o.remove(),this._styleElement=r,(h=this._shadow)==null||h.remove(),this._shadow=r,this._shadowRoot=r,this._image.onload=null,this._image.src="",this._image=r}get width(){return this.updateText(!0),Math.abs(this.scale.x)*this.canvas.width/this.resolution}set width(t){this.updateText(!0);const e=a.utils.sign(this.scale.x)||1;this.scale.x=e*t/this.canvas.width/this.resolution,this._width=t}get height(){return this.updateText(!0),Math.abs(this.scale.y)*this.canvas.height/this.resolution}set height(t){this.updateText(!0);const e=a.utils.sign(this.scale.y)||1;this.scale.y=e*t/this.canvas.height/this.resolution,this._height=t}get style(){return this._style}set style(t){this._style!==t&&(t=t||{},t instanceof c?(this.ownsStyle=!1,this._style=t):t instanceof x.TextStyle?(console.warn("[HTMLText] Cloning TextStyle, if this is not what you want, use HTMLTextStyle"),this.ownsStyle=!0,this._style=c.from(t)):(this.ownsStyle=!0,this._style=new c(t)),this.localStyleID=-1,this.dirty=!0)}get text(){return this._text}set text(t){t=String(t===""||t===null||t===void 0?" ":t),t=this.sanitiseText(t),this._text!==t&&(this._text=t,this.dirty=!0)}get resolution(){return this._resolution}set resolution(t){this._autoResolution=!1,this._resolution!==t&&(this._resolution=t,this.dirty=!0)}sanitiseText(t){return t.replace(/<br>/gi,"<br/>").replace(/<hr>/gi,"<hr/>").replace(/&nbsp;/gi,"&#160;")}};let p=g;p.defaultDestroyOptions={texture:!0,children:!1,baseTexture:!0},p.defaultMaxWidth=2024,p.defaultMaxHeight=2024,p.defaultAutoResolution=!0,exports.HTMLText=p,exports.HTMLTextStyle=c;
 //# sourceMappingURL=html-text.cjs.js.map

dist/html-text.d.ts

@@ -0,3 +1,5 @@
+import { ICanvas } from '@pixi/core';
 import type { IDestroyOptions } from '@pixi/display';
 import type { IRenderer } from '@pixi/core';
+import { ISize } from '@pixi/core';
 import type { ITextStyle } from '@pixi/text';
@@ -8,2 +10,5 @@ import { Rectangle } from '@pixi/core';
 import { TextStyle } from '@pixi/text';
+import { TextStyleFontStyle } from '@pixi/text';
+import { TextStyleFontWeight } from '@pixi/text';
+import type { TextStyleTextBaseline } from '@pixi/text';
 
@@ -18,3 +23,24 @@ /**
 export declare class HTMLText extends Sprite {
+    /**
+     * Default opens when destroying.
+     * @type {PIXI.IDestroyOptions}
+     * @property {boolean} texture=true - Whether to destroy the texture.
+     * @property {boolean} children=false - Whether to destroy the children.
+     * @property {boolean} baseTexture=true - Whether to destroy the base texture.
+     */
+    static defaultDestroyOptions: IDestroyOptions;
+    /** Default maxWidth, set at construction */
+    static defaultMaxWidth: number;
+    /** Default maxHeight, set at construction */
+    static defaultMaxHeight: number;
+    /** Default resolution, make sure autoResolution or defaultAutoResolution is `false`. */
+    static defaultResolution: number | undefined;
+    /** Default autoResolution for all HTMLText objects */
+    static defaultAutoResolution: boolean;
+    /** The maximum width in rendered pixels that the content can be, any larger will be hidden */
+    maxWidth: number;
+    /** The maximum height in rendered pixels that the content can be, any larger will be hidden */
+    maxHeight: number;
     private _domElement;
+    private _styleElement;
     private _svgRoot;
@@ -30,12 +56,33 @@ private _foreignObject;
     private _loading;
+    private _shadow;
+    private _shadowRoot;
     private localStyleID;
     private dirty;
+    /** The HTMLTextStyle object is owned by this instance */
+    private ownsStyle;
     /**
      * @param {string} [text] - Text contents
-     * @param {PIXI.TextStyle} [style] - Style settings, not all TextStyle options are supported.
+     * @param {HTMLTextStyle|PIXI.TextStyle|PIXI.ITextStyle} [style] - Style setting to use.
+     *        Strongly recommend using an HTMLTextStyle object. Providing a PIXI.TextStyle
+     *        will convert the TextStyle to an HTMLTextStyle and will no longer be linked.
      * @param {HTMLCanvasElement} [canvas] - Optional canvas to use for rendering.
      *.       if undefined, will generate it's own canvas using createElement.
      */
-    constructor(text?: string, style?: TextStyle | Partial<ITextStyle>, canvas?: HTMLCanvasElement);
+    constructor(text?: string, style?: HTMLTextStyle | TextStyle | Partial<ITextStyle>, canvas?: ICanvas);
     /**
+     * Calculate the size of the output text without actually drawing it.
+     * This includes the `padding` in the `style` object.
+     * This can be used as a fast-pass to do things like text-fitting.
+     * @param {object} [overrides] - Overrides for the text, style, and resolution.
+     * @param {string} [overrides.text] - The text to measure, if not specified, the current text is used.
+     * @param {HTMLTextStyle} [overrides.style] - The style to measure, if not specified, the current style is used.
+     * @param {number} [overrides.resolution] - The resolution to measure, if not specified, the current resolution is used.
+     * @return {PIXI.ISize} Width and height of the measured text.
+     */
+    measureText(overrides?: {
+        text?: string;
+        style?: HTMLTextStyle;
+        resolution?: number;
+    }): ISize;
+    /**
      * Manually refresh the text.
@@ -96,9 +143,6 @@ * @public
     set height(value: number);
+    /** The base style to render with text. */
+    get style(): HTMLTextStyle;
+    set style(style: HTMLTextStyle | TextStyle | Partial<ITextStyle>);
     /**
-     * The base style to render with text.
-     * @member {PIXI.TextStyle}
-     */
-    get style(): TextStyle;
-    set style(style: TextStyle | Partial<ITextStyle>);
-    /**
      * Contents of text. This can be HTML text and include tags.
@@ -119,5 +163,130 @@ * @example
     set resolution(value: number);
-    sanitiseText(text: string): string;
+    /**
+     * Sanitise text - replace `<br>` with `<br/>`, `&nbsp;` with `&#160;`
+     * @see https://www.sitepoint.com/community/t/xhtml-1-0-transitional-xml-parsing-error-entity-nbsp-not-defined/3392/3
+     */
+    private sanitiseText;
 }
 
+/**
+ * Used internally to restrict text style usage and convert easily to CSS.
+ * @class
+ * @extends PIXI.TextStyle
+ * @see {@link https://pixijs.download/dev/docs/PIXI.TextStyle.html PIXI.TextStyle}
+ * @param {PIXI.ITextStyle|IHTMLTextStyle} [style] - Style to copy.
+ */
+export declare class HTMLTextStyle extends TextStyle {
+    /** The collection of installed fonts */
+    static availableFonts: Record<string, IHTMLFont>;
+    /**
+     * List of default options, these are largely the same as TextStyle,
+     * with the exception of whiteSpace, which is set to 'normal' by default.
+     */
+    static readonly defaultOptions: IHTMLTextStyle;
+    /** For using custom fonts */
+    private _fonts;
+    /** List of internal style rules */
+    private _overrides;
+    /** Global rules or stylesheet, useful for creating rules for rendering */
+    private _stylesheet;
+    /**
+     * Convert a TextStyle to HTMLTextStyle
+     * @example
+     * import {TextStyle } from 'pixi.js';
+     * import {HTMLTextStyle} from '@pixi/text-html';
+     * const style = new TextStyle();
+     * const htmlStyle = HTMLTextStyle.from(style);
+     */
+    static from(originalStyle: TextStyle | Partial<IHTMLTextStyle>): HTMLTextStyle;
+    /** Clear the current font */
+    cleanFonts(): void;
+    /** Because of how HTMLText renders, fonts need to be imported */
+    loadFont(url: string, options?: Partial<Pick<IHTMLFont, 'weight' | 'style' | 'family'>>): Promise<void>;
+    /**
+     * Add a style override, this can be any CSS property
+     * it will override any built-in style. This is the
+     * property and the value as a string (e.g., `color: red`).
+     * This will override any other internal style.
+     * @param {string} value - CSS style(s) to add.
+     * @example
+     * style.addOverride('background-color: red');
+     */
+    addOverride(...value: string[]): void;
+    /**
+     * Remove any overrides that match the value.
+     * @param {string} value - CSS style to remove.
+     * @example
+     * style.removeOverride('background-color: red');
+     */
+    removeOverride(...value: string[]): void;
+    /**
+     * Internally converts all of the style properties into CSS equivalents.
+     * @return The CSS style string, for setting `style` property of root HTMLElement.
+     */
+    toCSS(scale: number): string;
+    /** Get the font CSS styles from the loaded font, If available. */
+    toGlobalCSS(): string;
+    /** Internal stylesheet contents, useful for creating rules for rendering */
+    get stylesheet(): string;
+    set stylesheet(value: string);
+    /** Convert numerical colors into hex-strings */
+    private normalizeColor;
+    /** Convert the internal drop-shadow settings to CSS text-shadow */
+    private dropShadowToCSS;
+    /** Resets all properties to the defaults specified in TextStyle.prototype._default */
+    reset(): void;
+    /** Proving that Safari is the new IE */
+    private get isSafari();
+    /** @ignore fillGradientStops is not supported by HTMLText */
+    set fillGradientStops(_value: number[]);
+    get fillGradientStops(): number[];
+    /** @ignore fillGradientType is not supported by HTMLText */
+    set fillGradientType(_value: number);
+    get fillGradientType(): number;
+    /** @ignore miterLimit is not supported by HTMLText */
+    set miterLimit(_value: number);
+    get miterLimit(): number;
+    /** @ignore textBaseline is not supported by HTMLText */
+    set textBaseline(_value: TextStyleTextBaseline);
+    get textBaseline(): TextStyleTextBaseline;
+}
+
+export declare type HTMLTextStyleWhiteSpace = 'normal' | 'pre' | 'pre-line' | 'nowrap' | 'pre-wrap';
+
+/**
+ * Font information for HTMLText
+ */
+declare interface IHTMLFont {
+    /** User-supplied URL request */
+    originalUrl: string;
+    /** Base64 string for font */
+    dataSrc: string;
+    /** FontFace installed in the document */
+    fontFace: FontFace | null;
+    /** Blob-based URL for font */
+    src: string;
+    /** Family name of font */
+    family: string;
+    /** Weight of the font */
+    weight: TextStyleFontWeight;
+    /** Style of the font */
+    style: TextStyleFontStyle;
+    /** Reference counter */
+    refs: number;
+}
+
+/**
+ * Modifed versions from ITextStyle.
+ * @extends ITextStyle
+ */
+export declare interface IHTMLTextStyle extends Omit<ITextStyle, ITextStyleIgnore> {
+    /**
+     * White-space with expanded options
+     * @type {'normal'|'pre'|'pre-line'|'nowrap'|'pre-wrap'}
+     */
+    whiteSpace: HTMLTextStyleWhiteSpace;
+}
+
+declare type ITextStyleIgnore = 'whiteSpace' | 'fillGradientStops' | 'fillGradientType' | 'miterLimit' | 'textBaseline';
+
 export { }

dist/html-text.js

 /*!
- * @pixi/text-html - v3.0.3
- * Compiled Fri, 04 Nov 2022 11:21:34 UTC
+ * @pixi/text-html - v3.1.0
+ * Compiled Thu, 15 Dec 2022 21:37:38 UTC
  *
  * @pixi/text-html is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
- */var _pixi_htmltext=function(c,_,a,p){"use strict";class w extends _.Sprite{constructor(e="",t={},h){h=h||document.createElement("canvas"),h.width=3,h.height=3;const o=a.Texture.from(h,{scaleMode:a.settings.SCALE_MODE});o.orig=new a.Rectangle,o.trim=new a.Rectangle,super(o),this._text=null,this._style=null,this._autoResolution=!0,this._loading=!1,this.localStyleID=-1,this.dirty=!1;const r="http://www.w3.org/2000/svg",i=document.createElementNS(r,"svg"),n=document.createElementNS(r,"foreignObject"),l=document.createElementNS("http://www.w3.org/1999/xhtml","div");n.setAttribute("height","100%"),n.setAttribute("width","100%"),i.appendChild(n),this._domElement=l,this._svgRoot=i,this._foreignObject=n,this._image=new Image,this.canvas=h,this.context=h.getContext("2d"),this._resolution=a.settings.RESOLUTION,this.text=e,this.style=t}updateText(e=!0){const{style:t,resolution:h}=this,o=this.canvas,r=this.context;if(this.localStyleID!==t.styleID&&(this.dirty=!0,this.localStyleID=t.styleID),!this.dirty&&e)return;let i=`
-            display:inline-block;
-            color:${t.fill};
-            font-size: ${t.fontSize}px;
-            font-family:${t.fontFamily};
-            font-weight:${t.fontWeight};
-            font-style:${t.fontStyle};
-            font-variant:${t.fontVariant};
-            letter-spacing:${t.letterSpacing}px;
-            text-align:${t.align};
-            padding:${t.padding}px;
-        `;if(t.lineHeight&&(i+=`line-height:${t.lineHeight}px;`),t.wordWrap&&(i+=`word-wrap:${t.breakWords?"break-all":"break-word"};`,i+=`max-width:${t.wordWrapWidth}px;`),t.strokeThickness){let{stroke:s}=t;typeof s=="number"&&(s=a.utils.hex2string(s)),i+=`-webkit-text-stroke-width: ${t.strokeThickness}px;`,i+=`-webkit-text-stroke-color: ${s};`,i+=`text-stroke-width: ${t.strokeThickness}px;`,i+=`text-stroke-color: ${s};`,i+="paint-order: stroke;"}if(t.dropShadow){const{dropShadowAngle:s,dropShadowDistance:g,dropShadowBlur:m,dropShadowColor:y,dropShadowAlpha:x}=t,f=Math.round(Math.cos(s)*g),v=Math.round(Math.sin(s)*g);let d=y;if(typeof d=="number"&&(d=a.utils.hex2string(d)),d.charAt(0)==="#"&&x<1){const[b,S,T]=a.utils.hex2rgb(parseInt(d.replace("#",""),16));d=`rgba(${b*255|0}, ${S*255|0}, ${T*255|0}, ${x})`}i+=`text-shadow: ${f}px ${v}px ${m}px ${d};`}const n=this._domElement;Object.assign(n,{innerHTML:this._text,style:i}),document.body.appendChild(n);const{width:l,height:u}=n.getBoundingClientRect();if(document.body.removeChild(n),this._foreignObject.appendChild(n),this._svgRoot.setAttribute("width",l.toString()),this._svgRoot.setAttribute("height",u.toString()),o.width=Math.ceil((Math.max(1,l)+t.padding*2)*h),o.height=Math.ceil((Math.max(1,u)+t.padding*2)*h),!this._loading){const s=this._image,g=new XMLSerializer().serializeToString(this._svgRoot);this._loading=!0,s.src=`data:image/svg+xml;charset=utf8,${encodeURIComponent(g)}`,s.onload=()=>{r.scale(h,h),r.clearRect(0,0,o.width,o.height),r.drawImage(s,0,0,l,u,0,0,l,u),s.src="",s.onload=null,this._loading=!1,this.updateTexture()}}}updateTexture(){const{style:e,texture:t,resolution:h}=this,o=this.canvas,r=this.context;if(e.trim){const{width:l,height:u,data:s}=a.utils.trimCanvas(o);s&&(o.width=l,o.height=u,r.putImageData(s,0,0))}const i=e.trim?0:e.padding,n=t.baseTexture;t.trim.width=t._frame.width=o.width/h,t.trim.height=t._frame.height=o.height/h,t.trim.x=-i,t.trim.y=-i,t.orig.width=t._frame.width-i*2,t.orig.height=t._frame.height-i*2,this._onTextureUpdate(),n.setRealSize(o.width,o.height,h),this.dirty=!1}_render(e){this._autoResolution&&this._resolution!==e.resolution&&(this._resolution=e.resolution,this.dirty=!0),this.updateText(!0),super._render(e)}_renderCanvas(e){this._autoResolution&&this._resolution!==e.resolution&&(this._resolution=e.resolution,this.dirty=!0),this.updateText(!0),super._renderCanvas(e)}getLocalBounds(e){return this.updateText(!0),super.getLocalBounds(e)}_calculateBounds(){this.updateText(!0),this.calculateVertices(),this._bounds.addQuad(this.vertexData)}_onStyleChange(){this.dirty=!0}destroy(e){super.destroy(e);const t=null;this.context=null,this.canvas&&(this.canvas.width=this.canvas.height=0),this.canvas=t,this._style=t,this._svgRoot=t,this._domElement=t,this._foreignObject=t,this._image.onload=null,this._image.src="",this._image=t}get width(){return this.updateText(!0),Math.abs(this.scale.x)*this.canvas.width/this.resolution}set width(e){this.updateText(!0);const t=a.utils.sign(this.scale.x)||1;this.scale.x=t*e/this.canvas.width/this.resolution,this._width=e}get height(){return this.updateText(!0),Math.abs(this.scale.y)*this.canvas.height/this.resolution}set height(e){this.updateText(!0);const t=a.utils.sign(this.scale.y)||1;this.scale.y=t*e/this.canvas.height/this.resolution,this._height=e}get style(){return this._style}set style(e){e=e||{},e instanceof p.TextStyle?this._style=e:this._style=new p.TextStyle(e),this.localStyleID=-1,this.dirty=!0}get text(){return this._text}set text(e){e=String(e===""||e===null||e===void 0?" ":e),e=this.sanitiseText(e),this._text!==e&&(this._text=e,this.dirty=!0)}get resolution(){return this._resolution}set resolution(e){this._autoResolution=!1,this._resolution!==e&&(this._resolution=e,this.dirty=!0)}sanitiseText(e){return e.replace(/<br>/gi,"<br/>").replace(/<hr>/gi,"<hr/>").replace(/&nbsp;/gi,"&#160;")}}return c.HTMLText=w,c}({},PIXI,PIXI,PIXI);Object.assign(PIXI,_pixi_htmltext);
+ */var _pixi_htmltext=function(y,S,l,m){"use strict";var b=Object.defineProperty,T=Object.defineProperties,v=Object.getOwnPropertyDescriptors,f=Object.getOwnPropertySymbols,M=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable,_=(t,e,s)=>e in t?b(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,R=(t,e)=>{for(var s in e||(e={}))M.call(e,s)&&_(t,s,e[s]);if(f)for(var s of f(e))O.call(e,s)&&_(t,s,e[s]);return t},C=(t,e)=>T(t,v(e));const u=class extends m.TextStyle{constructor(){super(...arguments),this._fonts=[],this._overrides=[],this._stylesheet=""}static from(t){return new u(Object.keys(u.defaultOptions).reduce((e,s)=>C(R({},e),{[s]:t[s]}),{}))}cleanFonts(){this._fonts.length>0&&(this._fonts.forEach(t=>{URL.revokeObjectURL(t.src),t.refs--,t.refs===0&&(t.fontFace&&document.fonts.delete(t.fontFace),delete u.availableFonts[t.originalUrl])}),this.fontFamily="Arial",this._fonts.length=0,this.styleID++)}loadFont(t,e={}){const{availableFonts:s}=u;if(s[t]){const i=s[t];return this._fonts.push(i),i.refs++,this.styleID++,Promise.resolve()}return l.settings.ADAPTER.fetch(t).then(i=>i.blob()).then(async i=>new Promise((h,o)=>{const a=URL.createObjectURL(i),n=new FileReader;n.onload=()=>h([a,n.result]),n.onerror=o,n.readAsDataURL(i)})).then(async([i,h])=>{const o=Object.assign({family:l.utils.path.basename(t,l.utils.path.extname(t)),weight:"normal",style:"normal",src:i,dataSrc:h,refs:1,originalUrl:t,fontFace:null},e);s[t]=o,this._fonts.push(o),this.styleID++;const a=new FontFace(o.family,`url(${o.src})`,{weight:o.weight,style:o.style});o.fontFace=a,await a.load(),document.fonts.add(a),await document.fonts.ready,this.styleID++})}addOverride(...t){const e=t.filter(s=>!this._overrides.includes(s));e.length>0&&(this._overrides.push(...e),this.styleID++)}removeOverride(...t){const e=t.filter(s=>this._overrides.includes(s));e.length>0&&(this._overrides=this._overrides.filter(s=>!e.includes(s)),this.styleID++)}toCSS(t){return["display: inline-block",`color: ${this.normalizeColor(this.fill)}`,`font-size: ${this.fontSize*t}px`,`font-family: ${this.fontFamily}`,`font-weight: ${this.fontWeight}`,`font-style: ${this.fontStyle}`,`font-variant: ${this.fontVariant}`,`letter-spacing: ${this.letterSpacing*t}px`,`text-align: ${this.align}`,`padding: ${this.padding*t}px`,`white-space: ${this.whiteSpace}`,...this.lineHeight?[`line-height: ${this.lineHeight*t}px`]:[],...this.wordWrap?[`word-wrap: ${this.breakWords?"break-all":"break-word"}`,`max-width: ${this.wordWrapWidth*t}px`]:[],...this.strokeThickness?[`-webkit-text-stroke-width: ${this.strokeThickness*t}px`,`-webkit-text-stroke-color: ${this.normalizeColor(this.stroke)}`,`text-stroke-width: ${this.strokeThickness*t}px`,`text-stroke-color: ${this.normalizeColor(this.stroke)}`,"paint-order: stroke"]:[],...this.dropShadow?[this.dropShadowToCSS(t)]:[],...this._overrides].join(";")}toGlobalCSS(){return this._fonts.reduce((t,e)=>`${t}
+            @font-face {
+                font-family: "${e.family}";
+                src: url('${e.dataSrc}');
+                font-weight: ${e.weight};
+                font-style: ${e.style}; 
+            }`,this._stylesheet)}get stylesheet(){return this._stylesheet}set stylesheet(t){this._stylesheet!==t&&(this._stylesheet=t,this.styleID++)}normalizeColor(t){return Array.isArray(t)&&(t=l.utils.rgb2hex(t)),typeof t=="number"?l.utils.hex2string(t):t}dropShadowToCSS(t){let e=this.normalizeColor(this.dropShadowColor);const s=this.dropShadowAlpha,i=Math.round(Math.cos(this.dropShadowAngle)*this.dropShadowDistance);let h=Math.round(Math.sin(this.dropShadowAngle)*this.dropShadowDistance);e.startsWith("#")&&s<1&&(e+=(s*255|0).toString(16).padStart(2,"0")),this.isSafari&&(h*=-1);const o=`${i*t}px ${h*t}px`;return this.dropShadowBlur>0?`text-shadow: ${o} ${this.dropShadowBlur}px ${e}`:`text-shadow: ${o} ${e}`}reset(){Object.assign(this,u.defaultOptions)}get isSafari(){const{userAgent:t}=l.settings.ADAPTER.getNavigator();return/^((?!chrome|android).)*safari/i.test(t)}set fillGradientStops(t){console.warn("[HTMLTextStyle] fillGradientStops is not supported by HTMLText")}get fillGradientStops(){return super.fillGradientStops}set fillGradientType(t){console.warn("[HTMLTextStyle] fillGradientType is not supported by HTMLText")}get fillGradientType(){return super.fillGradientType}set miterLimit(t){console.warn("[HTMLTextStyle] miterLimit is not supported by HTMLText")}get miterLimit(){return super.miterLimit}set textBaseline(t){console.warn("[HTMLTextStyle] textBaseline is not supported by HTMLText")}get textBaseline(){return super.textBaseline}};let c=u;c.availableFonts={},c.defaultOptions={align:"left",breakWords:!1,dropShadow:!1,dropShadowAlpha:1,dropShadowAngle:Math.PI/6,dropShadowBlur:0,dropShadowColor:"black",dropShadowDistance:5,fill:"black",fontFamily:"Arial",fontSize:26,fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",letterSpacing:0,lineHeight:0,lineJoin:"miter",padding:0,stroke:"black",strokeThickness:0,trim:!1,whiteSpace:"normal",wordWrap:!1,wordWrapWidth:100,leading:0};const g=class extends S.Sprite{constructor(t="",e={},s){var i;s=s||l.settings.ADAPTER.createCanvas(3,3);const h=l.Texture.from(s,{scaleMode:l.settings.SCALE_MODE});h.orig=new l.Rectangle,h.trim=new l.Rectangle,super(h),this._text=null,this._style=null,this._autoResolution=!0,this._loading=!1,this.localStyleID=-1,this.dirty=!1,this.ownsStyle=!1;const o="http://www.w3.org/2000/svg",a="http://www.w3.org/1999/xhtml",n=document.createElement("div"),r=document.createElementNS(o,"svg"),d=document.createElementNS(o,"foreignObject"),w=document.createElementNS(a,"div"),x=document.createElementNS(a,"style");d.setAttribute("width","10000"),d.setAttribute("height","10000"),d.style.overflow="hidden",r.appendChild(d),this.maxWidth=g.defaultMaxWidth,this.maxHeight=g.defaultMaxHeight,this._shadow=n,this._domElement=w,this._styleElement=x,this._svgRoot=r,this._foreignObject=d,this._foreignObject.appendChild(x),this._foreignObject.appendChild(w),this._image=new Image,this._autoResolution=g.defaultAutoResolution,this._shadowRoot=n.attachShadow({mode:"open"}),this._shadowRoot.appendChild(r),n.setAttribute("data-pixi-html-text","1"),Object.assign(n.style,{position:"absolute",top:"0",left:"-1px",width:"1px",height:"1px"}),document.body.appendChild(n),this.canvas=s,this.context=s.getContext("2d"),this._resolution=(i=g.defaultResolution)!=null?i:l.settings.RESOLUTION,this.text=t,this.style=e}measureText(t){var e,s;const{text:i,style:h,resolution:o}=Object.assign({text:this._text,style:this._style,resolution:this._resolution},t);Object.assign(this._domElement,{innerHTML:i,style:h.toCSS(o)}),this._styleElement.textContent=h.toGlobalCSS();const a=this._domElement.getBoundingClientRect(),n=Math.min(this.maxWidth,Math.ceil(a.width)),r=Math.min(this.maxHeight,Math.ceil(a.height));return this._svgRoot.setAttribute("width",n.toString()),this._svgRoot.setAttribute("height",r.toString()),i!==this._text&&(this._domElement.innerHTML=this._text),h!==this._style&&(Object.assign(this._domElement,{style:(e=this._style)==null?void 0:e.toCSS(o)}),this._styleElement.textContent=(s=this._style)==null?void 0:s.toGlobalCSS()),{width:n+h.padding*2,height:r+h.padding*2}}updateText(t=!0){const{style:e,canvas:s,context:i}=this;if(this.localStyleID!==e.styleID&&(this.dirty=!0,this.localStyleID=e.styleID),!this.dirty&&t)return;const{width:h,height:o}=this.measureText();if(s.width=Math.ceil(Math.max(1,h)),s.height=Math.ceil(Math.max(1,o)),!this._loading){const a=this._image,n=new XMLSerializer().serializeToString(this._svgRoot);this._loading=!0,a.src=`data:image/svg+xml;charset=utf8,${encodeURIComponent(n)}`,a.onload=()=>{i.clearRect(0,0,s.width,s.height),i.drawImage(a,0,0,h,o,0,0,h,o),a.src="",a.onload=null,this._loading=!1,this.updateTexture()}}}updateTexture(){const{style:t,texture:e,resolution:s}=this,i=this.canvas,h=this.context;if(t.trim){const{width:n,height:r,data:d}=l.utils.trimCanvas(i);d&&(i.width=n,i.height=r,h.putImageData(d,0,0))}const o=t.trim?0:t.padding,a=e.baseTexture;e.trim.width=e._frame.width=i.width/s,e.trim.height=e._frame.height=i.height/s,e.trim.x=-o,e.trim.y=-o,e.orig.width=e._frame.width-o*2,e.orig.height=e._frame.height-o*2,this._onTextureUpdate(),a.setRealSize(i.width,i.height,s),this.dirty=!1}_render(t){this._autoResolution&&this._resolution!==t.resolution&&(this._resolution=t.resolution,this.dirty=!0),this.updateText(!0),super._render(t)}_renderCanvas(t){this._autoResolution&&this._resolution!==t.resolution&&(this._resolution=t.resolution,this.dirty=!0),this.updateText(!0),super._renderCanvas(t)}getLocalBounds(t){return this.updateText(!0),super.getLocalBounds(t)}_calculateBounds(){this.updateText(!0),this.calculateVertices(),this._bounds.addQuad(this.vertexData)}_onStyleChange(){this.dirty=!0}destroy(t){var e,s,i,h,o,a;typeof t=="boolean"&&(t={children:t}),t=Object.assign({},g.defaultDestroyOptions,t),super.destroy(t);const n=null;this.context=null,this.canvas&&(this.canvas.width=this.canvas.height=0),this.ownsStyle&&((e=this._style)==null||e.cleanFonts()),this.canvas=n,this._style=n,(s=this._svgRoot)==null||s.remove(),this._svgRoot=n,(i=this._domElement)==null||i.remove(),this._domElement=n,(h=this._foreignObject)==null||h.remove(),this._foreignObject=n,(o=this._styleElement)==null||o.remove(),this._styleElement=n,(a=this._shadow)==null||a.remove(),this._shadow=n,this._shadowRoot=n,this._image.onload=null,this._image.src="",this._image=n}get width(){return this.updateText(!0),Math.abs(this.scale.x)*this.canvas.width/this.resolution}set width(t){this.updateText(!0);const e=l.utils.sign(this.scale.x)||1;this.scale.x=e*t/this.canvas.width/this.resolution,this._width=t}get height(){return this.updateText(!0),Math.abs(this.scale.y)*this.canvas.height/this.resolution}set height(t){this.updateText(!0);const e=l.utils.sign(this.scale.y)||1;this.scale.y=e*t/this.canvas.height/this.resolution,this._height=t}get style(){return this._style}set style(t){this._style!==t&&(t=t||{},t instanceof c?(this.ownsStyle=!1,this._style=t):t instanceof m.TextStyle?(console.warn("[HTMLText] Cloning TextStyle, if this is not what you want, use HTMLTextStyle"),this.ownsStyle=!0,this._style=c.from(t)):(this.ownsStyle=!0,this._style=new c(t)),this.localStyleID=-1,this.dirty=!0)}get text(){return this._text}set text(t){t=String(t===""||t===null||t===void 0?" ":t),t=this.sanitiseText(t),this._text!==t&&(this._text=t,this.dirty=!0)}get resolution(){return this._resolution}set resolution(t){this._autoResolution=!1,this._resolution!==t&&(this._resolution=t,this.dirty=!0)}sanitiseText(t){return t.replace(/<br>/gi,"<br/>").replace(/<hr>/gi,"<hr/>").replace(/&nbsp;/gi,"&#160;")}};let p=g;return p.defaultDestroyOptions={texture:!0,children:!1,baseTexture:!0},p.defaultMaxWidth=2024,p.defaultMaxHeight=2024,p.defaultAutoResolution=!0,y.HTMLText=p,y.HTMLTextStyle=c,y}({},PIXI,PIXI,PIXI);Object.assign(PIXI,_pixi_htmltext);
 //# sourceMappingURL=html-text.js.map

package.json

 {
   "name": "@pixi/text-html",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "Multi-Style Text Rendering Plugin for PixiJS",
@@ -5,0 +5,0 @@ "main": "dist/html-text.cjs.js",

README.md

@@ -7,3 +7,3 @@ # PixiJS HTMLText
 
-* Supports HTML tags for styling such as `<strong>`, or `<em>`, as well as `<span style="">`
+* Supports [HTML tags](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML) 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.
@@ -15,4 +15,3 @@
 * Performance and memory usage is on-par with `PIXI.Text` (that is to say, slow and heavy)
-* Only works with browsers that support [`<foreignObject>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject), i.e., no Internet Explorer support.
-* Only supports [web-safe fonts](https://www.w3schools.com/cssref/css_websafe_fonts.asp) for the `fontFamily` attribute.
+* Only works with browsers that support [`<foreignObject>`](https://caniuse.com/?search=foreignObject).
 
@@ -33,9 +32,4 @@ ## Install
 import { HTMLText } from '@pixi/text-html';
-import { TextStyle } from '@pixi/text';
 
-// Can use the TextStyle class found in @pixi/text
-const style = new TextStyle({ fontSize: 20 });
-
-// Make a new HTMLText object
-const text = new HTMLText("Hello World", style);
+const text = new HTMLText("Hello World", { fontSize: 20 });
 ```
@@ -45,2 +39,23 @@
 
+### 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.
+
+```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 <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
@@ -53,3 +68,3 @@
 * `fill`
-* `fontFamily` (web-safe fonts only)
+* `fontFamily`
 * `fontSize`
@@ -60,6 +75,7 @@ * `fontWeight`
 * `letterSpacing` †
-* `align` (also supports "justify")
+* `align` (also supports `justify` value)
 * `padding`
 * `breakWords`
 * `lineHeight` †
+* `whiteSpace` (also supports `nowrap`, `pre-wrap` values)
 * `wordWrap`
@@ -86,3 +102,2 @@ * `wordWrapWidth`
 * `textBaseline`
-* `whiteSpace`
 
@@ -89,0 +104,0 @@ ## Example

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

172637

increased by104.35%

Lines of code

442

increased by93.86%

Number of lines in readme file

104

increased by16.85%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes