Typeset.sh

https://docs.typeset.sh/
Admin
Typeset.sh is a PHP library that converts HTML content to PDF documents with advanced features like...
Tokens:9,497
Snippets:126
Trust Score:6.5
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install Library and Wrappers

Source: https://docs.typeset.sh/

Commands to install the core library or framework-specific wrappers via Composer.

```bash
composer require typesetsh/typesetsh
```

```bash
composer require typesetsh/laravel-wrapper
```

```bash
composer require typesetsh/pdf-bundle
```

--------------------------------

### Install QR Code Element

Source: https://docs.typeset.sh/advanced-guides/qr-codes

Use composer to install the QR code element package. This is a prerequisite for using the qr-code element in your HTML.

```bash
composer require typesetsh/qr-code-element
```

--------------------------------

### Simple JavaScript Example for PDF Forms

Source: https://docs.typeset.sh/advanced-guides/javascript

This example demonstrates basic JavaScript usage in a PDF, including form field interactions and validation. It shows how to use `app.alert` for user feedback and how to trigger validation functions. Note that interaction events like `onclick` on form fields are supported.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript.html</title>
    <style>
        @page {
            size: A4;
            margin: 10mm;
        }
    </style>
    <script type="text/javascript" data-pdf>
        var counter = 0;
        function test(event) {
            app.alert((++counter) + " Hello from "+app.viewerType+" by clicking "+event.target.name);
        }

        function validate() {
            app.alert("Email: " + this.getField("email").value);
        }
    </script>

    <script type="text/javascript" data-pdf data-on="didSave">
        app.alert("Saving complete");
    </script>

</head>
<body>
    <div>
        <input type="checkbox" name="foo" value="1" onclick="test(event)" />

        <input type="radio" name="bar" value="1" onclick="test(event)" checked />
        <input type="radio" name="bar" value="2" onclick="test(event)" />

        <input type="text" 
               name="email" 
               onmouseenter="console.println('email onmouseenter')"
               onmousedown="console.println('email onmousedown')"
               onmouseleave="console.println('email onmouseleave')"
               onmouseover="console.println('email onmouseover')"
               onmouseup="console.println('email onmouseup')"
               onfocus="console.println('email onfocus')"
               onblur="console.println('email onblur')"
               onkeystroke="console.println('email onkeystroke')"
               onvalidate="console.println('email onvalidate')"
               oncalculate="console.println('email oncalculate')"
               value="contact@typeset.sh" />
    </div>
    <div>
        <button onclick="validate()">Validate</button>
    </div>
</body>
</html>

```

--------------------------------

### QR Code Element Usage

Source: https://docs.typeset.sh/advanced-guides/qr-codes

This snippet shows how to install the QR code element using composer and how to use it in your HTML with various attributes.

```APIDOC
## Installation

To install the QR code element, use composer:

```bash
composer require typesetsh/qr-code-element
```

## Basic Usage

Include the `qr-code` element in your HTML. The content within the element is the data to be encoded.

```html
<qr-code>Your Data Here</qr-code>
```

## Attributes

### `alt`

(string) - Description for the QR code image, useful for accessibility.

### `icon-src`

(string) - URL of an image to be placed in the center of the QR code.

### `icon-size`

(integer) - The size of the icon in bit units. `1` equals the size of one square block.

### `data-error-correction-level`

(string) - Specifies the error correction level. Possible values are:
- `L`: ~7% correction
- `M`: ~15% correction
- `Q`: ~25% correction
- `H`: ~30% correction

Default is `Q`.

### `data-encoding`

(string) - Specifies the character encoding for the data. Default is `UTF-8`.

## Example with Attributes

This example demonstrates using the `icon-src` and `icon-size` attributes.

```html
<qr-code icon-src="icon.png" icon-size="3">DATE_GOES-HERE</qr-code>
```

## Important Note on Whitespace

