Write a DIN 5008 letter

This recipe builds a German business letter that follows the DIN 5008 Form B layout: the recipient address sits exactly in the window of a DIN Lang envelope, fold marks on the left edge help with tri-folding, and the letter body is plain Markdown.

Full example: glu/markdown/letter-din5008

The idea

DIN 5008 measures everything from the physical page edge: the address field starts 45 mm from the top and 20 mm from the left, sized 85 × 45 mm. That maps directly to CSS position: absolute boxes. Two files are involved:

Step 1: zero the page margin

Absolute positioning resolves against the page area. Since DIN 5008 measures from the page edge, set the @page margin to zero and give the text body its margins back via body padding:

@page {
    size: A4;
    margin: 0;
}

body {
    font-family: serif;
    font-size: 11pt;
    line-height: 1.35;
    padding: 2.5cm 2cm 2cm 2.5cm;
}

The stylesheet is wired up in the Markdown frontmatter:

---
title: DIN 5008 letter
lang: en
css: letter-din5008.css
---

Step 2: position the fixed slots

The recipient box lands in the envelope window, the fold marks anchor at the physical left edge:

/* DIN 5008 Form B: address field 45 mm from the top, 20 mm from
 * the left, 85 x 45 mm, matching a DIN Lang envelope window. */
.letter-recipient {
    position: absolute;
    top: 4.5cm;
    left: 2cm;
    width: 8.5cm;
    height: 4.5cm;
}

.letter-fold-mark-top,
.letter-fold-mark-bottom {
    position: absolute;
    left: 0;
    width: 5mm;
    border-top: 0.4pt solid #888;
    height: 1pt;
}
.letter-fold-mark-top    { top: 10.5cm; }
.letter-fold-mark-bottom { top: 21.0cm; }

The date is anchored to the right edge instead, using right: 2cm with text-align: right.

In the Markdown source, the slots are raw HTML elements carrying these classes (raw HTML is allowed inside Markdown):

<div class="letter-recipient">
Max Example Ltd.<br>Human Resources<br>1 Example Avenue<br>12345 Exampleville
</div>

<div class="letter-fold-mark-top"></div>
<div class="letter-fold-mark-bottom"></div>

<div class="letter-date">
Sampletown, 25 May 2026
</div>

Step 3: let the body flow

Only the slots are positioned. The subject line and everything after it stay in the normal flow, so the text wraps and paginates like any other document. The subject is a heading with an attached class, pushed below the absolutely positioned blocks with a margin-top:

## Application as a Typesetter {.letter-subject}

Dear Sir or Madam,

I read your job advertisement with great interest and would like
to apply for the position you advertised.

h2.letter-subject {
    margin-top: 10.2cm;
    margin-bottom: 0.6cm;
    font-size: 11pt;
    font-weight: bold;
}

Run it

glu letter-din5008.md

This produces letter-din5008.pdf.

Customising

The class names are deliberately neutral (letter-sender, letter-recipient, letter-date, …), so the CSS file drops into your own letter templates unchanged. Override the offsets if your envelope window or corporate-design grid differs.

Related

• Markdown mode for frontmatter and custom CSS
• HTML mode for the supported CSS features