# 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[​](#template-wrapper "Direct link to 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[​](#pagedjs-for-polyfilling "Direct link to Paged.js for polyfilling")

We use [paged.js](https://pagedjs.org/documentation/) 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[​](#sample-template "Direct link to 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.