White spaces are not automatically removed. Avoid using tabs or extra white spaces for indentation when encoding multi-line content, as these will be included in the QR code.
```

--------------------------------

### Create A5 Page with Google Font

Source: https://docs.typeset.sh/setup/first-template

Use CSS within your HTML to define page size, margins, and import Google Fonts. This example sets up an A5 page with PT Sans font.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first template</title>
<style>
    @import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
    @page {
        size: A5;
        margin: 10mm;
    }
</style>
</head>
<body>
    Hello World
</body>
</html>
```

--------------------------------

### Style Left and Right Pages in a Document

Source: https://docs.typeset.sh/setup/css-and-paged-media/page-selectors

Differentiate styling for left and right pages in a book-like layout. This example places the page number on the outside edge of each page.

```css
@page:right {
    @bottom-right {
        content: 'Page: ' counter(page);
    }
}
@page:left {
    @bottom-left {
        content: 'Page: ' counter(page);
    }
}
```

--------------------------------

### Generate PDF/A-1B Compliant PDF

Source: https://docs.typeset.sh/advanced-guides/pdf-standards/pdf-a

Use this code to generate a PDF/A-1B compliant PDF from HTML content. Ensure the Typeset.sh library is installed and configured.

```php
<?php
$html = "Hello World, I am a pdf/a-1b conform pdf!";

$service = new \Typesetsh\HtmlToPdf();
//$service->saveHandler['pdf_a'] = new \Typesetsh\HtmlToPdf\A_1A_Web();
$service->saveHandler['pdf_a'] = new \Typesetsh\HtmlToPdf\A_1B_Web();

$result = $service->render($html, \Typesetsh\UriResolver::all());
$result->toFile(__DIR__.'/hello.pdf');

```

--------------------------------

### Add printer marks in CSS

Source: https://docs.typeset.sh/setup/css-and-paged-media/bleed-area

Use the marks property to include crop, cross, or color marks for professional trimming guides.

```css
@page {
    size: A4;
    margin: 10mm;
    bleed: 10mm;
    /* Add one or more marks */
    marks: cross crop colors;
}
```

--------------------------------

### Handle Document Events with data-on

Source: https://docs.typeset.sh/advanced-guides/javascript

Subscribe to document events by adding the `data-on` attribute to your script tag, specifying the event type. For example, to execute code when the document is saved, use `data-on="didSave"`.

```html
<script type="text/javascript" data-pdf data-on="didSave">
    app.alert("Saving complete");
</script>
```

--------------------------------

### Manipulate Page Counters for Cover Page

Source: https://docs.typeset.sh/setup/css-and-paged-media/page-counters

Reset page counters to exclude a cover page from numbering. Set `counter-reset` to -1 for both `page` and `pages` within the `@page:first` rule. This ensures numbering starts correctly on the subsequent page.

```css
@page:first {
    size: A4;
    counter-reset: page -1 pages -1;
    @bottom-right {
        content: none;
    }
}
```

--------------------------------

### Advanced X4 Configuration with Image Preflight

Source: https://docs.typeset.sh/advanced-guides/pdf-standards/pdf-x-4

Configure the X4 save-handler with output intent, DPI settings, and a cache path. Requires the Imagick PHP extension for image processing.

```php
<?php
$html = "Hello World, I am a pdf/x-4 conform pdf!";

$service = new \Typesetsh\HtmlToPdf();
$service->saveHandler['pdf_x4'] = new \Typesetsh\HtmlToPdf\X4(
    outputIntent: new \Typesetsh\Pdf\OutputIntent\PdfX\ECI\PSO_Coated_v3(),
    preflight: true,
    dpi: 350,
    cachePath: __DIR__.'/cache/'
);

$result = $service->render($html, \Typesetsh\UriResolver::all());
$result->toFile(__DIR__.'/hello.x4.pdf');
```

--------------------------------

### Registering and Using Save Handlers

Source: https://docs.typeset.sh/advanced-guides/save-handlers

