Printing

How Vanilla Breeze handles print output: automatic optimizations, page modes, visibility control, page breaks, and the print button component.

Philosophy

Most CSS frameworks ignore print entirely, leaving you to write a separate print stylesheet. VB takes the opposite approach: the print layer ships inside main.css and activates automatically via @media print.

The design principle is works by default, enhance when needed:

  • Default — every page gets a clean print reset (black text, no shadows, linearized layout). No attributes required.
  • Enhanced — pages intended for print (articles, invoices, reports) add data-print on <body> to unlock @page rules, page numbers, and section breaks.
  • Granular — individual elements can be shown, hidden, or protected from page breaks with data attributes.

Because VB’s design tokens drive all colors and spacing, the print layer only needs to reset the tokens — every element using them automatically adapts to paper.

What Happens Automatically

When a VB page is printed, the following optimizations apply with no extra markup:

  • Color reset — design tokens switch to black-on-white. No per-element overrides needed.
  • Shadows removed — box-shadow and text-shadow are stripped from all elements.
  • Link expansion — external URLs are printed after link text, e.g. Example (https://example.com). Image links and anchor links are suppressed.
  • Abbreviation expansion — <abbr> titles are printed inline, e.g. CSS (Cascading Style Sheets).
  • Layout linearization — sidebars collapse to single-column. Sticky positioning is disabled.
  • Element hiding — <nav>, <dialog>, <search>, non-submit buttons, range inputs, and interactive VB components are hidden.
  • Page break protection — tables, blockquotes, figures, code blocks, and list items avoid breaking mid-element. Headings stay with their following paragraph.
  • Details forced open — collapsed <details> content is made visible.
  • Text effects disabled — gradients, shimmer, glitch, reveal, typewriter, scramble, and spoiler effects revert to plain text.
  • Table headers repeat — <thead> rows repeat on every printed page.
  • Typography — base font size set to 12pt. <pre> wraps instead of overflowing.

Page Modes

For pages designed to be printed, set data-print on <body> to activate a named mode with CSS @page rules.

Value Effect Use case
article Wide margins, page numbers (bottom center), no number on first page, section breaks Blog posts, documentation
invoice Tight margins, A4 portrait Invoices, receipts
report Left/right page awareness, binding margin, page numbers in outer corners Multi-page reports, booklets
none Hides the entire page from printing Dashboards, app shells

Article

Long-form content with page numbers and section breaks. Each direct <section> starts on a new page.

Invoice

Tight margins optimized for A4 portrait paper.

Report

Left/right page awareness with binding margin for double-sided printing.

Visibility Control

Control what appears on screen vs. paper with data attributes.

Attribute Effect
data-no-print Hidden when printed, visible on screen
data-print-only Visible when printed, hidden on screen
data-print-keep Prevents auto-hiding (e.g. keep a table-of-contents <nav> in print)
data-print-background Forces background colors/images to print
<!-- Timestamp only visible on paper --> <p data-print-only>Printed on Feb 24, 2026</p> <!-- Hide site footer from print --> <footer data-no-print>...</footer> <!-- Keep this nav visible in print --> <nav aria-label="Table of contents" data-print-keep> <ol> <li><a href="#intro">Introduction</a></li> <li><a href="#methods">Methods</a></li> </ol> </nav> <!-- Force background to print --> <mark data-print-background>Highlighted</mark>

Page Breaks

VB automatically protects tables, figures, blockquotes, code blocks, and list items from splitting across pages. For manual control:

Attribute CSS effect
data-break-before break-before: page
data-break-after break-after: page
data-break-avoid break-inside: avoid
<!-- Start chapter on a new page --> <section data-break-before> <h2>Chapter 2: Methods</h2> ... </section> <!-- Keep figure intact across pages --> <figure data-break-avoid> <img src="chart.svg" alt="Results chart"> <figcaption>Figure 1: Quarterly results</figcaption> </figure>

Opting Out

To print a page exactly as it appears on screen — with theme colors, shadows, and layout intact — add data-print-raw to the <html> element:

<html lang="en" data-print-raw>

This disables all VB print optimizations. The @page margin rules still apply (they cannot be scoped to a selector), but everything else is skipped.

The <print-page raw-toggle> component exposes this as a user-facing checkbox.

Browser Support

The core print reset works in all browsers. Enhanced @page features degrade gracefully.

Feature Chrome Firefox Safari Edge
@media print All All All All
@page { margin } All All All All
@page :first Yes Yes Yes Yes
@page :left/:right Yes Yes Partial Yes
Named pages 85+ 110+ No 85+
Margin boxes 131+ Yes No 131+
break-* 50+ 65+ 10+ 79+
print-color-adjust 17+ 97+ 15.4+ 79+

If the browser doesn’t support named pages or margin boxes, printing still works — it just uses default page margins without page numbers.