Untitled

<!doctype html>
<html>
    <head>
        <title>HTML Typeset Test</title>
    </head>
    <body>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            var AuroraContext = function(doc)
            {
                this._doc = doc;
                this._style = doc.style;
                this._content = doc.content;

                // create a temporary node for calculating metrics
                this._metricsRoot = $("<div></div>")
                    .css("position", "absolute")
                    .css("top", "-10000px")
                    .css("left", "-10000px");

                $(document.body).append(this._metricsRoot);
            };

            AuroraContext.prototype = {
                render : function(scale)
                {
                    this._scale = scale;

                    var docRoot = $("<div></div>");

                    docRoot
                        .css("white-space", "normal")
                        .css("font-size", Math.round(this._scale * this._style.fontSize) + "px");

                    // render content
                    var content = this._doc.content;

                    for(var i = 0; i < content.length; ++i)
                    {
                        docRoot.append(this._layoutPage(i, content[i], this._scale));
                    }

                    this._metricsRoot.remove();
                    delete this._scale;

                    return docRoot;
                },

                _layoutPage : function(pageNum, page)
                {
                    var pageRoot = $("<div></div>");
                    var rightMargin, leftMargin;

                    if(pageNum % 1 == 1)
                    {
                        leftMargin = this._style.margin.inner;
                        rightMargin = this._style.margin.outer;
                    } else {
                        leftMargin = this._style.margin.outer;
                        rightMargin = this._style.margin.inner;
                    }

                    pageRoot
                        .css("padding", (this._scale * this._style.margin.top) + "px " +
                                        (this._scale * rightMargin) + "px " +
                                        (this._scale * this._style.margin.bottom) + "px " +
                                        (this._scale * leftMargin) + "px")
                        .css("width", Math.round(this._scale * (this._style.width - leftMargin - rightMargin)) + "px")
                        .css("height", Math.round(this._scale * (this._style.height - leftMargin - rightMargin)) + "px");

                    for(var i = 0; i < page.data.length; ++i)
                    {
                        pageRoot.append(this._layoutBlock(page.data[i]));
                    }
                    return pageRoot;
                },

                _layoutBlock : function(block)
                {
                    var blockRoot = $("<div></div>");

                    switch(block.type)
                    {
                        case "heading":
                            break;

                        default:
                            console || console.warn("Bad block node type");
                            break;
                    }

                    var data = block.data;
                    for(var i = 0; i < data.length; ++i)
                    {
                        var line = data[i];
                        var lineElem = $("<div></div>")
                            .css("white-space", "nowrap");

                        for(var j = 0; j < line.length; ++j)
                        {
                            lineElem.append(this._layoutSpan(line[j]));
                        }

                        // calculate line width for spacing
                        if(i != data.length - 1)
                        {
                            this._metricsRoot.append(lineElem);
                            lineElem.css("word-spacing", "0");
                            var baseLineWidth = lineElem.width();
                            lineElem.css("word-spacing", (this._style.width - baseLineWidth) / 3 + "px");
                            lineElem.remove();
                        }

                        blockRoot.append(lineElem);
                    }

                    return blockRoot;
                },

                _layoutSpan : function(span)
                {
                    var spanBlock = $("<span></span>");
                    if(!span.type) spanBlock.text(span);

                    switch(span.type)
                    {
                        case "emph":
                            break;

                        default:
                            console || console.warn("Bad span node type");
                            break;
                    }

                    return spanBlock;
                }
            };

            var page = {
                style : {
                    width       : 8.5 * 72/*pt*/,
                    height      : 11 * 72/*pt*/,
                    fontSize    : 12/*pt*/,
                    margin      : {
                        top     : 50,
                        bottom  : 50,
                        inner   : 50,
                        outer   : 100
                    }
                },
                content : [
                    {
                        data : [
                            {
                                type  : "heading",
                                data : [
                                    [ "Hello, world!" ]
                                ]
                            },
                            {
                                type  : "paragraph",
                                data : [
                                    [ "This is a paragraph," ],
                                    [ "with some stuff." ]
                                ]
                            }
                        ]
                    },
                    {
                        data : [
                            {
                                type  : "heading",
                                data : [
                                    [ "Hello, world!" ]
                                ]
                            },
                            {
                                type  : "paragraph",
                                data : [
                                    [ "This is a paragraph," ],
                                    [ "with some stuff." ]
                                ]
                            }
                        ]
                    }
                ]
            };

            $(document.body).append(new AuroraContext(page).render(1));
        </script>
    </body>
</html>