Layout · Complete runnable example
Prepare a readable paper layout without claiming that printing succeeded.
This preview runs in an isolated document. Clipboard writes and saved preferences may be blocked, and printing requires the standalone file. A dialog affects only the example. Reset reloads the original example state.
Use print CSS when a document should retain its useful structure on paper. This sample contains fictional item descriptions and totals, and explicitly states that no payment is due. It includes a second notes page to demonstrate a deliberate page break.
The preview, copied text, and downloaded file use this same document.
<!doctype html>
<!--
MIT License
Copyright (c) 2026 MRHTML
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data: blob:; connect-src 'none'; form-action 'none'; object-src 'none'; base-uri 'none'"
/>
<title>Designed for the page. | MRHTML example</title>
<style>
:root {
color-scheme: light;
--paper: #f5f3ee;
--surface: #fff;
--ink: #172a3b;
--muted: #536575;
--line: #d2dce1;
--blue: #234ed8;
--soft: #eef3ff;
--orange: #ad4b17;
--error: #a62440;
font:
16px/1.6 system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
sans-serif;
color: var(--ink);
background: var(--paper);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: clamp(24px, 6vw, 64px) 22px;
min-height: 100svh;
}
main {
width: min(760px, 100%);
margin: auto;
min-width: 0;
}
h1,
h2,
h3,
p {
margin: 0;
}
h1 {
font-size: clamp(2rem, 6vw, 3rem);
line-height: 1.08;
letter-spacing: -0.055em;
font-weight: 680;
max-width: 680px;
}
h2 {
font-size: 1.2rem;
line-height: 1.3;
letter-spacing: -0.02em;
}
p {
color: var(--muted);
}
header {
margin-bottom: 28px;
}
.brand {
font:
700 0.73rem/1.5 ui-monospace,
monospace;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--blue);
margin-bottom: 20px;
}
.intro {
max-width: 62ch;
margin-top: 16px;
}
.surface {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 18px;
padding: clamp(20px, 4vw, 32px);
}
.note {
font-size: 0.85rem;
margin-top: 20px;
}
.eyebrow {
font:
600 0.72rem/1.5 ui-monospace,
monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
button,
input,
textarea,
select {
font: inherit;
}
button {
border: 1px solid var(--ink);
background: var(--ink);
color: #fff;
border-radius: 8px;
padding: 10px 17px;
min-height: 44px;
font-weight: 650;
cursor: pointer;
}
button.secondary {
background: transparent;
color: var(--ink);
border-color: var(--line);
}
button:hover:not(:disabled) {
background: var(--blue);
border-color: var(--blue);
color: #fff;
}
button:disabled {
cursor: not-allowed;
opacity: 0.55;
}
label {
font-weight: 600;
}
input:not([type='checkbox']):not([type='range']):not([type='file']),
textarea,
select {
width: 100%;
min-width: 0;
border: 1px solid #8e9faa;
border-radius: 8px;
padding: 10px 12px;
background: #fff;
color: var(--ink);
}
textarea {
resize: vertical;
min-height: 180px;
}
input[type='range'] {
width: 100%;
accent-color: var(--blue);
}
input[type='checkbox'] {
width: 20px;
height: 20px;
accent-color: var(--blue);
}
:focus-visible {
outline: 3px solid var(--orange);
outline-offset: 4px;
}
a {
color: var(--blue);
}
.status {
min-height: 1.6em;
font-size: 0.9rem;
margin-top: 18px;
overflow-wrap: anywhere;
}
.status[data-error='true'] {
color: var(--error);
}
[hidden] {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.field {
display: grid;
gap: 7px;
margin-top: 16px;
}
footer {
font-size: 0.75rem;
color: var(--muted);
border-top: 1px solid var(--line);
margin-top: 30px;
padding-top: 16px;
display: flex;
justify-content: space-between;
gap: 12px;
}
noscript {
display: block;
padding: 14px;
background: #fff2d9;
border: 1px solid #ad4b17;
margin-top: 20px;
border-radius: 8px;
color: var(--ink);
}
@media (max-width: 400px) {
body {
padding: 25px 16px;
}
.surface {
padding: 20px;
}
button {
padding: 10px 14px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation: none !important;
transition: none !important;
}
}
main {
width: min(850px, 100%);
}
.print-toolbar {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 25px;
}
.print-toolbar p {
font-size: 0.8rem;
max-width: 400px;
}
.print-toolbar button {
flex-shrink: 0;
}
.invoice {
background: #fff;
border: 1px solid var(--line);
padding: clamp(20px, 5vw, 48px);
box-shadow: 0 8px 30px #172a3b06;
}
.invoice-heading {
display: flex;
justify-content: space-between;
gap: 30px;
}
.invoice h2 {
font-size: 2.4rem;
margin-top: 12px;
}
.sample-stamp {
color: var(--orange);
font-size: 0.75rem;
margin-top: 10px;
}
.invoice dl {
margin: 0;
font-size: 0.8rem;
min-width: 160px;
}
.invoice dl div {
display: flex;
justify-content: space-between;
gap: 20px;
margin-bottom: 8px;
}
.invoice dt {
color: var(--muted);
}
.invoice dd {
margin: 0;
}
.parties {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
border-top: 1px solid var(--line);
padding-top: 25px;
margin: 30px 0;
}
.invoice h3 {
font-size: 1rem;
margin: 9px 0;
}
.parties p {
font-size: 0.85rem;
}
.table-scroll {
overflow: auto;
}
table {
border-collapse: collapse;
width: 100%;
font-size: 0.8rem;
}
caption {
text-align: left;
font-weight: 650;
font-size: 0.9rem;
margin-bottom: 12px;
}
th,
td {
text-align: right;
padding: 14px 9px;
border-bottom: 1px solid var(--line);
}
th:first-child {
text-align: left;
}
thead th {
font-size: 0.7rem;
color: var(--muted);
background: var(--paper);
}
tbody th {
font-weight: 500;
width: 48%;
}
td {
white-space: nowrap;
}
tfoot th,
tfoot td {
font-weight: 750;
font-size: 0.95rem;
border-bottom: 2px solid var(--ink);
padding-top: 22px;
}
.invoice-note {
font-size: 0.75rem;
margin-top: 20px;
}
.print-notes {
margin-top: 45px;
padding-top: 30px;
border-top: 1px solid var(--line);
}
.print-notes h2 {
font-size: 1.75rem;
margin-bottom: 18px;
}
.print-notes p,
.print-notes li {
font-size: 0.9rem;
line-height: 1.8;
}
.print-notes h3 {
margin-top: 25px;
}
.print-notes ul {
padding-left: 20px;
color: var(--muted);
}
.document-end {
margin-top: 35px;
font:
500 0.7rem ui-monospace,
monospace;
}
@media (max-width: 570px) {
.invoice-heading {
display: block;
}
.invoice dl {
margin-top: 24px;
}
.parties {
grid-template-columns: 1fr;
gap: 20px;
}
.print-toolbar {
display: block;
}
.print-toolbar p {
margin-top: 12px;
}
th,
td {
padding: 12px 5px;
font-size: 0.72rem;
}
tfoot th,
tfoot td {
font-size: 0.8rem;
}
}
@page {
size: A4;
margin: 16mm;
}
@media print {
body {
padding: 0;
background: white;
color: black;
font-size: 11pt;
}
main {
width: auto;
max-width: none;
}
main > header,
.print-toolbar,
main > footer,
noscript {
display: none !important;
}
.invoice {
padding: 0;
border: 0;
box-shadow: none;
}
.invoice,
.invoice p,
.invoice li,
.invoice dt,
thead th {
color: black;
}
thead th {
background: none;
}
.invoice-heading {
display: flex;
}
.parties {
grid-template-columns: 1fr 1fr;
}
.table-scroll {
overflow: visible;
}
table {
width: 100%;
font-size: 10pt;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
tr,
.parties,
.invoice-heading {
break-inside: avoid;
}
th,
td {
border-color: #888;
}
h2,
h3 {
break-after: avoid;
}
p {
orphans: 3;
widows: 3;
}
.print-notes {
break-before: page;
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.print-notes h2 {
font-size: 24pt;
}
}
</style>
</head>
<body>
<main>
<header>
<p class="brand">MRHTML / Runnable example</p>
<h1>Designed for the page.</h1>
<p class="intro">
A fictional invoice with a clean print layout, repeating table
headings and a separate notes page.
</p>
</header>
<div class="print-toolbar">
<button id="print-document" type="button" disabled>
Open print dialog
</button>
<p id="print-status" role="status">
Printing becomes available in a standalone copy with JavaScript.
</p>
</div>
<article class="invoice">
<div class="invoice-heading">
<div>
<p class="eyebrow">Northline / Sample studio</p>
<h2>Invoice</h2>
<p class="sample-stamp">Fictional example · No payment due</p>
</div>
<dl>
<div>
<dt>Reference</dt>
<dd>DEMO-026</dd>
</div>
<div>
<dt>Issued</dt>
<dd>1 October 2026</dd>
</div>
<div>
<dt>Currency</dt>
<dd>USD</dd>
</div>
</dl>
</div>
<div class="parties">
<div>
<p class="eyebrow">Prepared for</p>
<h3>Example Project</h3>
<p>Fictional design exercise<br />No customer address</p>
</div>
<div>
<p class="eyebrow">Prepared by</p>
<h3>Northline Studio</h3>
<p>Demonstration identity<br />No payment destination</p>
</div>
</div>
<div class="table-scroll">
<table>
<caption>
Example project items
</caption>
<thead>
<tr>
<th scope="col">Description</th>
<th scope="col">Qty</th>
<th scope="col">Rate</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Interface exploration</th>
<td>4</td>
<td>$120.00</td>
<td>$480.00</td>
</tr>
<tr>
<th scope="row">Content structure</th>
<td>3</td>
<td>$100.00</td>
<td>$300.00</td>
</tr>
<tr>
<th scope="row">Prototype review</th>
<td>2</td>
<td>$110.00</td>
<td>$220.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="3">Example total</th>
<td>$1,000.00</td>
</tr>
</tfoot>
</table>
</div>
<p class="invoice-note">
These numbers illustrate document layout. This is not a real bill,
receipt, tax document or payment request.
</p>
<section class="print-notes">
<p class="eyebrow">Document notes / Page 2 in print</p>
<h2>A useful paper trail.</h2>
<p>
This second section starts on a fresh printed page. The document
keeps its title, item descriptions and totals together wherever
possible. The notes remain readable without relying on colored
backgrounds.
</p>
<h3>What belongs in a real document</h3>
<ul>
<li>Verified business and recipient details.</li>
<li>Clear descriptions that match the agreed scope.</li>
<li>
Dates, currency and totals checked against the source records.
</li>
<li>Applicable terms reviewed for the actual transaction.</li>
</ul>
<h3>Before you print</h3>
<p>
Review the browser’s paper size, margins and scale. Browser-added
headers and footers are controlled in the print dialog, not by this
example. Preview the resulting pages before saving or printing them.
</p>
<p class="document-end">End of sample document / MRHTML</p>
</section>
</article>
<noscript
>The complete sample document is readable and printable with your
browser’s built-in print command. The example button needs
JavaScript.</noscript
>
<footer>
<span>MRHTML example</span><span>Original code · MIT</span>
</footer>
</main>
<script>
'use strict';
(() => {
const button = document.querySelector('#print-document'),
status = document.querySelector('#print-status');
if (window.top !== window.self) {
status.textContent =
'This embedded preview cannot open the print dialog. Download the HTML and open it as a standalone page to print.';
return;
}
if (typeof window.print !== 'function') {
status.textContent =
'Printing is unavailable in this browser. Use the browser’s own print command if supported.';
return;
}
button.disabled = false;
status.textContent =
'Ready. Open your browser’s print dialog to review the document. Nothing prints automatically.';
button.addEventListener('click', () => {
try {
status.textContent =
'Print dialog requested. Review its settings before printing.';
window.print();
} catch {
status.textContent =
'The browser blocked printing. Try its built-in print command.';
}
});
window.addEventListener('afterprint', () => {
status.textContent =
'The print dialog closed. The browser does not report whether you printed or canceled.';
});
})();
</script>
</body>
</html>