How do I add an image in a textbox ?

Hi.

I have a textbox with centered text.

I would like to detect the beginning of a sentence in order to add a sprite just before the first letter.

Is there any way to do that ?

No idea ? I don't want to use a sprite font.

Are you talking about an actual editable textbox or a simple text object ?

A text object. Even a hacky solution would fit.

You won't have the choice to NOT have a hacky solution !

You could use javascript to wrap your letter in span element, then retrieve its relative position with jQuery. However, if you insert a sprite over your text, it won't shift it at all, you'll have to do it yourself if that's a behavior you wish your text to have.

edit: Just noticed the text object is actually rendered in the canvas and isn't an html element... this will complicate things a bit...

I thought about this span thing but I didn't know at all how to use it in Construct 2.

But yeah if you say that it's rendered in the canvas I guess it's even more complicated.

But I'd really love to be able to do that !

Maybe I could a plugin like multiline textbox but I guess that if it's not rendered in the canvas I won't be able to paste its data into the canvas plugin, which is something I need to do too.

It's a stretch, but maybe you could use javascript to create an offscreen div, set its size/font corresponding to your text object, and THEN use the method I described. I think I might try it... I'm curious !

Here's my attempt. Not perfect but I guess it's a start !

Oh, the kingdom of regexes.

What you did is kind of cool. What do you think is causing the red squares to be at the wrong place after a while ?

Mostly the lineheight. After a few quick tests it looked like setting line-height to the font size + 3pt was a correct estimation. But it might not hold true for all sizes and font-family. Also, if the wrapping in the div did not occur exactly the same as in the canvas rendering, everything's going to be off.

edit: After a few more hacking around, I noticed that upon rendering, text instances have a javascript property called "lines" that get filled with an array of objects representing the wrapped lines. I used this array to create the div instead of the text property and it seems to work better as it creates a consistent wrapping. The only drawback is that the text object has to be rendered at least once before you can use the lines array.

Try redownloading the file to see for yourself.

Seems amazing. I'll give a try on my project, thank you very much.

Hi again <img src="{SMILIES_PATH}/icon_e_biggrin.gif" alt=":D" title="Very Happy">

I modified your capx to put sprites on the letter "a".

I would like also the div to update each time I type something in the textarea.

Actually, I need to type twice (or more if you erase the text to write something) in the textarea in order to have the text on the left properly updated.

Any idea why ?

https://www.dropbox.com/s/hqf9zhhem5759 ... .capx?dl=1

Can't open the capx because I don't have the multiline box plugin.

Well, it works perfectly with a TextBox object, but noto with the multiline plugin… Maybe its "on text change" event doesn't work the same way.

My javascript hack is intended to work with the text object only. The plugin you used certainly don't have the same implementation, and the script will simply crash.