Report Layout

Print-first document layout — clean on screen, correct on paper. Built-in print stylesheet with URL expansion and page-break hints.

What it is

data-layout="report" is a structured document layout for agent output that needs to look right in two contexts: on screen and when printed or exported to PDF.

It constrains content to 72 characters wide, structures the page into header, main, and footer zones, and ships a @media print stylesheet that handles typography, URL expansion, and page-break hints automatically.

Structure

<div data-layout="report">

  <header>
    <h1>Session Report — 2026-04-02</h1>
    <p>Agent: Vigilio Desto · Mode: autonomous · 7 commits</p>
  </header>

  <main>
    <section>
      <h2>Work completed</h2>
      <p>...</p>
    </section>
  </main>

  <footer>
    Generated 2026-04-02 20:00 UTC · vigilio@trentuna.com
  </footer>

</div>

The three direct children — header, main, footer — are the expected structure. Each gets the same 72ch max-width and horizontal padding. The header gets a bottom border and extra top padding. The footer gets a top border and monospaced type.

Live demo

Site Build Report

Agent: Vigilio Desto · 2026-04-02 · autonomous

Build summary

3 pages compiled from Markdown source. 0 errors. Build time: 1.2s.

File	Size	Status
docs/vault/diff.html	8.2 KB	✓ built
docs/vault/redacted.html	7.1 KB	✓ built
docs/layout/report.html	6.4 KB	✓ built

Issues closed

#67 — data-diff docs page
#68 — data-redacted docs page
#69 — data-layout=report docs page

Print behaviour

The built-in @media print stylesheet activates automatically when printing or exporting to PDF. It:

Switches to white background, black text — page-friendly instead of dark-mode
Sets font size to 11pt — comfortable for printed documents
Expands link URLs — appends (href) after each link so printed pages are navigable
Skips anchor links — local #fragment links don't get URL expansion
Adds page-break hints — h2 and h3 won't orphan from their sections; pre, table, and figure won't split across pages
Hides nav and data-no-print elements — navigation, session banners, and other screen-only UI are removed

Hiding elements from print

<nav data-no-print>
  <a href="/">Back to dashboard</a>
</nav>

<div data-layout="report">
  ...
</div>

data-no-print hides the element in @media print. Anything outside the report layout — navigation, controls, status bars — should get this attribute if it shouldn't appear on paper.

Typical use cases

Session reports — what an agent did in a session, structured for review and archiving.

Audit outputs — structured comparison or validation results that a human will print and sign off.

Change summaries — combined with data-diff for inline diffs within a printed report.

Dashboards for export — a page that displays well on screen but is also intended to be saved as PDF.

With `data-diff`

Diff blocks inside a report render well on screen; on print, code and pre elements get page-break-inside: avoid so diffs don't split across pages.

<div data-layout="report">
  <header><h1>Configuration Audit</h1></header>
  <main>
    <section>
      <h2>Changes detected</h2>
      <div data-diff>
        <span data-diff-file>nginx.conf</span>
        <span data-diff-line="removed">  worker_processes 1;</span>
        <span data-diff-line="added">  worker_processes auto;</span>
      </div>
    </section>
  </main>
</div>

Notes for agents

The three direct children (header, main, footer) give the most predictable output. Other structures work but won't get zone-specific padding and borders.
Don't put the <nav> inside data-layout="report" — it will be hidden on print. Keep nav outside, add data-no-print.
The data-layout="report" element can coexist with a surrounding page layout. The report block will constrain its own content width independently.