v3.1.0

🎁 Added

Loading Custom Fonts (#30)

Allows the use of non-web fonts by loading the fonts.

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' });
]);

CSS Overrides

Allows settings CSS styles that are not built-in by default.

const text = new HTMLText('Hello World');

text.style.addOverride(
  'background-color: blue',
  'writing-mode: vertical-rl'
);

Global CSS Rules

Setting global rules is now easy using the stylesheet property.

const text = new HTMLText('Hello World');

text.style.stylesheet = `b { color: red }`;

measureText API (#31)

New measureText method which can be used similar to PixiJS' TextMetrics.measureText method. This returns a width and height of the bounds of your text. This method doesn't impact PixiJS rendering so it is therefore faster when attempting to do things like fit text. By default, it uses the built in text, style and resolution, but these things can be overridden.

const text = new HTMLText('Hello world!');
const { width, height } = text.measureText();

🐛 Fixed

• Fix Safari layout issue (#29) @littleboarx
• Fixes cross-browser issues (#30) @bigtimebuddy
  • Safari flips the Y-axis when using text-shadow
  • More consistent to scale style values with resolution than use context.scale when drawing image

🧹 Chores

• Add HTML Tag reference link (#24) @sandeepmishratech