Hi I'm using a combination of New Lines and word wrap - when I do this I get really odd layout. (Pixi 3.0.10)

 this.MULTI_STYLE_TEXT =  {
        default: { font: "14px proxima-nova-alt-regular", fill: "#000000",align: "left",stroke: "#FFFFFF", strokeThickness: 0  },
        h: {font: "20px proxima-nova-alt-bold" },
        h1: {font: "18px proxima-nova-alt-bold"},
        h2: {font: "14px proxima-nova-alt-bold" },
        h3: {font: "16px proxima-nova-alt-bold" },
        normal:{font: "14px proxima-nova-alt-regular" },
        p:{font: "14px proxima-nova-alt-regular" },
        br:{font: "14px proxima-nova-alt-regular" }
       
    };
this.txt = new PIXI.MultiStyleText(cText,this.MULTI_STYLE_TEXT,{align:"left",wordWrap: true, wordWrapWidth:520 } );

The formatting tags are not compatible with each other.

This shows italic only:

This shows bold only:

This shows the words in italic, except for the bold word:

actual result:
to interact with the tree
expected result:
to interact with the tree

Tested on GDevelop (4ian/GDevelop#1622)

Hi Tommy

I love pixi-multistyle-text! Very well done!

But after testing it on hi-res displays (iPad retina and a modern Android phone) I noticed that the text looks blurry. So I decided to try and fix it. The solution is rather simple, though.

Just change the value of this.resolution (which apparently is aways 1) to window.devicePixelRatio || 1;

I couldn't find out where you set this.resolution in your code, so I just overwrote it

from:

this.texture.baseTexture.resolution = this.resolution;

to:

this.resolution = window.devicePixelRatio || 1;
this.texture.baseTexture.resolution = this.resolution;

I hope this helps. Keep up the good work!

This throws deprecation warnings when used with pixi 4.5.

I can help out with PR.

It would be great to also have a test suite to make sure we don't introduce any regressions.

I'm not sure the best way to do it but one way I have in mind is that we can create snapshot of the final image it has to produce.

Hi, first of all thank you for this amazing library.

I am experiencing a problem, where for characters like "Ů" have their upper part cut and characters like "ლ" are missing the bottom part.

It seems like the property "padding" is not working correctly. Is there a way to fix this?

It's really an important feature, will pixi-multistyle-text support it?

Whatever I do, I can't get text to center automagically. The only working way is to strategically insert line breaks, but that's sadly not feasible for my project =( Anyone else experience this?

Also it looks like html tags mess with line widths:

No tags: http://i.imgur.com/nVKcC6L.png
Tags: http://i.imgur.com/Qhc8X1u.png

Really like this plugin btw! Keep up the great work!

Hiya.

First of all, loving the idea on this, looks great so far :)

Problem I've got is I can't compile the .ts!

I get the following error

C:\Projects\WebGL\pixi-multistyle-text-themoonrat>npm run build

[email protected] build C:\Projects\WebGL\pixi-multistyle-text-themoonrat
tsc; browserify index.js -p tsify -s MultiStyleText -o dist/pixi-multistyle-text.js -d

error TS5023: Unknown compiler option 's'.
error TS5023: Unknown compiler option 'o'.

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v6.9.1
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: tsc; browserify index.js -p tsify -s MultiStyleText -o dist/pixi-multistyle-text.js -d
npm ERR! Exit status 1

Would it be feasible to add an option to use [] instead of <> ? It will basically enable this to be used as a bbcode parser in pixi.

• If dropShadowDistance is too big, then drop shadows get cut off.
• dropShadowBlur seems to do nothing at all.
• If one text style has a drop shadow that should be behind previous text, it is instead drawn on top of the previous text.
• dropShadowAngle is measured from the wrong base angle.

Im getting errors trying to build, maybe Im not doing it right but I cant get the demo working at all. This is the output after running npm install:

$ npm install
npm WARN prepublish-on-install As of npm@5, `prepublish` scripts are deprecated.
npm WARN prepublish-on-install Use `prepare` for build steps and `prepublishOnly` for upload-only.
npm WARN prepublish-on-install See the deprecation note in `npm help scripts` for more information.

> [email protected] prepublish C:\Users\anpe10\Downloads\pixi-multistyle-text-0.5.0\pixi-multistyle-text-0.5.0
> npm run build

npm WARN invalid config loglevel="notice"

> [email protected] build C:\Users\anpe10\Downloads\pixi-multistyle-text-0.5.0\pixi-multistyle-text-0.5.0
> tsc && browserify index.js -p tsify -s MultiStyleText -o dist/pixi-multistyle-text.js -d

225                     this.context.font = PIXI.Text.getFontStyle(outputTextData[i][j].style);
~~~~~~~~~~~
pixi-multistyle-text.ts(225,35): error TS2339: Property 'getFontStyle' does not exist on type 'typeof Text'.
232                     outputTextData[i][j].fontProperties = PIXI.Text.calculateFontProperties(this.context.font);
  ~~~~~~~~~~~~~~~~~~~~~~~
pixi-multistyle-text.ts(232,53): error TS2339: Property 'calculateFontProperties' does not exist on type 'typeof Text'.

324             this.context.font = PIXI.Text.getFontStyle(style);                                           ~~~~~~~~~~~~
pixi-multistyle-text.ts(324,34): error TS2339: Property 'getFontStyle' does not exist on type 'typeof Text'.
342             this.context.font = PIXI.Text.getFontStyle(style);
pixi-multistyle-text.ts(342,34): error TS2339: Property 'getFontStyle' does not exist on type 'typeof Text'.
388     this.context.font = PIXI.Text.getFontStyle(this.textStyles["default"]);
pixi-multistyle-text.ts(388,33): error TS2339: Property 'getFontStyle' does not exist on type 'typeof Text'.
407                                     this.context.font = PIXI.Text.getFontStyle(styleStack[styleStack.length - 1]);
pixi-multistyle-text.ts(407,37): error TS2339: Property 'getFontStyle' does not exist on type 'typeof Text'.

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `tsc && browserify index.js -p tsify -s MultiStyleText -o dist/pixi-multistyle-text.js -d`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\anpe10\AppData\Roaming\npm-cache\_logs\2017-10-03T12_56_53_295Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] prepublish: `npm run build`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] prepublish script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Runing tsc gives the same errors:

