Untitled

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
    <h:outputStylesheet>

        @media print {
            @page {
                size: A4 portrait;

                @top-left {
                    content: element(header);
                }
                @bottom-left {
                    content: element(footer);
                }
            }
        }

        header {
            position: running(header);
        }

        aside {
            position: running(aside);
        }


        footer {
            position: running(footer);
        }


        body {
            position: relative;
        }

        html, body {
            padding: 0;
            margin: 0;
        }

        .ui-panel.previewPanel {
            border: none;
            margin: 0;
            padding: 0;
            word-wrap: break-word;
        }

        .ui-panel.previewPanel .ui-panel-content {
            margin: 0;
            padding: 0;
        }


        .previewPanel .ql-container.ql-snow {
            border: none;
        }

        table {
          -fs-table-paginate: paginate;
          border-spacing: 0;
        }

        thead {
            display: table-header-group;
        }
        tfoot {
            display: table-header-group;
        }


    </h:outputStylesheet>
    <title>Vorschau</title>
</h:head>

<h:body
    style="width:595px;height:842px;">


<header>
    <ui:repeat
        value="#{previewDocumentDesignerController.positionedElements['header']}"
        var="editableElement" varStatus="status">

        <div
            style="position:absolute;  top: #{editableElement.top/100 * 21}cm;
             left: #{editableElement.left/100 * 21}cm;
               width: #{editableElement.width/100 * 21}cm;
                     height: #{editableElement.height/100 * 29.7 - 0.2}cm;"
            class="previewPanel">

            <h:outputText
                value="#{generateHtmlCodeController.generateHtmlCode(editableElement)}"
                escape="false" />

        </div>
    </ui:repeat>
</header>


<aside>
    <ui:repeat
        value="#{previewDocumentDesignerController.positionedElements['content']}"
        var="editableElement" varStatus="status">

        <div
            style="position:absolute;  top: #{editableElement.top/100 * 21}cm;
             left: #{editableElement.left/100 * 21}cm;
               width: #{editableElement.width/100 * 21}cm;
                     height: #{editableElement.height/100 * 29.7 - 0.2}cm;"
            class="previewPanel">

            <h:outputText
                value="#{generateHtmlCodeController.generateHtmlCode(editableElement)}"
                escape="false" />

        </div>
    </ui:repeat>
</aside>


<footer>
    <ui:repeat
        value="#{previewDocumentDesignerController.positionedElements['footer']}"
        var="editableElement" varStatus="status">

        <div
            style="position:absolute;  top: #{editableElement.top/100 * 21}cm;
             left: #{editableElement.left/100 * 21}cm;
               width: #{editableElement.width/100 * 21}cm;
                     height: #{editableElement.height/100 * 29.7 - 0.2}cm;"
            class="previewPanel">

            <h:outputText
                value="#{generateHtmlCodeController.generateHtmlCode(editableElement)}"
                escape="false" />

        </div>
    </ui:repeat>
</footer>


</h:body>
</html>