# Template & Styling

### Main content

The heart of the PDF content, isn't it? For this, you need to send a whole HTML document.

Recommended:

```php
<html>
<head>
    <title>Your title here</title>
    <style>
        // put all styles here
    </style>
</head>
<body>
    // add magic here
</body>
</html>
```

{% hint style="info" %}
Remote paths for images, fonts (e.g., [Google Fonts](https://fonts.google.com/)), etc., work too.

TailwindCSS also works great, give it a go 😎.
{% endhint %}

### Header & Footer

If you want to use footer or header or both, you need to send a whole HTML document, e.g.:

```php
<html>
<head>
    <style>
    body {
        font-size: 12px;
        margin: auto 20px;
    }
    </style>
</head>
<body>
<p><span class="pageNumber"></span> of <span class="totalPages"></span></p>
</body>
</html>
```

The following classes allow you to inject printing values:

* `date` - formatted print date.
* `title` - document title.
* `url` - document location.
* `pageNumber` - current page number.
* `totalPages` - total pages in the document.

#### Limitation

* No JavaScript.
* The CSS properties are independent of the ones from the HTML document.
  * Also simple CSS only.
* `footer.html` CSS properties override the ones from `header.html`.
* Images only work using a base64 encoded source - i.e., `data:image/png;base64, iVBORw0K...`.
* `background-color` and `color` CSS properties require an additional `-webkit-print-color-adjust: exact` CSS property to work.
* Assets are not loaded (i.e., CSS files, scripts, fonts, etc.).
  * For fonts, check out the section below.
* Background form fields do not apply.

### Fonts

{% hint style="info" %}
Main content can use remote URLs for fonts

Recommended CDN: **Google Fonts** or **CDNFonts**
{% endhint %}

Here are the built-in fonts that you can define in your styles.

#### Microsoft True Type fonts

* Andale Mono&#x20;
* Arial Black&#x20;
* Arial (Bold, Italic, Bold Italic)&#x20;
* Comic Sans MS (Bold)&#x20;
* Courier New (Bold, Italic, Bold Italic)&#x20;
* Georgia (Bold, Italic, Bold Italic)&#x20;
* Impact&#x20;
* Times New Roman (Bold, Italic, Bold Italic)&#x20;
* Trebuchet (Bold, Italic, Bold Italic)&#x20;
* Verdana (Bold, Italic, Bold Italic)&#x20;
* Webdings

#### Others

* beng&#x20;
* hosny-amiri&#x20;
* lklug-sinhala&#x20;
* lohit-guru&#x20;
* lohit-knda&#x20;
* samyak-gujr&#x20;
* samyak-mlym&#x20;
* samyak-taml&#x20;
* sarai&#x20;
* sil-abyssinica
* sil-padauk&#x20;
* telu thai-tlwg&#x20;
* ttf-wqy-zenhei&#x20;
* arphic-ukai&#x20;
* arphic-uming&#x20;
* ipafont-mincho&#x20;
* ipafont-gothic&#x20;
* uncore&#x20;
* crosextra-caladea&#x20;
* crosextra-carlito&#x20;
* dejavu&#x20;
* dejavu-extra&#x20;
* liberation&#x20;
* liberation2&#x20;
* linuxlibertine&#x20;
* noto-cjk&#x20;
* noto-core
* noto-mono&#x20;
* noto-ui-core&#x20;
* sil-gentium&#x20;
* sil-gentium-basic

### Page Break

In case that you want to have a page break, you can use this CSS styling to achieve that:

```markup
<html>
    <head>   
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Paginated HTML</title>
        <style>
             div.page {
                page-break-after: always; 
                page-break-inside: avoid;
            }   
        </style> 
    <head>
    <body> 
        <div class="page">
            <h1>This is Page 1</h1>
        </div>
        <div class="page">
            <h1>This is Page 2</h1>
        </div>
        <div class="page">
            <h1>This is Page 3</h1>
        </div>
    </body>
</html>
```