225                     this.context.font = PIXI.Text.getFontStyle(outputTextData[i][j].style);
pixi-multistyle-text.ts(225,35): error TS2339: Property 'getFontStyle' does not exist on type 'typeof Text'.
232                     outputTextData[i][j].fontProperties = PIXI.Text.calculateFontProperties(this.context.font);
pixi-multistyle-text.ts(232,53): error TS2339: Property 'calculateFontProperties' does not exist on type 'typeof Text'.

Thanks

Currently, using breakWords to allow line breaks caused by word wrapping to occur mid-word causes tags to be broken. Obviously, the width of the tags shouldn't be included in the width of the text.

Fixing this would probably require overriding PIXI.Text's wordWrap method to not count the tags when computing widths.

Independently of stroke thickness. Seemingly unrelated to #22.

Orignially reported by @rknDA1337 in #19.

let textSample = new MultiStyleText("A <red>space rocket</red> is required to get to <blue>the moon</blue>.  The cost is <green>100,000</green> dogecoins.  Get help from the friendly shibes in order to acquire dogecoins faster!", {
	default: {
		fontFamily: "Arial",
		fontSize: "24px",
		fontStyle: "bold",
		align: "center",
		fill: "#ffffff",
		stroke: "#b09054",
		strokeThickness: 4, // 0 in the first picture
		lineJoin: "round",
		wordWrap: true,
		wordWrapWidth: 280
	},
	green: {
		fill: "#c9fcd0"
	},
	red: {
		fill: "#fedede"
	},
	blue: {
		fill: "#c6e8fb"
	}
});

Hello,

I'm working on a Vue.js app that is compiled with Webpack. I would like to be able to use this library as a part of my project, instead of using it as a precompiled js file in my index.html.

i.e.:
$ npm install --save pixi-multistyle-text

Then in any JS file, for example:

import * as PIXI from 'pixi.js'
import MultiStyleText from 'pixi-multistyle-text'

const container = new PIXI.Container();
const text = new MultiStyleText("Hello", { ... });
container.addChild(text);
...

For now it's not working, it triggers the error "PIXI is not defined", as pixi-multistyle-text.js file calls PIXI.Text without importing it.

I basically solved this by manually adding import * as PIXI from 'pixi.js' at the beginning of the pixi-multistyle-text.m.js file and importing it directly as a file. But i'm not used to write NPM libraries so I don't know what is the good way to change the sources in order to make it work both as a library and as a standalone.

Issue #12 was similar.

Source:

var textSample = new MultiStyleText("Some of the text is large\n<small>And a whole lot of it is small, so we need to check a mix of them for line heights</small>\nAnd of course, don't forget to handle word wrapping\n<small>It would be bad if we didn't</small>",
	{
		default: { fontFamily: "Tahoma", fontSize: "36px", fill: "black", wordWrap: true, wordWrapWidth: 200 },
		small: { fontSize: "20px" }
	}
);

