Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

A panoramic tour through HTML5 rendering itself

The good, the bad and the hacky

Christoph Burgmer

cburgmer@thoughtworks.com @cburgmer

 JSConf EU 2013

What are we up to?

  1. Misuse new browser features
  2. Use our JS fu to manipulate SVG, HTML, CSS, DOM and CSSOM
  3. Boldly go where no man or woman has gone before
  4. Hopefully have some fun on the way

A special welcome

... to the Chrome developers here today.

I have a few treats for you.

Our task

Sounds easy?

Quick solution

In Firefox

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext("2d");
ctx.drawWindow(content, 0, 0, w, h, "rgb(0,0,0)");

That was easy

But :(

SVG to the rescue

<foreignObject> allows to embed foreign content, including (X)HTML

<svg xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <html>
            <strong>
                This is an image containing HTML
            </strong>
        </html>
    </foreignObject>
</svg>

Can we build on that?

XHTML

Inline data

Bringing this together

Congratulations, we are done!

  1. We embeded HTML as XHTML using <foreignObject> into an SVG
  2. ... which we converted into a data URI to yield an <img>
  3. ... which we drew with the canvas' drawImage().

All good?

SVG + external resources

SVGs are not allowed to include external references.

HTML allows

We could try embed them.

Finding external elements (1)

Embedding <img>

<img src="externalImage.png"/>

binary AJAX

Finding external elements (2)

Our minimal CSS parser

Putting the CSS stuff together

Finding external elements (3)

relative URLs

There you go

  1. We rendered HTML through SVG's <foreignObject>
  2. and inlined all external resources
    1. loading binary content through AJAX,
    2. embedding images and fonts through data URIs,
    3. parsing CSS for style resources, and
    4. adapting relative paths

Demo time

Bonus: What about dynamic pages?

Executing JavaScript

Fast forward: issues

What is this all about?

Thanks for listening

Oh, and go make something cool with it.

Meta

This presentation was made with