HTML to PDF that looks exactly like the browser, without a browser on the server. The exporting user's browser computes the layout; PHP only draws the PDF. Runs on shared hosting (PHP + GD).

Overview

Generating PDFs from HTML usually ends up in one of these dead ends:

Jh2Pdf starts from a different idea: the exporting user's browser is already the best layout engine there is, and it is already open. Instead of reimplementing CSS in PHP, the browser computes where every word, box, border and image goes, and PHP only draws those positions. There is no line breaking or layout computation on the server to get wrong.

How it works

 BROWSER (js/jh2pdf.js)                                 SERVER (PHP)
 ──────────────────────                                 ────────────
 your HTML + your CSS                                   Options  (tempDir, fontDir, imageResolver…)
   │ renders each page off-screen                          │
   │ (waits for fonts and images)                          ▼
   ▼                                                    Layout::clean()   validates everything (the JSON is hostile)
 extractLayout()  walks the DOM:                           │
   getComputedStyle + Range.getClientRects per word        ▼
   │                                                    Renderer::render()  → Dompdf\Cpdf
   ▼                                                       R rectangle · B borders · T text · I image
 JSON of operations ──────── POST ───────────────────►     M hand mark · L line · C/E clip
 { w, h, pages: [{ bg, ops: [...] }] }                     │
                                                           ▼
                                                        PDF bytes

1. Measuring (browser). Each page is inserted into an off-screen container inside your own document, so your CSS applies. The module waits for fonts (document.fonts.ready) and images (up to 4 s each).
2. Extraction. For each visible element it reads the computed style and boxes; for each word, its exact position and width. The result is an ordered list of drawing operations (the order is the paint order).
3. Drawing (server). PHP validates the JSON and draws the operations with Dompdf's Cpdf, used only as a PDF "canvas". Each word is placed on its baseline and its letter spacing is adjusted so it has exactly the measured width.

Requirements

Installation

With Composer

composer require geisonq/jh2pdf

Or, from this repository: composer install at the root (installs Dompdf into vendor/).

Without Composer

Copy the folder and use the bundled autoloader. Dompdf is still required and you must load it yourself:

require '/path/jh2pdf/autoload.php';      // Jh2Pdf\* classes
require '/path/vendor/autoload.php';      // Dompdf

In the browser

Copy js/jh2pdf.js to your site. It is an ES module with no dependencies (~30 KB, unminified).

Quick start

1. Browser

import { extractLayout } from './jh2pdf.js';

const layout = await extractLayout(
  ['<h1>Hello</h1><p>First page</p>', '<p>Second page</p>'],  // one HTML fragment per page
  { width: 794, height: 1123 }                                   // A4 portrait in CSS px
);
const res = await fetch('/pdf.php', {
  method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(layout),
});
const pdf = await res.blob();                                  // application/pdf
window.open(URL.createObjectURL(pdf));

2. Server (pdf.php)

require 'vendor/autoload.php';

$raw    = file_get_contents('php://input', false, null, 0, 5_000_000);   // limit the body size
$layout = json_decode((string)$raw, true);
if (!is_array($layout)) { http_response_code(400); exit; }

$options = new Jh2Pdf\Options('/writable/path');
try {
    $pdf = (new Jh2Pdf\Renderer($options))->render($layout, 'Document title');
} catch (Jh2Pdf\Exception $e) {
    error_log((string)$e->getPrevious());             // details are in the previous exception
    http_response_code(500); exit;
}
header('Content-Type: application/pdf');
echo $pdf;

Runnable examples: examples/minimal/ (the bare minimum) and demo/ (gallery with tables, effects and images).

JavaScript API

extractLayout(pages, options) → Promise<Layout>

pages is an array with one entry per page: an HTML string, a { html } object, or any value if you pass wrap.

Returns { w, h, pages: [{ bg, ops }] }, ready for JSON.stringify. Throws Error if width or height is missing.

PHP API

Namespace Jh2Pdf, PHP 8.1 with strict_types.

Options

JSON format

This is the contract between the JS and PHP sides. Measurements in CSS px, origin at the top-left corner, colors as #rrggbb, opacity from 0 to 1. The full reference is in docs/format.md (in Portuguese).