Initialize an HTML to PDF service, register a predefined save handler and a custom closure save handler, then render and save the PDF. Ensure the save handler signature matches `callable(\Typesetsh\Pdf\Document $document): void`.

```php
$html = 'Hello <strong>World</string>!';

$service = new \Typesetsh\HtmlToPdf();
$service->saveHandler['pdf_a'] = new \Typesetsh\HtmlToPdf\A_1B_Web();
$service->saveHandler['producer'] = function(\Typesetsh\Pdf\Document $document): void {
    $document->Info->Producer = 'My awesome application';
};

$resolveUri = \Typesetsh\UriResolver::all();

$result = $service->render($html, $resolveUri);
$result->toFile(__DIR__.'/hello.pdf');

```

--------------------------------

### Configure Composer Repository

Source: https://docs.typeset.sh/

Add the typeset.sh repository to your project's composer.json configuration.

```bash
composer config repositories.typesetsh composer https://packages.typeset.sh
```

--------------------------------

### Configure PDF/A and render PDF/UA document

Source: https://docs.typeset.sh/advanced-guides/pdf-standards/pdf-ua

Use the A_1B_Web save handler to save the document as PDF/A, ensuring the meta tag is included for proper identification.

```php
<?php
$html = <<<HTML
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="WCAG" content="2.1">
        <title>Hello World</title>
    </head>
    <body>
        Hello World, I am a <strong>UA conform</strong> pdf!
    </body>
</html>
HTML;

$service = new \Typesetsh\HtmlToPdf();
$service->saveHandler['pdf_a'] = new \Typesetsh\HtmlToPdf\A_1B_Web();

$result = $service->render($html, \Typesetsh\UriResolver::all());
$result->toFile(__DIR__.'/ua-tagged.pdf');
```

--------------------------------

### Authenticate Composer

Source: https://docs.typeset.sh/

Set global authentication credentials for the typeset.sh package repository.

```bash
composer config -g http-basic.packages.typeset.sh "{PUBLIC_ID}" "{TOKEN}"
```

--------------------------------

### Style the First Page of a Document

Source: https://docs.typeset.sh/setup/css-and-paged-media/page-selectors

Apply specific styles, such as background color, to the very first page of a document using the :first selector. This is useful for cover pages or introductory pages.

```css
@page {
    size: A4;
    margin: 1cm;
}
@page:first {
    background: red;
}
```

--------------------------------

### Basic PDF/X-4 Document Generation

Source: https://docs.typeset.sh/advanced-guides/pdf-standards/pdf-x-4

Use the X4 save-handler to create a PDF/X-4 compliant file.

```php
<?php
$html = "Hello World, I am a pdf/x-4 conform pdf!";

$service = new \Typesetsh\HtmlToPdf();
$service->saveHandler['pdf_x4'] = new \Typesetsh\HtmlToPdf\X4();

$result = $service->render($html, \Typesetsh\UriResolver::all());
$result->toFile(__DIR__.'/hello.x4.pdf');
```

--------------------------------

### Apply a digital signature to a PDF

Source: https://docs.typeset.sh/advanced-guides/signing-a-pdf

Configure the HtmlToPdf service with a signature object to sign the output file.

```php
<?php
$html = "Hello World!";
$cert = 'file://'.__DIR__.'/my-certificate.crt';

$signature = new \Typesetsh\HtmlToPdf\Signature($cert);
$signature->ContactInfo = 'contact@typeset.sh';
$signature->Location = 'DE';
$signature->Name = 'FooBar';
$signature->Reason = 'Testing';


$service = new \Typesetsh\HtmlToPdf();
$service->saveHandler['signature'] = $signature;
$service->saveHandler['pdf_a'] = new \Typesetsh\HtmlToPdf\A_1B_Web();

$result = $service->render($html, \Typesetsh\UriResolver::all());
$result->toFile(__DIR__.'/hello.signed.pdf');
```

--------------------------------

### Handle PDF rendering errors with try-catch

Source: https://docs.typeset.sh/advanced-guides/error-handling

