This guide will show you how to use HTML and CSS for your business letters. And you personal letters, angry or sweet.
The formatter of choice is Prince, an HTML-and-CSS-to-PDF converter. The screenshots you see, and the PDF documents linked from this guide, have all been generated with Prince. You can easily create the same pdf files by downloading Prince and pointing it to the HTML links provided in this document.
In this first example, almost no markup or styling is present. You only need a starting <html>
tag and one-line style sheet to tell Prince that newlines should be honored. This is very simple way of generating a decent-looking letter:
html<html><style>body { white-space: pre-line }</style> Sir Hugo Baskerville Baskerville Hall Dartmoor England September 29, 2024 The Prime Minister 10 Downing Street London SW1A 2AA United Kingdom Dear Prime Minister, I write you regarding the typography on your house in 10 Downing Street. I do think that the two white digits on the dark door is quite beautiful. As I plan to remodel my own house in the style of 10 Downing Street, I have a question: What is the name of the font family you have used for those digits? Governments should not underestimate the importance of their typographic policies, and I am quite sure that many fellow voters feel the same way. Once my redecoration is completed, I will send you an invitation to my home so that you personally can inspect the typographic result. Best regards, Sir Hugo Baskerville (signed)
Setting the paper size and margins is also possible in our markup-free example. A4 is a commonly used paper size:
html<html> <style> @page { size: a4; margin: 20mm } body { white-space: pre-line } </style> Sir Hugo Baskerville Baskerville Hall Dartmoor England September 29, 2024 ...
In North America, you would typically use the letter
page size instead of a4
. In this example, we have also switched from millimeters (mm) to inches (in) to go along, stylistically:
html<html> <style> @page { size: letter; margin: 1in } body { white-space: pre-line } </style> Sir Hugo Baskerville Baskerville Hall Dartmoor England September 29, 2024 ...
By marking up the letter with HTML tags, we add semantics and make it possible to give the letter more advanced formatting. In this example, we use the header
element for the letterhead, the address
element for the address, and some div
elements with sensible class names:
html<header> Baskerville </header> <address> The Prime Minister 10 Downing Street London SW1A 2AA United Kingdom </address> <div class=date>January 29, 2024</div> <div class=message> <p>Dear Prime Minister, <p>I write you regarding the typography on your house in 10 Downing Street. I do think that the two white digits on the dark door is quite beautiful. As I plan to remodel my own house in the style of 10 Downing Street, I have a question: What is the name of the font family you have used for those digits? <p>Governments should not underestimate the importance of their typographic policies, and I am quite sure that many fellow voters feel the same way. Once my redecoration is completed, I will send you an invitation to my home so that you personally can inspect the typographic result. </div> <div class=sign> Best regards, Sir Hugo Baskerville (signed) </div>
A footer typically appears at the bottom of all pages of a letter. By using running elements
, we make sure the footer appears on all pages:
html@page{ @bottom-center { content: element(footer); border-top: thin solid red; width: 80%; } } footer { position: running(footer) } <footer> Baskerville Hall · Grimpen · Dartmoor · England </footer>
Long letters should have page numbers starting from page 2.
html@page { @top-center { vertical-align: bottom; padding-bottom: 1rem; content: "page counter(page) " of " counter(pages); } } @page :first { @top-center { content: none; } }
If you have several roles or addresses, class names provide an easy way to switch between them without changing your template. In this example, there are two header
elements, only one of which should be visible. By setting the class
to c
, the caslon
letterhead is shown.
htmlheader { display: none } body.b header.baskerville { display: block } body.c header.caslon { display: block } <body class=c> <header class=baskerville>Baskerville</header> <header class=caslon>Caslon<small>(in disguise)</small></header>
PDF is the natural format for Prince to produce, but the HTML document can also be published in its original form. Constraining the width and setting backgrounds make sense:
html@media screen { html { background: black; } body { max-width: 50rem; background: white; margin: 2rem auto; padding: 3rem } footer { display: none } footer.copy { display: block; width: 60%; margin: 3rem auto 0; border-top: thin solid red; padding-top: 1rem } }
Click on the html
link on the right side to see the result. On a scrolled page, the footer should only appear once, at the end. This example therefore has two footer elements: one which is visible on every page of the PDF, and one which is visible at the bottom of the HTML version. (With a small script, we could have used only one element and moved it to the end for screen use.)