Template layout using HTML

The PDF documents are rendered using HTML pages. Thus, templates should include HTML code for layouts and CSS for styling.

Template wrapper

Your supplied HTML code will be added to the <body> of the following wrapping template.

<html>
    <head>
        <script src="../path/to/paged.polyfill.min.js"></script>
        <style>
            /* Your CSS will be inserted here */
        </style>
    </head>
    <body class="main">
        <!-- Your HTML code will be inserted here -->
    </body>
</html>

warning

Do NOT include any <html>, <body>, <head> or <script> tags in your supplied code.

Paged.js for polyfilling

We use paged.js for rendering. Thus, you have access to paged.js`s polyfills and media queries.

For development, we recommend using a HTML template that includes paged.js. You may create a document like this for development.

The included CSS styles come from https://gitlab.coko.foundation/pagedjs/interface-polyfill and help displaying the page more accurately like they would display when rendered as a PDF.

warning

Do NOT use these styles in your template. These are merely for preview when developing.

<html>
    <head>
        <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
        <style>
            /* CSS for Paged.js interface – v0.4 */

            /* Change the look */
            :root {
                --color-background: whitesmoke;
                --color-pageSheet: #cfcfcf;
                --color-pageBox: violet;
                --color-paper: white;
                --color-marginBox: transparent;
                --pagedjs-crop-color: black;
                --pagedjs-crop-shadow: white;
                --pagedjs-crop-stroke: 1px;
            }

            /* To define how the book look on the screen: */
            @media screen, pagedjs-ignore {
                body {
                    background-color: var(--color-background);
                }

                .pagedjs_pages {
                    display: flex;
                    width: calc(var(--pagedjs-width) * 2);
                    flex: 0;
                    flex-wrap: wrap;
                    margin: 0 auto;
                }

                .pagedjs_page {
                    background-color: var(--color-paper);
                    box-shadow: 0 0 0 1px var(--color-pageSheet);
                    margin: 0;
                    flex-shrink: 0;
                    flex-grow: 0;
                    margin-top: 10mm;
                }

                .pagedjs_first_page {
                    margin-left: var(--pagedjs-width);
                }

                .pagedjs_page:last-of-type {
                    margin-bottom: 10mm;
                }

                .pagedjs_pagebox{
                    box-shadow: 0 0 0 1px var(--color-pageBox);
                }

                .pagedjs_left_page{
                    z-index: 20;
                    width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important;
                }

                .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
                    border-color: transparent;
                }
                
                .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
                    width: 0;
                } 

                .pagedjs_right_page{
                    z-index: 10;
                    position: relative;
                    left: calc(var(--pagedjs-bleed-left)*-1);
                }

                /* show the margin-box */

                .pagedjs_margin-top-left-corner-holder,
                .pagedjs_margin-top,
                .pagedjs_margin-top-left,
                .pagedjs_margin-top-center,
                .pagedjs_margin-top-right,
                .pagedjs_margin-top-right-corner-holder,
                .pagedjs_margin-bottom-left-corner-holder,
                .pagedjs_margin-bottom,
                .pagedjs_margin-bottom-left,
                .pagedjs_margin-bottom-center,
                .pagedjs_margin-bottom-right,
                .pagedjs_margin-bottom-right-corner-holder,
                .pagedjs_margin-right,
                .pagedjs_margin-right-top,
                .pagedjs_margin-right-middle,
                .pagedjs_margin-right-bottom,
                .pagedjs_margin-left,
                .pagedjs_margin-left-top,
                .pagedjs_margin-left-middle,
                .pagedjs_margin-left-bottom {
                    box-shadow: 0 0 0 1px inset var(--color-marginBox);
                }
            }

            .pagedjs_marks-crop{
                z-index: 999999999999;
            
            }

            .pagedjs_bleed-top .pagedjs_marks-crop, 
            .pagedjs_bleed-bottom .pagedjs_marks-crop{
                box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow);
            }  

            .pagedjs_bleed-top .pagedjs_marks-crop:last-child,
            .pagedjs_bleed-bottom .pagedjs_marks-crop:last-child{
                box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow);
            }  

            .pagedjs_bleed-left .pagedjs_marks-crop,
            .pagedjs_bleed-right .pagedjs_marks-crop{
                box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow);
            }

            .pagedjs_bleed-left .pagedjs_marks-crop:last-child,
            .pagedjs_bleed-right .pagedjs_marks-crop:last-child{
                box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow);
            }
        </style>
        <style>
            /* Insert your dev CSS here */
        </style>
    </head>
    <body class="main">
        <!-- Insert your dev HTML here -->
    </body>
</html>

Sample template

Please get in touch with our support team to receive a sample template to base your work on.

We can also create a custom template for you upon request.