The second large line should wrap at the word "forget", but instead continues for a while. The fix will likely require rewriting PIXI.Text.wordWrap, which is also needed for #9 anyway.

Demo doesn't work, refers to ../dist which does not exist, and I can't find any build instructions?

It seems you are not able to update the wordWrapWidth property after initialisation.

const textNode = new MultistyleText('Lorem Ipsum', {
  default: {
    wordWrap: true,
    breakWords: true,
    wordWrapWidth: 1000
  }
});

Above works as expected. But once you try to change the styles afterwards

textNode.textStyles.default.fontSize = 100; works as expected.
textNode.textStyles.default.wordWrapWidth = 100; does not seem to do anything.

similar to bbcode tags, is this something that is welcome to add? It will really simplify color tags

"@pixi/text": "^5.2.2",

Hi, during the last update @pixi/text they add "metrics" param in _generateFillStyle()

pixijs/pixijs@0fbd800#diff-c6dee41e692a9ecba892af67e7c3376b

And if you use fillGradientStops style than you receive an error

https://jsfiddle.net/c261rtod/3/

Uncaught TypeError: Cannot read property 'fontProperties' of undefined
at s.e._generateFillStyle (Text.js:505)
at (index):35
at Array.forEach ()
at s.updateText ((index):35)
at s.e._calculateBounds (Text.js:419)
at s.e.calculateBounds (Container.js:440)
at e.calculateBounds (Container.js:451)
at e.getBounds (DisplayObject.js:278)
at e.getLocalBounds (DisplayObject.js:319)
at e.r.height.get (Container.js:655)

Proposed by @djmisterjon in #46. Drawing bounding boxes, baselines, top/bottom for each line, etc. could be really helpful for debugging.

Link to jsfiddle: https://jsfiddle.net/190geq9c/

When using text where one line is empty (i.e. when text contains \n\n) it will throw an error.

new MultiStyleText("Thisblockoftextshouldbebrokenacrosslinesbecausebreakwordsisset.",
{
		"default": {
			fontFamily: "Arial",
			fontSize: "24px",
			fill: "#cccccc",
			wordWrap: true,
			wordWrapWidth: 150,
			breakWords: true
		}
});

Examining outputText in updateText() shows that two spaces have been prepended.

subj.

https://github.com/pixijs/pixi.js/wiki/v5-Resources

just a notice :)

Not an issue but a request for a feature really.

If a developer wants to support updating rendering options (e.g., change font size) for when the web browser is resized by the end-user, the developer has to remove the text component from the PIXI container and re-add it. If there are many MultiStyleText objects on the screen, this can increase the code base and development time. The performance of doing a resize can also be affected as well.

So after the user creates the text object and adds it to a PIXI container:

var text = new MultiStyleText("<first>John</first> <last>Smith</last>",
{
    default: { fontFamily: "sf_slapstick_comicregular",
               fontSize: fontSize + "px"},
    first: { fill: "#e55c00"},
    last: { fill: "#4fc1b7" }
});
// ...
stage.addChild(topBarTextL);

It would be practical to later be able to say (for example):

fontSize += 10;

text.setStyleKey("default", {fontFamily: "sf_slapstick_comicregular",
    fontSize: fontSize + "px"});

This would keep all other style keys still intact with only changes to the current style.

One other thought ...

Don't know how much extra work this would be but if the properties within each style key are set to dictionaries already (so a dictionary of dictionaries), a developer could simply override whichever interested property/properties they wish to choose:

fontSize += 10;

text.setStyleKey("default", {  fontSize: fontSize + "px"});

This would only override the font size in the default style key.

Hello guys, awesome lib, thank you.
Btw, does demo displays clean black strip at the right of code samples or is it just for me or supposed to be so? (tried on Firefox and Chrome)

Thanks in advance :)

I've added processing of param "lineHeight" to my project. The solution is very simple and short. I've changed "updateText" method only.

I want to help to make this lib better, but I have no permissions to create pull request.

All spaces are removed from a string that only exists on one line (partWidth less than the wordWrapWidth) but uses breakWords.

Hi - I'm using pixi multistyle and it seems to be working, but the <html> tags I'm using seem to be rendering as well instead of being removed. This is my implementation:

            //Font Variables
            Constants.FONT_SHOE_DESCRIPTION: 'Adobe Heiti Std R Bold', //The font family to use for shoe descriptions beneath shoe
            Constants.FONT_SHOE_DESCRIPTION_2: 'Flama Basic', //if there is a nested font for the shoe description, it should render in this font family

