Feature Request | How to add a particular word different color in text class . text attribute while Tweening

[hiren3897]

I am trying to add color to a single word in the whole text that the user inputs in the Text class. text attribute but it changes the color of the whole text sentence and I am not finding any possible way to do that

Is it possible to change the color of a particular word in the whole text sentence? Example: "Welcome to ADVR world" in this sentence inputted by the user I want to add a different color to "ADVR" and rest should be set to white color

I tried this setting props in .set({color: 'red', text: 'ADVR'}) method but it removes the other text and adds only ADVR with red color

I want the whole sentence in white and only ADVR in red.

Is it possible to do that

If Yes, please it would be a great help to me Thank you in advance. @gskinner @danzen

[owendwyer]

If you're using an input text field created as a DOM element, then I don't think it's possible. An input field is a basic HTML element, and as far as I know, you can't have more than one color even with CSS trickery.

If you're using a CreateJS TextField, then there's a workaround that I use, but it's quite convoluted and usually takes at least a few hours to get it working.

Basically, you use 2 TextFields and a mask. The 2 fields contain the same text, but you draw the mask so that it is only over the word you want colored differently. The mask reveals the word in one textField and blocks the word in the other.

[hiren3897]

If you're using an input text field created as a DOM element, then I don't think it's possible. An input field is a basic HTML element, and as far as I know, you can't have more than one color even with CSS trickery.

If you're using a CreateJS TextField, then there's a workaround that I use, but it's quite convoluted and usually takes at least a few hours to get it working.

Basically, you use 2 TextFields and a mask. The 2 fields contain the same text, but you draw the mask so that it is only over the word you want colored differently. The mask reveals the word in one textField and blocks the word in the other.

Hello @owendwyer Thank You for your help could you explain to me using example code how to do it using 2 TextFields and mask. It would be a great help to me

[owendwyer]

Here is an example. You'd have to change things around a bit, if you want to center the text.

var stage=new createjs.Stage(myCanvas);
var lineHeight=36;
var mainLine=new createjs.Text('','bold 36px Arial','black');
var hintLine=new createjs.Text('','bold 36px Arial','red');
var hintMask=new createjs.Shape();
hintMask.graphics.drawRect(0,0,0,0);
hintLine.mask=hintMask;
stage.addChild(mainLine,hintMask,hintLine);

var myLine=['Welcome to','ADVR','world'];
hintLine.text=myLine[0]+' ';
var sPnt=hintLine.getMeasuredWidth();
hintLine.text+=myLine[1]+' ';
var ePnt=hintLine.getMeasuredWidth();
var wid=ePnt-sPnt;
hintLine.text+=myLine[2];
mainLine.text=hintLine.text;

hintMask.graphics.clear().beginFill('#fff').drawRect(sPnt,0,wid,lineHeight);

stage.update();

[hiren3897]

Here is an example. You'd have to change things around a bit, if you want to center the text.

var stage=new createjs.Stage(myCanvas);
var lineHeight=36;
var mainLine=new createjs.Text('','bold 36px Arial','black');
var hintLine=new createjs.Text('','bold 36px Arial','red');
var hintMask=new createjs.Shape();
hintMask.graphics.drawRect(0,0,0,0);
hintLine.mask=hintMask;
stage.addChild(mainLine,hintMask,hintLine);

var myLine=['Welcome to','ADVR','world'];
hintLine.text=myLine[0]+' ';
var sPnt=hintLine.getMeasuredWidth();
hintLine.text+=myLine[1]+' ';
var ePnt=hintLine.getMeasuredWidth();
var wid=ePnt-sPnt;
hintLine.text+=myLine[2];
mainLine.text=hintLine.text;

hintMask.graphics.clear().beginFill('#fff').drawRect(sPnt,0,wid,lineHeight);

stage.update();

Thanks that's perfect and working but now when I am animating it using Tween I need to do it for each display object

[danzen]

Closing this now - would like to add that we put a system in place to read HTML-like tags for our ZIM LabelLetters class. You can see it here https://zimjs.com/cat/html.html and there is a docs link at the top right. If you scroll down in the docs there is a VIEW link to see the source of what we did.