Unable to align: "center" & html-tags messing with line-widths

[rknDA1337]

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!

[bluepichu]

Those two problems definitely sound related, and I think the line-width problem is the same as #9 and #16. All three will probably be fixed with an override of the wordWrap method, which I'm going to try and get done sometime today.

[bluepichu]

@rknDA1337, could you provide more information regarding the centering issue? In particular, source might be helpful.

One potential source of error that I can think of is that the API changed at 0.4.0 - align for the entire text block is now taken from the default style, rather than from an additional object passed to the constructor.

[rknDA1337]

@bluepichu it could definitely be a problem on my end too. For reference I'm running pixi 4.2.3.

I've been following the updated api and I have experienced no other issues. I've tried changing most values or not using them at all to no avail. Here's the current code for my text:

this.content = new MultiStyleText(this.data.content,
         {
           default: {
             fontFamily: "DogeSans",
             fontSize: "24px",
             fontStyle: "bold",
             align: "center",
             fill: "#ffffff",
             stroke: "#b09054",
             strokeThickness: 4,
             lineJoin: "round",
             wordWrap: true,
             wordWrapWidth: 280
           },
           green: {
             fontFamily: "DogeSans",
             fontSize: "24px",
             fontStyle: "bold",
             fill: "#c9fcd0",
             stroke: "#b09054",
             strokeThickness: 4,
             lineJoin: "round"
           },
           red: {
             fontFamily: "DogeSans",
             fontSize: "24px",
             fontStyle: "bold",
             fill: "#fedede",
             stroke: "#b09054",
             strokeThickness: 4,
             lineJoin: "round"
           },
           blue: {
             fontFamily: "DogeSans",
             fontSize: "24px",
             fontStyle: "bold",
             fill: "#c6e8fb",
             stroke: "#b09054",
             strokeThickness: 4,
             lineJoin: "round"
           }
         }
   );

[bluepichu]

Surprisingly, it looks like strokeThickness is breaking alignment:

Also, protip, style inheritance works properly so you can shorten your styles significantly:

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,
		lineJoin: "round",
		wordWrap: true,
		wordWrapWidth: 280
	},
	green: {
		fill: "#c9fcd0"
	},
	red: {
		fill: "#fedede"
	},
	blue: {
		fill: "#c6e8fb"
	}
});

[bluepichu]

For tracking purposes, I'm closing this issue and filing it as a new issue. See #22.

[rknDA1337]

Wow, nice work and pro tip indeed!