Wraps PDF creation in a try-catch block to handle fatal exceptions and exposes non-fatal issues as HTTP headers.

```php
try {
    $html = <<<HTML
        <p>Hello,</p>
        <p>This is an simple example.</p>
    HTML;
    
    $resolveUri = \Typesetsh\UriResolver::all();
    $result = \Typesetsh\createPdf($html, $resolveUri);

    $data = $result->asString();
    header('Content-Type: application/pdf');
    header('Content-Length: ' . strlen($data));
    header("Content-Disposition:inline;filename=hello.pdf");
    
    /* Merge PDF errors and resolver errors */
    foreach ([...$result->issues, ...$resolveUri->errors] as $issue) {
        header("X-PDF-Warning: ".$issue->getMessage());
    }

    echo $data;

} catch (Exception $exception) {
    // Snap!
    http_response_code(500);
    echo "Error!";
}
```

--------------------------------

### Configure Page Size and Margins with @page

Source: https://docs.typeset.sh/setup/css-and-paged-media

Use the @page at-rule to set page dimensions, orientation, margins, and background colors for paged documents.

```css
@page  {
    /* Some samples of different page sizes */
    size: A4 landscape;
    margin: 25mm;
    background: red;
}
```

--------------------------------

### Convert URL to PDF using PHP

Source: https://docs.typeset.sh/setup/convert-from-url

Use this snippet to convert HTML content from a URL to a PDF. Ensure the URL is trusted and configure the UriResolver for correct relative path resolution. The base path is derived from the URL, and local paths can be added to the resolver.

```php
// Make sure this is a trusted path!
$url = 'https://typeset.sh/samples/invoice.html';
$base = dirname($url);
$urlResolver = \Typesetsh\UriResolver::all(null, $base, [__DIR__.'/public']);

// Alternativly you could use \Typesetsh\Resource\Cache class as well for this.
$html = file_get_contents($url);

$result = \Typesetsh\createPdf($html, $urlResolver);
$result->toFile(__DIR__.'/invoice.pdf');
```

--------------------------------

### Configure ZUGFeRD Parameters

Source: https://docs.typeset.sh/advanced-guides/pdf-standards/zugferd

Defines the constructor parameters for the ZUGFeRD handler, including file naming, conformance levels, and versioning.

```php
\Typesetsh\HtmlToPdf\ZUGFeRD(
    string $xml,
    string $name = 'factur-x.xml',
    string $description = 'Factur-X/ZUGFeRD Invoice',
    string $type = 'INVOICE',
    string $conformanceLevel = 'BASIC',
    Pdf\Date $modTime = null,
    string $version = '1.0',
)
```

--------------------------------

### Include PHAR file in PHP

Source: https://docs.typeset.sh/

Use this method to include the typeset.sh library directly via a PHAR file.

```php
<?php

require_once 'typeset.sh.lib.phar';
```

--------------------------------

### Convert HTML to PDF with createPdf

Source: https://docs.typeset.sh/advanced-guides/common-object-classes/createpdf-function

Use this function to transform an HTML string into a PDF file. Requires the UriResolver to handle asset paths.

```php
\Typesetsh\createPdf($html, \Typesetsh\UriResolver::all())->toFile('test.pdf');
```

--------------------------------

### Generate a self-signed certificate

Source: https://docs.typeset.sh/advanced-guides/signing-a-pdf

Use OpenSSL to create a self-signed certificate for testing purposes.

```bash
openssl req -x509 -nodes -days 365000 -newkey rsa:2048 -keyout my-certificate.crt -out my-certificate.crt
```

--------------------------------

### Define Document Metadata with Meta Tags

Source: https://docs.typeset.sh/setup/document-metadata

Use these meta elements within the head section to configure document properties and viewer behavior.

```html
<head>
    <title>Hello World</title>    
    <meta name="author" content="John">
    <meta name="description" content="typeset.sh is great">
    <meta name="keywords" content="pdf php typeset.sh">
    <meta name="view.fitWindow" content="yes">
    <meta name="view.displayTitle" content="false">
</head>
```