{ "w": 794, "h": 1123,
  "pages": [ { "bg": "#ffffff", "ops": [
      { "t": "R", "x": 0, "y": 0, "w": 794, "h": 300, "c": "#4f46e5", "a": 1, "r": [12,12,0,0] },
      { "t": "T", "x": 60, "y": 80, "w": 92.4, "h": 44, "s": "Lorem", "f": "Jh Display", "g": 700, "z": 40, "c": "#ffffff" }
  ] } ] }

Supported CSS

Layout itself (flexbox, grid, positioning, calc(), variables, units) is always supported, because the browser computes it. The table below is about what gets drawn.

Pages and sizes

Each item in pages is one PDF page, sized width × height. There is no automatic pagination: anything taller than the page is cut off. Split your content into pages before extracting (for example, one section per page, or by measuring heights in the browser).

Accepted sizes range from 200 to 4000 px per side.

Fonts

For the PDF to look exactly like the screen, the browser and the server must use the same font files. Dompdf cannot read woff2 or variable fonts, so the server uses static TTFs, one per weight. There are three ways to give it fonts:

$options = new Jh2Pdf\Options('/writable/path');
$options->addFont('Roboto', 400, '/fonts/Roboto-Regular.ttf')
        ->addFont('Roboto', 400, '/fonts/Roboto-Italic.ttf', italic: true)
        ->addFont('Roboto', 700, '/fonts/Roboto-Bold.ttf')
        ->addFontDir('/more/fonts');

How a font is chosen

The same rules as CSS:

• Family: the first family of the font-family list that the server has ('Roboto', Arial, sans-serif uses Roboto, or Arial if you have it; generic names such as sans-serif are not fonts). The browser sends up to 5 fallbacks after the first.
• Style: italic if the family has an italic file; otherwise the regular style slanted 12°, as the browser does.
• Weight: from 100 to 900, the closest file you have: asking for 800 with only 400 and 700 uses 700; 300 uses 400.

Make the browser use the same files

Generate the @font-face CSS from the very same fonts, so there are never two lists to keep in sync:

// once, when you deploy (reading the names inside the TTFs is slow to do on every request)
file_put_contents('public/fonts.css', Jh2Pdf\FontFaces::css($options, '/fonts/'));

or from the command line: php tools/fonts-css.php --dir fonts --url /fonts/ --out public/fonts.css With Composer, the script is vendor/geisonq/jh2pdf/tools/fonts-css.php.

Never fail silently

A family the server does not have is drawn in fallbackFont (DejaVu Sans), and the PDF looks different from the screen. To catch it:

$options->strictFonts = true;   // throws Jh2Pdf\Exception: "Missing fonts: Roboto 400, Roboto 700 italic."
$options->onMissingFont = fn(string $family, int $weight, bool $italic) => error_log("Missing font: $family $weight");

$pdf = $renderer->render($layout);
$renderer->missingFonts();      // [['family' => 'Roboto', 'weight' => 400, 'italic' => false], …]

The check runs before anything is drawn. Use strictFonts in development and tests; in production, log with onMissingFont or missingFonts().

Adding a font from a variable font

pip install fonttools brotli
python tools/generate-fonts.py --fonts fonts.json --src font-source-folder --out fonts

Python is only needed to generate files (--weights 300,400,700 chooses the weights; the fonts.json format is in the script header). It writes the right family, style and weight inside each TTF. To fix the names of static TTFs you already have: python tools/generate-fonts.py --fix-names folder. The server uses the ready-made TTFs. Check that the font's license allows embedding it in PDFs.

Bundled (12 families, SIL OFL 1.1): Barlow Condensed, DM Sans, Fira Code, Inter, JetBrains Mono, Montserrat, Nunito, Open Sans, and four renamed serif families: Jh Serif (from Lora), Jh Serif Text (from Merriweather), Jh Display (from Playfair Display) and Jh Serif Book (from Source Serif 4). With italics: DM Sans and Jh Serif.

Images

Each image's src comes from the browser and is not trusted. By default only data: is accepted (no disk, no network). To serve images from your system, implement a resolver and check that this user may see this file:

final class MyResolver implements Jh2Pdf\ImageResolver
{
    public function load(string $src): ?string
    {
        // only your URL pattern; never concatenate src into a path
        if (!preg_match('~^/uploads/([a-f0-9]{16}\.(png|jpg))$~', $src, $m)) return null;
        $f = '/var/app/uploads/' . $m[1];
        return is_file($f) ? file_get_contents($f) : null;
    }
}
$options->imageResolver = new MyResolver();