multiText = "<flama>“LOREM”</flama> Ipsum

var text = new PIXI.MultiStyleText(multiText.trim(), {
                def : {
                    align: 'center',
                    font: scaled(this.fontSize) + 'px ' + Constants.FONT_SHOE_DESCRIPTION,
                    fill : Colors.HEX_BLACK
                },
                flama : {
                    align: 'center',
                    font: scaled(this.fontSize) + 'px ' + Constants.FONT_SHOE_DESCRIPTION_2,
                    fill : Colors.HEX_BLACK
                }
            });

and the text is rendered out as:

where <FLAMA></FLAMA> tags should not be visible

Can't seem to get it to work at all, is it just me?

Edit: Tried updating pixi to the latest and it broke everything :P Seems like fonts changed quite a bit

Deprecation Warning: determineFontProperties is now deprecated, please use the static calculateFontProperties method, e.g : Text.calculateFontProperties(fontStyle);

Uncaught TypeError: Text.calculateFontProperties is not a function(…)
determineFontProperties @ deprecation.js:682
MultiStyleText.updateText @ pixi-multistyle-text.js:217
...

Changing line 217 to this fixed the 'completely broken' issue at least:

outputTextData[i][j].fontProperties = PIXI.Text.calculateFontProperties(outputTextData[i][j].style.font);

I'm not github savvy enough to do more than comment right now sorry

This should center the child's text at the center of the parent's lowercase text. Deferred from #41.

ex:

    this.textBox = new PIXI.MultiStyleText("Lorem ipsum dolor sit amet, consectetur adipiscing lit, magna aliqua. Ut enim <important>MY IMPORTANT TEXT TO TEST IT</important> ad minim veniam, quis nostrud exercitation ullamco.",
        {
            def: { font: "40px Oswald", fill: "#0056a4"},
            important: { font: "40px Oswald", fill: "#c8242f" }
        },
        {wordWrap:true,wordWrapWidth:160,align:"center"}
    );
    this.textBox.x = 25 + (584 >> 1);
    this.textBox.y = 500;
    this.textBox.anchor.x = .5;
    this.textBox.addChild(this.textBox7);

Hey guys,

I was wondering if there's the possibility of supporting the letterSpacing property of the multistyle-text object? I imagine it may be fairly complicated since the width needs to be calculated by each individual tag and this may affect word wrap and its size.

Anyways, figured I'd put that out there.

Thanks again for taking care of the updating with the setTagStyle method, that really is useful!

Arron

npm run demo --> 'open' is not recognized as an internal or external command,
npm run build and open index.html in your browser -> multistyletext is undefined

First I would like to thank you for this beautiful library!

Do you think it's possible to add something like textOverflow? It would be awesome! 😄

@bluepichu I've never really used typescript before. Could you explain what's missing for me to run npm run build?

I'm currently getting a lot of errors like these:

pixi-multistyle-text.ts(3,37): error TS2503: Cannot find namespace 'PIXI'.
pixi-multistyle-text.ts(3,37): error TS4022: Extends clause of exported interface 'ExtendedTextStyle' has or is using private name 'PIXI'.
pixi-multistyle-text.ts(36,30): error TS2304: Cannot find name 'PIXI'.
pixi-multistyle-text.ts(36,30): error TS4020: Extends clause of exported class 'MultiStyleText' has or is using private name 'PIXI'.
pixi-multistyle-text.ts(49,4): error TS2322: Type '{ align: string; breakWords: boolean; dropShadow: boolean; dropShadowAngle: number; dropShadowBlu...' is not assignable to type 'ExtendedTextStyle'.
  Object literal may only specify known properties, and 'align' does not exist in type 'ExtendedTextStyle'.

Also, we should add typescript as a dev dependency.

Hi,

I just report you a bug or a feature (lol), we can't mix tags.

Example :

var textSample = new MultiStyleText("<pixi>Pixi.js <pixiBis>can has</pixi> multiline</pixiBis>"
			{
				default: { fontFamily: "Tahoma", fontSize: "35px", fill: "white" },
				pixi: { fill: "#D90057" },
				pixiBis: { fill: "red" }
			}
		);

This will print bad render, it seems that the name tag isn't sensitive, the first closer tag will close the first open tag, even if the name isn't the same ;)

Thanks,

This leads to seemingly inconsistent behavior when combined with letter spacing, for example:

Letter spacing 0