--------------------------------

### Apply Styles to First Page of Named Pages

Source: https://docs.typeset.sh/setup/css-and-paged-media/page-groups

Use the `@page :nth(1 of <page-name>)` rule to apply styles to the first page of elements assigned a specific page name. This is useful for chapter beginnings or other distinct sections.

```css
@page :nth(1 of chapter) {
    background: lightgrey;
}
```

--------------------------------

### Create a Duotone Color Profile for Gradients

Source: https://docs.typeset.sh/advanced-guides/color-profiles

Define a duotone color space using specific CMYK mappings for two colors. This profile can then be used to create gradients transitioning between these colors.

```css
@color-profile --duotone {
    src: device-cmyk;
    components: "PANTONE Reflex Blue C" 1 0.723 0 0.02,
                "PANTONE Warm Red C" 0 0.75 0.9 0;
}

#gradient {
    background: linear-gradient(to right, color(--duotone 1 0), color(--duotone 0 1));
    height: 1cm;
}
```

--------------------------------

### Add PDF/UA meta tag

Source: https://docs.typeset.sh/advanced-guides/pdf-standards/pdf-ua

Include this meta tag in the document head to trigger the addition of the XMP identifier for PDF/UA support.

```html
<meta name="WCAG" content="2.1">
```

--------------------------------

### Define a Running Element

Source: https://docs.typeset.sh/setup/css-and-paged-media/running-elements

HTML structure and CSS declaration to mark an element as a running element.

```html
<body>
    <div id="header">
        Any header content can go here
    </div>
```

```css

#header {
    /* Position element as running with the id "my-header" */
    position: running(my-header);
}
```

--------------------------------

### Style Blank Pages in a Document

Source: https://docs.typeset.sh/setup/css-and-paged-media/page-selectors

Apply custom styles, like a background color, to blank pages that are automatically inserted due to page break rules. This helps visually distinguish them.

```css
@page:blank {
    background: lightgrey;
}
```

--------------------------------

### Define Margin Boxes with @page

Source: https://docs.typeset.sh/setup/css-and-paged-media

Utilize sub-rules within @page to define content and styling for specific margin areas on a page, including corners.

```css
@page {
    size: A4;
    margin: 2cm;

    /* TOP 3 MARGIN AREAS */
    @top-left {
        content: 'left';
        background: yellow;
    }
    @top-right {
        content: 'right';
        background: red;
    }
    @top-center {
        content: 'center';
        background: green;
    }
    
    /* BOTTOM 3 MARGIN AREAS */
    @bottom-left {
        content: 'left';
        background: yellow;
    }
    @bottom-right {
        content: 'right';
        background: red;
    }
    @bottom-center {
        content: 'center';
        background: green;
    }
    
    /* LEFT 3 MARGIN AREAS */
    @left-top {
        content: 'top';
        background: yellow;
    }
    @left-bottom {
        content: 'bottom';
        background: red;
    }
    @left-middle {
        content: 'middle';
        background: green;
    }
    
    /* RIGHT 3 MARGIN AREAS */
    @right-top {
        content: 'top';
        background: yellow;
    }
    @right-bottom {
        content: 'bottom';
        background: red;
    }
    @right-middle {
        content: 'middle';
        background: green;
    }
    
    /* 4 CORNER MARGIN AREAS */
    @bottom-left-corner {
        content: 'bl';
        background: #587b80;
    }
    @bottom-right-corner {
        content: 'br';
        background: #587b80;
    }
    @top-left-corner {
        content: 'tl';
        background: #587b80;
    }
    @top-right-corner {
        content: 'tr';
        background: #587b80;
    }
}
```

--------------------------------

### Working with the Result Object in PHP

Source: https://docs.typeset.sh/advanced-guides/common-object-classes/result-object

