A quick guide to
writing business letters
in Prince

Letters, as in envelopes

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.

Letters without markup

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)

Paper size and margins

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

...

A4 vs letter

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

...

Adding markup

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>

Page numbers

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;
   }
}

Switching letterheads

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>

Browser-friendly letters

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.)

2023-02-16 Håkon Wium Lie

A quick guide to writing business letters in Prince