[Plugin] : HTMLString (display HTML inside C2)

<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 ! :)

so this would open posibiltiy of some sort of font loading like on this site?

http://www.fontsquirrel.com/

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...

Nice! How does it work? Does it have an SVG context over the canvas or something?

well i didnt looked into much of font related things but the canvas can access the font attributes, so it could be changed to a downloaded font,.. i think

http://www.html5canvastutorials.com/tutorials/html5-canvas-text-font-size/

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);

[...]

Ah, the data URL is probably going to slow down things a lot... have you tried just 'floating' a div with some HTML content in it over the canvas? This is how the button and text box objects work - it seems to work pretty well.

How it works in Opera 11.52

<img src="http://gamesdemos.ucoz.com/xx.yy.png" border="0" />

in Safary 5.0.5 when you press the button nothing happens

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.

Pode: thank you for your work! I hope you can finished it cross-browsers plugin :)

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

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">

Thanks for the update...

<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>"

Hey, does this work with iframes?