html5/canvas Dynamic text styling and overlapping dynamic text boxes not lining up

[GoryGreg]

Hi,

I create e-learning courses that have a lot of text mixed with animations in them at times and sometimes the course content designer requires the text to be styled- like a certain word bolded or in italics in the middle of a sentence.

But I use dynamic text (to keep file size down plus dynamic text looks a lot crisper on screen and professional than static text) but I can't style them or not that I am aware of after searching for answers online. I have sent feature requests etc but is this more to do with the CreateJS team? And are there any work arounds?

Work arounds leads me to my second point. If I wanted a certain word to be a different colour in text/paragraph using dynamic text, then to me the work around is make 2 dynamic text boxes- one with all the text/paragraph and then the other with the coloured word in it. The dynamic text box with the coloured word is placed over the paragraph (either on same layer or new layer above) text box. It all sits perfect over each other in Animate (both text boxes are the same family, style, size and spacing) but in the browser the coloured word is offset (see below)? If I have 2 words (that are in different places) in a paragraph then one can be more offset than the other i.e. no apparent pattern. So I have to go into Animate and offset it there, preview, tweak again, preview etc until it looks okay i.e. the coloured word is directly over the word it is meant to be. Weird (to me) and tiresome on the eyes. Why is this?

I want to keep using dynamic text but it is not being made easy.

Cheers

Greg

[kglad]

you'll need to use more than 1 textfield.

[GoryGreg]

Thanks but that's what I am using for my example above (I probably used 'text box' erroneously instead of 'textfield')- I'm using 2 with them overlapping in Animate perfectly but they are not lining up in Chrome, Firefox, Edge or Safari.

Could someone add HTML5 to the headline and tags, as I can't seem to edit it now. Cheers.

[kglad]

i'm just confirming, that's what you need to do.  there's no other work-around with easeljs.

but if i were you i would just just add a textfield in the js file and use html text.

[ClayUUID · Accepted solution]

This approach is doomed to failure, because different browsers render canvas text at different widths (Firefox is the worst offender here). So it's straight up impossible to position the differently-formatted text where it will fall correctly within the rest of the text on all browsers.

The only practical option for rich formatted text in Canvas documents is to float a DIV element over the stage and fill it with standard HTML formatted text. Note that, without some serious CSS intervention, this approach only works with unscaled documents.

Here's a simple set of functions for managing floated DIVs:

// Create a DIV layer above the canvas

// Accepts ID, X, Y, width, height, HTML content, and CSS styling (optional)

// CSS styling is a CSS-formatted literal string

mkDiv = function(id, x, y, w, h, html, css) {

    var d = document.createElement("div");

    d.id = id;

    d.style.cssText = "position:absolute; left:" + x + "px; top:" + y + "px; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");

    d.innerHTML = html;

    canvas.parentNode.appendChild(d);

}

// Remove an element by ID name

rmDiv = function(id) {

    try {

        var elem = document.getElementById(id);

        elem.parentNode.removeChild(elem);

    }

    catch(e) {}

}

Just throw in the first frame of the main timeline and they'll then be globally available. Since Animate isn't aware of these objects, it's entirely the responsibility of the author to manage them.

[GoryGreg]

Thanks Clay (and kglad for changing the post title, as I should have done it in the first place). I will try this code but like you mentioned, scaling will be a problem.

Does anyone know if there is anything planned for future versions to address dynamic text styling or is this just something we will have to deal with?

Cheers