How to use HTML and CSS for printing

Genre HTMLPDFWhat to look for
Textbook HTMLPDFSidenotes are often placed in the outside margin of textbooks, and in the PDF version of document they alternate between left and right side. Figures and tables float to the top and bottom of pages, and wide content extend into margins. To run this example, use a recent version of Prince, and follow these instructions.
Dictionary HTMLPDFDictionaries often use multi-column layout to save space, and running headers indicate keyword entries on that page. Notice how each letter is marked on a tab on right pages. The fonts used in the PDF version are Satyr and Faunus, made by Monokrom. has a scanned copy of the printed edition from 1910.
Scientific JournalHTML PDFThe USENIX conference Proceedings has a two-column layout with figures floating to the top and bottom. In the HTML source of this sample document, references are inline but appear at the end by way of JavaScript.
Newspaper articleHTMLPDFA typical newspaper article is laid out in several columns, with images spanning two columns.
Textbook HTMLPDFThis book, Cascading Style Sheets – Designing for the Web, was the first printed book written in HTML and CSS. The sample document contains the frontmatter and first chapter.
Fiction HTMLPDFProject Gutenberg has published Oliver Twist and many other classic titles in HTML. By adding a small style sheet, a PDF file can be created. A small script automatically generates the Table of Contents.
LetterHTMLPDF This business letter uses several font families, and even a script to find the current date. The footer at the bottom of the page floats there by itself.
LetterHTMLPDF Why not write business letters in HTML? They can easily be converted to PDF and attached in email. This is a minimalist example to showcase how simple it can be. Click on the HTML link and use View/Source in your browser to see!
Poetry HTMLPDFThis document reconstructs the first edition of Henrik Ibsen's poetry collection, first published in 1871. His typographers in Copenhagen didn't have all the Norwegian letters in they typecases, so they improvised. The modern-day equivalent is to modify font files, and to hand-code other errors they made. The poems are in Norwegian, but a section in English describes the process.
Short story HTMLPDFThis short story by Gogol is found on Project Gutenberg (local copy). The text was cut/pasted into a text editor and a few HTML tags were added, resulting in a basic HTML version. To achieve better quote marks, the quotation marks (") in the text was replaced with <q> elements. After that, a style sheet was added format the text into a PDF file. The text-replace property is used to further improve punctuation, and to replace St. Petersburg with Leningrad. A few footnotes and figures were added to the story on a whim. Note how the style sheet expresses that footnotes should be inline, one figure should float to the top of the column, and the other figure floats to the top of the page.
EssayHTMLPDFThomas Malthus published his essay on Principles of Population in 1798. At the time, the descending "s" was in fashion and this reconstruction uses the 'text-replace' property to recreate the original printed book ( has a scanned copy). Also, the document uses ligatures and the Table of Contents is generated with a script.
TOC + indexHTMLPDFA table of contents (ToC) and an index are basic ingredients in a book. It is hard for authors to write these, as page numbers will change during formatting. This document shows how to offload the task to JavaScript, which happily keeps track of page numbers. Also, the script is able to combine page ranges so that the index doesn't show «3, 4, 5», but rather «3-5». This example requires a version of Prince released in May 2020, or newer.