Use the Result Object to set PDF version, access page count and issues, and save or retrieve the generated PDF. The version defaults to 1.6.

```php
$pdf = \Typesetsh\createPdf("Hello World", $resolveUri);

// The version of the PDF file (default 1.6)
$pdf->version = '1.6';

// [Readonly] Number of pages that have been created.
$pdf->pageCount;

// [Readonly] List of \RuntimeException that raised durring rendering.
$pdf->issues;

// Write PDF to a file
$pdf->toFile('test.pdf');

// Return PDF as string
$data = $pdf->asString();

```

--------------------------------

### Define a 5-Component Color Profile

Source: https://docs.typeset.sh/advanced-guides/color-profiles

Create a custom color profile with an additional ink beyond the standard CMYK. Ensure all components are provided when using the color() function.

```css
@color-profile --cmykb {
    src: device-cmyk;
    components: "Cyan" 1 0 0 0,
                "Magenta" 0 1 0 0,
                "Yellow" 0 0 1 0,
                "Black" 0 0 0 1,
                "PANTONE Reflex Blue C" 1 0.723 0 0.02;
}

h1 {
    /* Provide a value for all 5 components */
    color: color(--cmykb { 0 0 0 0 1);
}
h2 {
    color: color(--cmykb { 25% 0 10% 0 80%);
}
```

--------------------------------

### Place a Running Element in a Page Margin

Source: https://docs.typeset.sh/setup/css-and-paged-media/running-elements

Use the element() function within an @page margin rule to display the running element.

```css
@page {
    size: A4;
    margin: 5cm 2cm 2cm 2cm;
    
    @top-center {
        content: element(my-header);
    }
}
```

--------------------------------

### Display Current and Total Page Numbers

Source: https://docs.typeset.sh/setup/css-and-paged-media/page-counters

Use this CSS to display the current page number and the total number of pages at the bottom right of each page. Ensure your CSS is within an `@page` at-rule.

```css
@page {
    size: A4;
    margin: 20mm;

    @bottom-right {
        content: 'Page: ' counter(page) ' of ' counter(pages);
        font-size: 0.7em;
    }
}
```

--------------------------------

### Apply Running Element to Header

Source: https://docs.typeset.sh/setup/css-and-paged-media

Assign a running element to a specific identifier using the `position: running()` CSS property. This prepares the element to be placed in a margin area.

```css
#header {
    /* Position element as running with the id "my-header" */
    position: running(my-header);
}
```

--------------------------------

### HTML Structure for Table of Contents

Source: https://docs.typeset.sh/setup/css-and-paged-media/page-counters

This HTML provides a basic ordered list structure for a table of contents, with each list item containing a link to a specific topic.

```html
<ol id="toc">
    <li><a href="#topic-1">Lorem ipsum dolor</a></li>
    <li><a href="#topic2-">Stet clita kasd</a></li>
</ol>
```

--------------------------------

### Embed QR Code in HTML

Source: https://docs.typeset.sh/advanced-guides/qr-codes

Include the qr-code element in your HTML to display a QR code. You can specify an icon source and size to customize its appearance. The content within the element is the data to be encoded.

```html
<qr-code icon-src="icon.png" icon-size="3">DATE_GOES-HERE</qr-code>
```

--------------------------------

### Define HTML Element for Running Content

Source: https://docs.typeset.sh/setup/css-and-paged-media

Use the `position: running(<identifier>)` CSS property to designate an HTML element for use in page margins. The identifier can be any valid CSS identifier.

```html
<body>
    <div id="header">
        Any header content can go here
    </div>
</body>
```

--------------------------------

### Generate Table of Contents with Target Counter

Source: https://docs.typeset.sh/setup/css-and-paged-media/page-counters

Use the `target-counter` function to display the page number of a linked element. This is commonly used for creating tables of contents where links point to specific sections.

```css
#toc a::after {
    content: ' (' target-counter(attr(href url), page) ')';
}
```

--------------------------------

### Reference an ICC Color Profile