Letter spacing 1

This could be made more consistent if all strokes are drawn before any fills, at the cost of preventing the stroke of one line of text from covering the fill of an earlier line of text. (This also seems more consistent with how shadows already work.)

I'm migrating my project and wanted to know if it's planned.

When using gradient fills for tags in multistyle-text the gradient is drawn based on the dimensions of the whole text object, not the dimensions of the tagged text the gradient is being applied to.

A visual example: https://codepen.io/martinAnsty/pen/errVXe

The gradient fill is actually calculated using PIXI.Text's _generateFillStyle(). If you dig through that method you can see PIXI specifically handles multiline gradient text by repeating the gradient so that it appears to be applied to each line individually.

In the case of pixi-multistyle-text I think _generateTextStyle() needs reimplementing to calculate the dimensions of the text first rather than simply using canvas.width and canvas.height.

Hi,

I encountered some problems during installation of your module.

We used pixi as a dependency in our project, so not like in your demo in a simple html file.

So we have to export your class for make a require in the other files were we need to use MultiStyleText.

Is this normal ? Did i do something wrong ?

Thanks :)

There seems to be an issue with the 5.0.0+ versions of PIXI and pixi-multistyle-text. I'm using TypeScript and webpack in my project but I don't think that this is related, however when attempting to use pixi-multistyle-text I receive the following error:

Hi friend , firstly, thank you very much for your excellent work.
I am pleased to be able to exploit several color style in my project with pixi.js

I am confronted with a rather strange problem.
i have a stange CROP of my multiTextStyle

I suspect a bad calculation of canvas.width ?!
Given that you know your source code, do you have an idea why I get this bad resulta?
I put the result in the PINK background for more easy check the canva width.

Here is your library that I use.

pixi-multistyle-text.zip

I will be very happy, if you could give me a idee on the current problem.
I have a bit of trouble reading and manipulating your source code.

Hey !

Got a little problem with the alignment of the text :

The first canvas is provided by FabricJS and the iText object

The second canvas is a PIXI canvas

As you can see, with a valign set to bottom, there's an offset between the first letter (H) and the rest f the word (ello)

I don't see any options to remove this offset (i tried with differents valign)

Any way to fix this ?

Hi,
First let me thank you for make this available, its very usefull and easy to use.
While using MultistyleText, I noticed I'm not able to control lineHeight. Is this a known issue? I'm using PIXI v.4.5.1.
Thanks,
Nuno

Using PIXI 4.5.6, when you use a stroke of any size and any alignment the text gets cut off.

I added some hacky stuff below which has fixed the issue for me.

var foo = Object.keys(textStyles).map(function (key) { return textStyles[key]; }); var myValue; var bar = foo.reduce(function (prev, cur) { myValue = cur.strokeThickness; return Math.max(prev, cur.strokeThickness || 0); }, 0); lineWidth += myValue * 8;// hacky fix for cut off text when using a stroke (I think 8 is stroke width) lineWidths[i] = lineWidth;

This is where the lines are looped through and the lineWidths calculated. I found the value 8 by trial and error but this is also the width of stroke I used, so I'm guessing that's what this value is.

Using letterSpacing while wordWrap=true causes incorrect cropping. Specifically, it looks like wordWrap doesn't take a custom letterSpacing into account when deciding where to insert linebreaks, and how large the resultant texture should be.

const str = "This is a game where you become an RNA scientist. " +
    "By solving puzzles, you will build a virtual lab.  " +
    "Then you will help invent new RNA molecules to combat " +
    "infectious diseases like tuberculosis.  Ready?";

this._text = new MultiStyleText(str, {
    "default": {
        fontFamily: "Arial",
        fontSize: 13,
        fill: 0xC0DCE7,
        wordWrap: true,
        wordWrapWidth: 185,
        letterSpacing: 5,
    }
});

Results in:

The same MultiStyleText, but with letterSpacing unset, is correctly uncropped:

Hi!, amazing work with this plugin.

I am newbie in PixiJS. ¿Is possible attach an event to one tag?

Thank you so much!

Found some strange difference between bounds calculations of regular PIXI.Text and MultiStyleText. If i call getLocalBounds() on root container, which contains multistyle text, it returns negative value x: -5, y: -5. If i use regular PIXI.Text, root container return local bounds with values x: 0, y: 0, as expected. I think it's because values from getDropShadowPadding() in MultiStyleText returns 5 by default and uses everywhere, even if i'm not use shadow and set dropShadow: false. So i need to set dropShadowDistance: 0 by hand in default style, to get "normal" bounds.