In the browser, acceptImage avoids sending what the server would refuse. Images are downsized to their displayed size (~150 dpi): opaque ones become JPEG, transparent ones stay PNG.

Hand-drawn marks

An optional extension, off by default (it is not standard HTML/CSS), for highlighting text with a "hand-drawn" stroke: underline, circle, highlight, box, strike, cross.

<span class="mk mk-circle" style="--mk-color:#e5484d">important</span>

With marks: true, the extractor sends the box and color of the marked text; PHP draws the shape's SVG from resources/marks.css (or your own CSS, via Options::$marksCss). Without --mk-color, the text color is used. Even elements use the 2nd variant (:nth-of-type(even)), and a mark with display: inline that wraps gets one drawing per line. Without marks: true, .mk classes are treated like any other element. The on-screen CSS (a mask on ::after) is in demo/pages.css.

Security

There are two trust boundaries, and on each one whatever comes from the other side is treated as hostile.

Server: the JSON from the browser

Anyone who can call your endpoint can send hand-crafted JSON. By design, the server never interprets HTML, CSS or JavaScript.

Browser: the input HTML

Each page's HTML goes into the exporting user's DOM. If it comes from someone else, it is hostile input (XSS). The module first places the HTML in an inert <template> and removes script, iframe, object, embed, link, meta, base, on* attributes, srcdoc, javascript: URLs and non-image data: URLs, and expression(). This is a fallback filter: for third-party content, use a real sanitizer:

extractLayout(pages, { width, height, sanitize: (h) => DOMPurify.sanitize(h) });

<style> and url() in CSS are still allowed. They don't execute code, but they can trigger requests (tracking).

Performance

Measured with the examples gallery (7 A4 pages, ~2,400 operations, 9 filtered images) on an ordinary PC with XAMPP and PHP 8.2:

• Filters (blur, drop-shadow) are the most expensive part. Without them, text and table pages take a fraction of a second.
• The same image with the same filter and size is processed only once per PDF (cached).
• For large documents, send images by URL and use an ImageResolver instead of repeating data: in the JSON.

Troubleshooting

Dependencies

Production

In the browser: no dependencies (js/jh2pdf.js is plain JavaScript).

Development only

License

Jh2Pdf's code is released under the MIT license, © 2026 Geison Quevedo. Anyone may use, copy, modify, merge, publish, distribute, sublicense and sell it, including in closed-source projects, as long as the copyright notice and license text are kept. The fonts (OFL) and Dompdf (LGPL) have their own licenses, described in Dependencies.

Structure

jh2pdf/
├── LICENSE               MIT
├── README.md             summary and quick start
├── composer.json         package (PSR-4 autoload: Jh2Pdf\ → src/)
├── autoload.php          autoloader for projects without Composer
├── src/                  PHP: Renderer, Options, Layout, ImageResolver, DataUriImageResolver,
│                              Images, ImageFilter, Fonts, Marks, Svg, Exception
├── js/jh2pdf.js          layout extractor (ES module, no dependencies)
├── fonts/                static TTFs (OFL) + OFL.txt
├── resources/marks.css   SVG drawings of the hand-drawn marks
├── docs/                 this documentation (en, pt-BR, es) + format.md (the JSON format)
├── demo/                 examples gallery (index.html, pages.css, fonts.css, pdf.php)
├── examples/minimal/     the smallest complete example
├── tests/run.php         tests (php tests/run.php or composer test)
├── tools/fonts-css.php   generates the browser's @font-face CSS from the same fonts
└── tools/generate-fonts.py   generates the TTFs from variable fonts

Contributing

• Tests: composer install and composer test. There is no test framework, just tests/run.php.
• Quality bar: match the screen. Produce a PDF from the browser (Print → Save as PDF) and from this library and compare them side by side, zoomed in (for example, with PyMuPDF: page.get_pixmap(dpi=200)).
• New operation (for example, radial gradients): (1) the extractor in js/jh2pdf.js emits the operation; (2) Layout::OPS gets the letter; (3) Renderer::render gets the case; (4) document it in docs/format.md; (5) test it in tests/run.php. Validate every new field: it is hostile input.
• Style: PHP 8.1 with declare(strict_types=1), no dependencies besides Dompdf. Dependency-free JS, with top-level names prefixed with pl.
• Contributions are accepted under the project's license (MIT).