Source: https://docs.typeset.sh/advanced-guides/color-profiles

Utilize an external ICC profile by providing its URL in the src property of the @color-profile rule. Values are then mapped to the profile's color space.

```css
@color-profile --fogra52 {
    src: url('https://www.color.org/registry/profiles/PSOuncoated_v3_FOGRA52.icc');
}

h1 {
    color: color(--fogra52 0 100% 0 0);
}
```

--------------------------------

### Apply Styles to Named Pages

Source: https://docs.typeset.sh/setup/css-and-paged-media/page-selectors

Define a named page style, such as 'wide-table' for landscape orientation, and then apply this style to specific HTML elements like tables with a 'wide' class.

```css
@page wide-table {
    size: A4 landscape;
}

/* Print any table with the class 'wide' on a landscape orientated page */
table.wide {
    page: wide-table;
}
```

--------------------------------

### Attach ZUGFeRD XML to PDF

Source: https://docs.typeset.sh/advanced-guides/pdf-standards/zugferd

Configures the ZUGFeRD save handler on the HtmlToPdf service to embed XML data during the rendering process.

```php
$html = "...";
$xml = "...";

$service = new \Typesetsh\HtmlToPdf();
$service->saveHandler['ZUGFeRD'] = new \Typesetsh\HtmlToPdf\ZUGFeRD($xml);

$result = $service->render($html, \Typesetsh\UriResolver::all());
$result->toFile(__DIR__.'/invoice.pdf');
```

--------------------------------

### Assign Named Pages to Sections

Source: https://docs.typeset.sh/setup/css-and-paged-media/page-groups

Assign a custom page name (e.g., 'chapter') to an HTML element using the `page` property. This allows for targeting specific pages with CSS selectors.

```css
section.chapter {
    page: chapter;
}
```

--------------------------------

### Set Auto Page Height with @page

Source: https://docs.typeset.sh/setup/css-and-paged-media

Configure the @page rule to allow the PDF height to adjust automatically to content, with options for minimum and maximum height.

```css
@page  {
    /* Auto page height */
    size: 400mm auto;
    min-height: 200mm;
    margin: 20mm;
}
```

--------------------------------

### Define CMYK Colors in CSS

Source: https://docs.typeset.sh/advanced-guides/pdf-standards/pdf-x-4

Ensure all document colors are defined in CMYK as Typeset.sh does not perform automatic color conversion.

```css
html, body {
   color: cmyk(0 0 0 100%);
}
```

--------------------------------

### Define Custom Page Areas with @area

Source: https://docs.typeset.sh/setup/css-and-paged-media

Use the @area at-rule within @page to create custom, absolutely positioned layout spaces on the page, similar to margin areas.

```css
@page {
    size: 200px 300px;
    margin: 50px 10px 30px 10px;

    @area foobar {
        content: 'Position me like asboulte elements';
        text-align: center;
        left: 10mm;
        right: 10mm
        bottom: 10mm;
        height: 40mm;
    }
}
```

--------------------------------

### Include JavaScript with data-pdf

Source: https://docs.typeset.sh/advanced-guides/javascript

To include JavaScript in your PDF, the `<script>` tag must have the `data-pdf` attribute. This prevents scripts from being included by default.

```html
<script type="text/javascript" data-pdf>
    // JavaScript code here
</script>
```

--------------------------------

### Define bleed area in CSS

Source: https://docs.typeset.sh/setup/css-and-paged-media/bleed-area

Use the bleed property within an @page at-rule to extend the document area beyond the trim edge.

```css
@page {
    size: A4;
    margin: 10mm;
    bleed: 10mm;
    background: red;
}
```

--------------------------------

### CSS Button Style for Checkbox/Radio

Source: https://docs.typeset.sh/setup/changelog

Use this CSS property to control the visual style of radio and checkbox elements. It allows for custom styling of these form controls.

```css
-typesetsh-button-style: checkbox|radio;

```
Tokens:
Raw