CSS2Letter is a browser-based DIN 5008-style A4 letter composer built with plain HTML, CSS, and JavaScript. It includes a neutral starting document and a populated (MathJax) example, automatically creates continuation pages, and can be printed or exported to PDF directly from the browser.
Its pagination is aware of the document structure. Ordinary <p> elements are kept intact: when a paragraph no longer fits in the remaining space, it is moved to the next page instead of being cut at the page boundary. A paragraph is split only as a fallback when it is taller than an entire page body.
(i) Clone or download the repo GitHub and open blank.html in a text editor. (Alternatively, you can try with your developer tools of your browser to edit the letter directly.)
(ii) Replace the placeholders for sender, recipient, reference, etc.
(iii) Write or insert the letter inside <main id="body-main"> and place each paragraph in its own <p> element so the pagination engine can treat it as a coherent block.
(iv) Save the file and open it in a current browser. Continuation pages and page numbers are generated automatically when the content exceeds one page.
(v) Use the print button (or browser’s Print command) to print the document or save it as a PDF.
CSS2Letter is intended as a moldable foundation rather than a closed document generator. The letter remains an ordinary HTML document, so its content, components, and semantics can be changed without learning a proprietary template language.
The graphical elements are entirely controlled by CSS. The pagination code is kept separate from the document content, making it possible to modify the visual system without rebuilding the composition logic.
The current implementation is deliberately compact. It can serve as a finished letter template, a starting point for organization-specific stationery, an agentic tool, or an experimental base for browser-native paged documents.
A major advantage of this HTML-based approach is that the document can use the broader JavaScript ecosystem directly. Libraries for mathematical notation, diagrams, syntax highlighting, data visualization, annotations, or other forms of semantic markup can be loaded like they would be on any ordinary web page.
The project includes a small MathJax integration as an example. It allows LaTeX expressions to remain readable and editable in the source while being rendered as properly typeset notation in the final letter, like the example bellow:
Other libraries, such as Mermaid for diagrams, can be integrated in the same way without changing the pagination model or introducing a separate document format.