JohnJ: since the WebFont plugin I published today isn't working the same way, you can try to display HTML strings, for the moment ;).

Edit : added the URL for the plugin archive itself, silly me...

Following the work on the HTMLDisplayString, I made a quick plugin to display Webfonts inside Construct 2.

Inside Construct : <img src="http://dl.dropbox.com/u/1412774/WebFontC2Plugin/inside.png" border="0">

And inside a browser :

<img src="http://dl.dropbox.com/u/1412774/WebFontC2Plugin/demo.png" border="0">

(tested with FF and Chrome, by the way).

The URL for the demo : http://dl.dropbox.com/u/1412774/WebFontC2Plugin/index.html

The capx : http://dl.dropbox.com/u/1412774/WebFontC2Plugin/webfontc2plugin.capx (the demo also use the CallJS plugin to display an 'alert', but it's not needed to just use the Webfont plugin).

The plugin : http://dl.dropbox.com/u/1412774/WebFontC2Plugin/pode_webfontv1.zip

As you can see, you can style everything via CSS (and even use images as background via background url() !)

With a bit of ingeniosity, you can also embed some classic HTML string inside...

To make it works, you need to provide the name of the css file which contains the @font-face declaration.

You also need to provide the type of HTML element in which the webfont is going to be injected (for example p), and you need to give that tag an ID (for example myp).

<img src="http://dl.dropbox.com/u/1412774/WebFontC2Plugin/info.png" border="0">

You also need to declare a CSS file, and to place it at the root of your exported game (that means that you can't see anything when previewing the game, only at export). Something like that.

Depending on where is your webfont, you will also need to perhaps put it at the root of your game, next to the css...

By the way, I have no rights on the webfont used as an example, so don't use it for anything commercial, you could break some licence...

JohnJ : strange thing about Opera, usually they are the first to implement something, and to implement it right... I'll try to see what tey are doing to see if a workaround can be found. About Safari, I need to check also (but Safari has his lot of little inconsistencies, like Firefox...)

I wonder, if, in the end, Ahsley solution isn't the simpler one.

I made that because I remember that somebody here wanted to do a whole website with HTML embedded inside C2.

Ashley: I use the <foreignObject> tag of SVG. It allows me to embed straight HTML inside the SVG DOM. Since it's in the spec, everybody browser should render it cleanly (sort of...)

I then set up an Image(), with the src defined as a SVG dataURI (so nothing "hackish"...)

Here's the basis :

var data = "data:image/svg+xml," +

"<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +

     "<foreignObject width='100%' height='100%'>" +

     "<div xmlns='http://www.w3.org/1999/xhtml'>" +

     this.HTMLString +

     "</div>" +

     "</foreignObject>"

[...]

var img = new Image();

img.src = data;

[...]

ctx.drawImage(img);

[...]

I'm currently working on it. It's difficult, because the way you declare font families inside SVG and HTML isn't the same. And I need to make the HTML part inside the SVG access that font...

<font color="red">Edit : 27 april</font>

New build of the plugin.

You can get back the HTML String as a base64 representation !

So now, you can have whatever HTML string you want inside the plugin, and get it back to inject it as an image a Sprite, for example !

<img src="http://dl.dropbox.com/u/1412774/HTMLStringDemo2/demo.png" border="0">

The demo : http://dl.dropbox.com/u/1412774/HTMLStringDemo2/index.html

The .capx : http://dl.dropbox.com/u/1412774/HTMLStringDemo2/HTMLStringDemo2.capx

The plugin : http://dl.dropbox.com/u/1412774/HTMLStringDemo2/pode_html_string.1.3.zip

Remember, because of the way it's handle behind the stage, don't forget to set a size for your HTML string.

You can use something like that :

"<p style='font-size:20px;'>your_HTML_string</p>"

<font color="red">Edit : 08 february </font>

I uppdated the plugin. There should be no more screen updating problem.

Demo : http://dl.dropbox.com/u/1412774/HTMLStringC2Plugin/index.html

Plugin : http://dl.dropbox.com/u/1412774/HTMLStringC2Plugin/pode_html_string.0.2.zip

Capx : http://dl.dropbox.com/u/1412774/HTMLStringC2Plugin/HTMLStringC2Plugin.03.capx

<img src="http://dl.dropbox.com/u/1412774/HTMLStringC2Plugin/demo.png" border="0">

-------

Since impossible isn't french (and to proove Ashley it can be done, since he is english - eternal rivalry across the Channel :p), here's a plugin made to display HTML formatted string inside C2.

I tested it inside Firefox. Should also work in Safari and Chrome (it's some kind of a hack, but it respects the SVG specification...)

http://dl.dropbox.com/u/1412774/HTMLStringC2Plugin/HTMLStringC2Plugin.zip

Here's an example http://dl.dropbox.com/u/1412774/HTMLStringC2Plugin/index.html and a quick screenshot : <img src="http://dl.dropbox.com/u/1412774/HTMLStringC2Plugin/htmlstring.png" border="0"> (yes, the little blue things are images. Base64 images... Don't remember were they come from).

As you can see, you can use CSS styling (don't forget that since we are using a SVG container via a <foreignObject> proxy, you need to use XHTML strict - ![CDATA[ and the like, as can be seen in the capx http://dl.dropbox.com/u/1412774/HTMLStringC2Plugin/HTMLStringC2Plugin.capx)

The plugin is still a bit dirty and in alpha state, I prefer to release early & often.

Comments & Critics are welcome, bugfixes are better ! :)

0plus1: if I understood your problme, you want to click on a card, and after that on a second one. At that moment, you want to delete the previous one. If so, you can do it that way : http://dl.dropbox.com/u/1412774/cardV2.capx

Lprez: you can put an action like "Animation : setSpeed", run by the system every X seconds.

And, by the wait, are you sure the image of your avatar is appropriate on a forum where underage children can read the various pages ? (it doesn't bother me, but it can offend some people...)

alligator: it's completely possible to do that by using the CallJS plugin...

Ah, my bad ! You can set the "Invisible" property to "Visible" (sorry)...

You can also use the "Pin" behavior http://dl.dropbox.com/u/1412774/bulletHolePin.capx(sorry Kyatric ;)).

You can use the Chrome trace tool to do a step-by-step progression inside your JS code to spot where is your problem.