Beautiful PDFs from HTML

Before we get started

  1. Fork the repo at https://github.com/ashok-khanna/pdf
  2. View the beautiful sample output at https://ashok-khanna.github.io/pdf/

1: Introduction

2: Getting Started

2.1: Installation

<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>

2.2: Alternate (easier) Installation

2.3: Media Queries

@media print { 
.sidebar { display: none; }
}

3: Basic Features

3.1: Page Size

@page { size: A4; }
@page { size: A4 landscape; }@page { size: 140mm 200mm; }

3.2: Page Breaks

.page-break { break-after: page; }
<div class="page-break"></div>
h2:not(.no-break) { break-before: page; }

3.3: Page Numbers

@page {
@bottom-right { content: counter(page); }
}

3.4: Headers & Footers

@page {
@top-right { content: "Confidential" }
@bottom-left {
content: "Beautiful PDFs from HTML";
width: 40mm
}
}

4: Advanced Features

4.1: Automatic Counters

body {
counter-reset: sectionNumber;
counter-reset: subsectionNumber;
counter-reset: figureNumber;
}
h2:not(.no-counter) {
counter-increment: sectionNumber;
}
h2 {
counter-reset: subsectionNumber;
}
h3:not(.no-counter) {
counter-increment: subsectionNumber;
}
h3 {
counter-reset: figureNumber;
}
figure:not(.no-counter) {
counter-increment: figureNumber;
}
h2:not(.no-counter):before {
content: counter(sectionNumber) ". ";
}
h3:not(.no-counter)::before {
content: counter(sectionNumber) "." counter(subsectionNumber) " ";
}
figcaption:not(.no-counter)::before {
content: "Fig. " counter(sectionNumber) "." counter(subsectionNumber) "." counter(figureNumber) " ";
}

4.2: Headers & Foooters (contd.)

<p class="footer"><a href="#toc-start">Return to Table of Contents</a></p>.footer {
position: running(footerRunning);
}
@page {
@bottom-left {
content: element(footerRunning);
width: 40mm;
}
}
h2 {
string-set: section content(text);
break-before: page;
}

h3 {
string-set: subsection content(text);
}
@page {
@top-right {
content: string(section) " - " string(subsection);
}
}

4.3: Cover Pages

In HTML:<div class="cover-page">
<h1>Beautiful PDFs from HTML</h1>
<h3>An introductory guide by Ashok Khanna</h3>
<h3>April 2021</h3>
</div>
In CSS:.cover-page { page: cover-page; }@page cover-page {
background-color: #347DBD;
color: white;
@top-right { content: none; }
@bottom-left { content: none; }
@bottom-right { content: none; }
}

5: Other Notes

5.1: Table of Contents

class handlers extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
beforeParsed(content){
createToc({
content: content,
tocElement: '#toc',
titleElements: [ 'h2:not(.cover-header)', 'h3:not(.cover-header)' ]
});
}
}
Paged.registerHandlers(handlers);
<div class="table-of-contents">
<h1 class="toc-header" id="toc-start">Table of Contents<</h1>
<ol id="toc">
</ol>
</div>

5.2: Exporting to PDF

Print Settings in Safari
Print Settings in Chrome

5.3: Banners

In CSS:@page top-banner {
@top-left-corner { background-color: #445a75; content: " "; }
@top-left { background-color: #445a75; content: " "; }
@top-center {
background-color: #445a75;
color: white;
content: "Sample Banner Text";
}
@top-right { background-color: #445a75; content: " "; }
@top-right-corner { background-color: #445a75; content: " "; }
}
.banner-class { page: top-banner; }
In HTML:<div class="banner-class">Content Goes Here<div>

…and that’s it for today!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ashok Khanna

Ashok Khanna

Masters in Quantitative Finance. Writing Computer Science articles and notes on topics that interest me, with a tendency towards writing about Lisp & Swift