data-print

Print optimization attributes for controlling how pages look when printed — page modes, element visibility, page breaks, and opt-out.

Overview

VB includes a print optimization layer that automatically makes pages look good when printed. It resets design tokens for black-on-white contrast, hides interactive elements, controls page breaks, expands external links, and linearizes layouts.

The print layer loads automatically via main.css. No extra imports needed.

For most pages, the default behavior is all you need. For pages that are intended to be printed (articles, invoices, reports), use data-print on the <body> to enable enhanced print modes with @page rules.

For a conceptual overview, see the Printing guide.

Page Modes

Set data-print on <body> to activate a named print mode. Each mode maps to a CSS @page rule with optimized margins and page numbering.

Value	Effect	Use Case
`article`	Wide margins, page numbers (bottom center), no number on first page, section breaks	Blog posts, documentation, long-form content
`invoice`	Tight margins, A4 portrait	Invoices, receipts, order confirmations
`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, settings pages

In article mode, each direct <section> child of [data-print="article"] starts on a new page.

Visibility Attributes

Control what appears on screen vs. paper.

Attribute	Effect
`data-no-print`	Hidden when printed, visible on screen
`data-screen-only`	Alias for `data-no-print`
`data-print-only`	Visible when printed, hidden on screen
`data-print-keep`	Prevents auto-hiding of `<nav>` or `<aside>` that would normally be suppressed
`data-print-background`	Forces background colors/images to print (uses `print-color-adjust: exact`)

What Gets Auto-Hidden

These elements are hidden in print automatically (no attributes needed):

<nav> (unless data-print-keep is set)
<dialog>, <search>
Buttons (except type="submit")
Range inputs, switches, toolbars
VB interactive components: theme-picker, site-search, command-palette, page-toc, tool-tip, toast-msg, short-cuts, settings-panel, drop-down, context-menu, emoji-picker, print-page

Page Break Control

Force or prevent page breaks on specific elements.

Attribute	CSS Effect
`data-break-before`	`break-before: page`
`data-break-after`	`break-after: page`
`data-break-avoid`	`break-inside: avoid`

Automatic Break Protection

VB automatically prevents breaks inside these elements (no attribute needed):

table, blockquote, pre, code, figure, li, img, picture, details, fieldset

Headings are kept with their following paragraph — a heading will never appear alone at the bottom of a page.

Print Component

The <print-page> web component provides a print button that auto-hides itself when printing.

Attribute	Effect
`raw-toggle`	Shows a checkbox labeled “Print without VB styles”
`label`	Custom button label (default: element text content or “Print this page”)

The component hides itself in print. Add data-no-print to the component for explicit documentation, though it is redundant.

Opting Out

If you want the page to print exactly as it appears on screen — no token reset, no element hiding, no layout linearization — add data-print-raw to the <html> element.

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 provides this as a user-facing checkbox.

Demos

Each demo includes a <print-page raw-toggle> so you can compare VB-optimized printing vs. raw output. Use Ctrl+P / Cmd+P or the print button inside each demo.

Article

Long-form content with page numbers and section breaks.

Invoice

Tight margins, A4 portrait layout.

Report

Left/right page awareness with binding margin.

What the Print Layer Does

A summary of all automatic print optimizations:

Category	What Happens
Colors	Design tokens reset to black-on-white. No per-element color hacking — every element using tokens automatically gets print-correct colors.
Shadows	`box-shadow` and `text-shadow` removed on all elements.
Typography	Base font size set to 12pt. `<pre>` wraps instead of overflowing.
Links	External URLs printed after link text: `Example (https://example.com)`. Image links and anchor links suppressed.
Abbreviations	Title expanded: `CSS (Cascading Style Sheets)`.
Layout	Sidebars linearized. `data-layout="sidebar"` collapses to single column.
Tables	`<thead>` repeats on every page. Sticky positioning disabled. Horizontal scroll removed.
Details	Collapsed `<details>` content forced visible. Toggle indicators hidden.
Forms	Inputs get visible borders. Placeholders hidden.
Text effects	Gradient text, shimmer, glitch, reveal, typewriter, scramble, and spoiler effects all disabled — plain text shown.
Images	`max-width: 100%` prevents overflow. Background images stripped by token reset.

Browser Support

The core print reset (Phase 1) 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 (`@bottom-center`)	131+	Yes	No	131+
`break-*` properties	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.