Skip to main content

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.

Last updated on